README
React Native Better Image
A better image component for react-native with fallback images & progressive loading support
Built on top of View
, Image
& Animated
components
Compatible with Expo & React Native Web đ
PRs Welcome đâ¨
- đĻ Installation
- âšī¸ Usage
- đ Documentation
- ⨠Motivation
- đą Example App
Installation
yarn add react-native-better-image
#or
npm install react-native-better-image
Usage
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
/>
Motivation
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 đ
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT Š DaniAkash