Responsive image component to fit perfectly itself.
npm install react-native-fit-imagenpm install react-native-fit-image --savejavascript
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
style={styles.fitImage}
/>
// draws image to fit inherited space automatically and disables 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.
originalWidth={400}
originalHeight={400}
style={styles.fitImage}
/>
// could use resizeMode
source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
/>
// or draws image to specific size like Image component.
style={styles.fitImageWithSize}
/>
// draws local image (currently, it does not support responsive)
style={styles.fitImageWithSize}
/>
``!FitImageExample - Portrait
!FitImageExample - LandScape
[1]: https://github.com/originerd/react-native-fit-image-example