dwillmc / react-native-fit-image

Responsive image component to fit perfectly itself.

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}
/>

Example

• See a FitImageExample.