Using react-native-fast-image library to avoid RAM issues
In a recent release of a mobile app with React Native, I had a serious issue regarding the RAM and actually I didn’t know it was that only after a week of developing and testing on that part.
There is a global drawer with a profile and background images, the total size of those it’s about 6 kb and there is a section which contains a list of 75 items and each item has an image along with some information.
When I opened the view with the list of items, something weird happened that if you opened the drawer, the images disappear also randomly some of the images in the list of items.
After some research, I encounter that it was a problem related with the RAM because it was taking more than the free available and I found a perfect package to solve that problem.
FastImage is a component that can handles image caching almost like browsers do, the installation is a normal library installation and the same for the usage.
- Install the library
yarn add react-native-fast-image - Use the library
import FastImage from 'react-native-fast-image'
const YourImage = () =>
<FastImage
style={styles.image}
source={{
uri: 'https://unsplash.it/400/400?image=1',
headers:{ Authorization: 'someAuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
When I replaced the images of the drawer and in the product list, the problem was fixed instantly so I highly recommend its use in your projects.
