Skip to content
Really light React-Native package to handle fallback when image is on error
Branch: master
Clone or download
Latest commit 2c41478 Jun 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src feat add fallback component Jan 7, 2019
.gitignore feat if props update reset Dec 20, 2018
.npmignore feat if props update reset Dec 20, 2018
.prettierrc init Dec 20, 2018
LICENSE Initial commit Dec 20, 2018
README.md Update README.md Jun 27, 2019
package.json bump it Jan 7, 2019
tsconfig.json init Dec 20, 2018
tslint.json
yarn.lock init Dec 20, 2018

README.md

NPM version

react-native-safe-image

Really light React-Native package to handle fallback when image is on error

  • fallback to other image
  • fallback to a component

How to use it ?

yarn add react-native-safe-image

import { SafeImage } from 'react-native-safe-image'

// ...
render() {
  return (
    <SafeImage
      source={{ uri: 'http://Normal-Image-Maybe-OnError.jpg' }}
      fallbackImageSource={require('./Path-To/FallbackImage.jpg')}
      style={{ width: 30, height: 30 }}
      resizeMode="contain"
    />
  )
}
// ... or ...
const noImg = <View><Text>No Img</Text></View>
render() {
  return (
    <SafeImage
      source={{ uri: 'http://Normal-Image-Maybe-OnError.jpg' }}
      fallbackComponent={noImg}
      style={{ width: 30, height: 30 }}
      resizeMode="contain"
    />
  )
}

Todos

  • add fallbackComponent prop

Hire an expert!

Looking for a ReactNative freelance expert with more than 12 years experience? Contact me from my website!

You can’t perform that action at this time.