A better image component for react-native with fallback images & progressive loading support
Built on top of View
, Image
& Animated
components
- π¦ Installation
- βΉοΈ Usage
- π Documentation
- β¨ Motivation
- π± Example App
yarn add react-native-better-image
#or
npm install react-native-better-image
import BetterImage from 'react-native-better-image';
// ...
<BetterImage
viewStyle={style}
source={{
uri: // image uri
}}
thumbnailSource={{
uri: // thumbnail uri - will be displayed till image is loaded
}}
fallbackSource={{
uri: // fallback image if original image fails to load
}}
// ...all other react-native image props
/>
React Native only includes a basic image component. I used to try solutions like react-native-fast-image but none actually worked for the two of my most important issues:
- Lack of a fallback placeholder
- Progressive image loading (especially for banners & cover images)
This library solves two of these important issues by providing a fallbackSource & a thumbnailSource prop. If you need more features, feel free to raise an issue or send a PR β¨ I'd be happy to help π
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT Β© DaniAkash