In this React Native lesson we are going to learn about React Native Image, Image is a built in component in react native and it is used for adding images in your react native application, you can use offline images from your directory or online images from the internet, also we will learn that how you can use ImageBackground in react native.
This is my ReactImage.js component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import React from 'react' import {Image, View} from 'react-native'; function ReactImage() { return ( <View style = {{alignItems:'center', padding:40}}> <Image style ={{width:'100%', height:200}} source = {require('../img/cake.jpg')} /> <Image style ={{width:'100%', height:200}} source = {require('../img/cake.jpg')} /> </View> ) } export default ReactImage |
You can see that we have added our Image, also i have added some styles for the image like width and height, after that you need to specify the source of the image, i have already added an image in my working directory.
1 2 3 4 5 |
<Image style ={{width:'100%', height:200}} source = {require('../img/cake.jpg')} /> |
This is my App.js file.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import ReactImage from './components/ReactImage'; export default function App() { return ( <ReactImage/> ); } |
Run your application and this is the result.
![React Native Image](https://geekscoders.com/wp-content/uploads/2021/03/react-native-image.jpg)
Also you can use ImageBackground for adding a background to your React Native application.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from 'react' import {ImageBackground, View} from 'react-native'; function ReactImage() { return ( <ImageBackground style ={{width:'100%', height:'100%'}} source = {require('../img/cake.jpg')} /> ) } export default ReactImage |
Run your application and this is the result.
![React Native Image Background](https://geekscoders.com/wp-content/uploads/2021/03/react-native-background-image.jpg)