React Native Fit Image

React Native Fit Image enables you to draw responsive image component.

Introduction

Responsive image component to fit perfectly itself.

Install

npm install react-native-fit-image --save

Usage

import FitImage from 'react-native-fit-image';

// custom styles for FitImage
var styles = StyleSheet.create({
  fitImage: {
    borderRadius: 20,
  },
  fitImageWithSize: {
    height: 100,
    width: 30,
  },
});

// draws image to fit inherited space automatically, even when screen is rotated.
// even you don't need to provide original size in v1.2.0
<FitImage
  source={{ uri: 'https://facebook.github.io/react/img/logo_og.png' }}
  style={styles.fitImage}
/>

// draws image to fit inherited space automatically and shows indicator while image is loading
<FitImage
  indicator
  indicatorColor="white" // react native colors or color codes like #919191
  indicatorSize="large" // (small | large) or integer
  source={{ uri: 'https://facebook.github.io/react/img/logo_og.png' }}
  style={styles.fitImage}
/>

// draws image to fit inherited space automatically, even when screen is rotated.
<FitImage
  source={{ uri: 'https://facebook.github.io/react/img/logo_og.png' }}
  originalWidth={400}
  originalHeight={400}
  style={styles.fitImage}
/>

// could use resizeMode
<FitImage
  resizeMode="contain"
  source={{ uri: 'https://facebook.github.io/react/img/logo_og.png' }}
/>

// or draws image to specific size like Image component.
<FitImage
  source={{ uri: 'https://facebook.github.io/react/img/logo_og.png' }}
  style={styles.fitImageWithSize}
/>

// draws local image (currently, it does not support responsive)
<FitImage
  source={require('fit-image.png')}
  style={styles.fitImageWithSize}
/>

// draws image to fit inherited space automatically and shows indicator while image is loading, if the image not loaded put your custom default image localy
<FitImage
  indicator
  indicatorColor="white" // react native colors or color codes like #919191
  indicatorSize="large" // (small | large) or integer
  source={{ uri: 'https://facebook.github.io/react/img/logo_og.png' }}
  style={styles.fitImage}
  defaultImageOnError={require('fit-image.png')}
/>

// draws image to fit inherited space automatically and shows indicator while image is loading, if the image not loaded put your custom default image from web
<FitImage
  indicator
  indicatorColor="white" // react native colors or color codes like #919191
  indicatorSize="large" // (small | large) or integer
  source={{ uri: 'https://facebook.github.io/react/img/logo_og.png' }}
  style={styles.fitImage}
  defaultImageOnError={{ uri: 'https://someurl.com/DEFAULT.png' }}
/>

Example

• See a FitImageExample.