For the most part, React Native’s Image component handles image caching in the same way as browsers do. If the server is returning proper cache-control headers for images you’ll generally get the sort of built-in caching behavior you’d have in a browser. Even so many people have noticed:
- Flickering.
- Cache misses.
- Low-performance loading from cache.
- Low performance in general.
FastImage is an Image alternative that addresses these concerns.
Features
- Aggressively cache images.
- Add authorization headers.
- Prioritize images.
- Preload images.
- GIF support.
- Border radius.
Usage
Note: To use the most recent version of react-native-fast-image , you must be using React Native 0.60.0 or above.
yarn add react-native-fast-image
cd ios && pod install
import FastImage from 'react-native-fast-image'
const YourImage = () => (
<FastImage
style={{ width: 200, height: 200 }}
source={{
uri: 'https://unsplash.it/400/400?image=1',
headers: { Authorization: 'someAuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
)