1.8 KiB
FastImage
Always use FastImage for remote images, it has much better caching and performance.
But always use react-native/Image for local images, because FastImage will load sequentially
which means that a remote image might block a local image display.
Use svg for vector images
Preferably, we should always use svg for local assets.
In booster, we integrated with svg out of the box
So you can easily import svg files as components
import SearchIcon from "./asset/searchIcon.svg";
There are certain limits on what kind of svg properties react-native support, but it our usages, it was more than good.
Also, you should use tools like OMGSVG to slim down svg files exported from Sketch. It can usually reduce the svg size by more than 50%
Image resize
Booster integrates with react-native-image-resizer, so you can resize you image before upload.
This is useful when you want to cap user upload image to a certain size.
Image thumbnails
Its always a good idea to load small thumbnails over origin image.
- It's faster to download
- It consumes less memory in the app
Booster comes with a image flexible thumbnail service out of the box, in the form of a firebase cloud function.
It will be a API like this
https://us-central1-mercy-dev.cloudfunctions.net/image-resize?url=${encodeURIComponent(imageURL)}&width=300&height=300
This will download your image, resize it and then cache it in firebase storage, and then later on serves from storage directly if the url, width and height is the same.