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-native/docs/assets/favicon.png' }} style={styles.fitImage} /> // draws image to fit inherited space automatically and disables loading indicator <FitImage indicator={false} // disable loading indicator indicatorColor="white" // react native colors or color codes like #919191 indicatorSize="large" // (small | large) or integer source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }} style={styles.fitImage} /> // draws image to fit inherited space automatically, even when screen is rotated. <FitImage source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }} originalWidth={400} originalHeight={400} style={styles.fitImage} /> // could use resizeMode <FitImage resizeMode="contain" source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }} /> // or draws image to specific size like Image component. <FitImage source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.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.