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
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT © DaniAkash