In react native application, to add images, we can use the <Image /> component. We can use this component to show images from our local storage, internet, and even from our camera roll. To use it, we just need to define the source inside our Image component.
Load Image from Local storage in React Native
To load an image from local storage in react native app, we can use require() function and then define the local path inside it. It will render the image. Let's take an example to understand it.
import React from 'react';
import { View, Text, Image } from 'react-native';
const App = () => {
return (
<View style={{flex: 1, marginTop: 40, justifyContent: 'center', alignItems: 'center'}}>
<Image
source={require('./favicon.png')}
/>
</View>
);
};
export default App;
Here in the above code, we have already stored an image favicon.png and to load that image in our app we just use the Image component, and then we define the source using the required() method. we can also set the style on this image but we don't require it.
Load Image from Internet/URL in React Native
To load Image from the Internet or server, we need to define the URI inside the source of the Image component. And also, we need to define the height and width because without defining the width and height, we can't load the image from the internet.
import React from 'react';
import { View, Text, Image } from 'react-native';
const App = () => {
return (
<View style={{flex: 1, marginTop: 40, justifyContent: 'center', alignItems: 'center'}}>
<Image
source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png' }}
style={{height: 100, width: 100}}
/>
</View>
);
};
export default App;
In the above code, to load an image from an URL or internet, we define the URI inside the source and also we define the height and width using the style property. and it is required to have at least height and width defined when we use an image that loads from a URL.
here the problem is that we can't use any other component on the Image component like display text on the Image. and to resolve this problem we can use the <ImageBackgroud /> component.
Also Read: What is React Native?
ImageBackground Component in React Native
This component works similar to the Image component, the only difference is that we can use this component to show any other component on an Image in our app.
import React from 'react';
import { View, Text, ImageBackground } from 'react-native';
const App = () => {
return (
<ImageBackground style={{flex: 1, width: "100%", height: "100%", justifyContent: 'center', alignItems: 'center'}}
source={{uri: 'https://images.unsplash.com/photo-1579546929662-711aa81148cf?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHw%3D&w=1000&q=80' }}
>
<Text style={{fontSize: 30}}>Text is showing on the Image</Text>
</ImageBackground>
);
};
export default App;
Here, we define an ImageBackground component and inside it, we define a Text component to display over the image as you could see in the given image above. Here, we load an image from a URI but we can also load an image from our local app store just like we use an Image component and we can also use any other component that presents in react native on the ImageBackground.
You may also like:
