Image
In React Native, Image component is used to render the images on the screen. There are 2 ways to include images in an app: 1. we can bundle an image asset with our code. 2. we can download an image from a URI.
1. Bundling image assets:
To bundle an image asset, we can require the image by name from our project directory just like any other file.we can pass an image reference to the source prop of an image to render it.
e.g If we had a file called Nature.png then we can add this in our project - <Image source={require('./Nature.png')}/>
2. Remote image Asset:
To display an image from URI, we must pass an object to the source prop of the image component.the object should contain a string value uri, and may optionally contain number values for width and height.The image will automatically download the data from the URI and display it once loaded.Large images may take a while to download. We can pass a callback function to the onLoad prop of Image to determine when the image has loaded.
<Image source={{ uri:'https://unsplash.it/600/600'}}/>
We can use the resizeMode style to determine how the image is cropped. The options for resizeMode are:
1.cover: The image scales uniformly to fill the image component.The image will be cropped by the bounding box of the component if they have different aspect ratios.
2. stretch: The image stretches to fill the component.
3. contain: The image scales uniformly to fit within the component. The component's background color will show if they have different aspect ratios.
4. center: The image maintains its dimensions, and is centered within the component.
aspectRatio style is used to render image at specific aspect ratio regardless of its dimensions.
We provide a number value which represents the ratio of width to height. e.g If we set aspectRatio:2 , this means the ratio of width to height is 2 to1. The image will render twice as wide as it is tall.
Example:
First we import image component in our project.
import {Image} from 'react-native';
import React, { Component } from 'react';
import { Text, Image, View, StyleSheet } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
{/* If you want to show image from local directory
<Image
source={require('./assets/peacock.jpg')}
style={{width: 400, height: 400}}
/>*/}
<Image
source={{
uri:
'https://i.pinimg.com/originals/ba/24/b9/ba24b94eca057f8507643bc41563d696.jpg',
}}
style={{ width: 300, height: 300, margin: 16 }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 40,
backgroundColor: '#ecf0f1',
},
});
Output:
