January 27, 2020 by Baradwaj VaradharajanContents
Images are really easy to include in your React Native app. In this article, we will see about including 3 different sources of image,
All these can be easily included into your application using the Image object available as part of the ‘react-native’ Component. To know more about that, read on the rest of this article.
Before we begin, if you are new to React Native, take a look at the basics of React Native and other React Native articles to ramp you up faster.
To start this tutorial, the first thing you have to learn about is the use of the Imageelement in your React Native Component. Images can be of any type as mentioned above. React Native handles these types of image with the help of the most important attribute source.
The source of the image could be either of the three
For all the above methods, the React Component is going to Look like,
import React, { Component } from 'react';
import {StyleSheet,Text, Image ,TouchableOpacity, View} from 'react-native';
export default function App()
{
return(
<View>
<Image style={{height:150, width:150}}
source={{uri:'NETWORK LOCATION TO THE IMAGE'}}
</Image>
</View>
);
}
With the above template Component, we will construct some useful examples below to make use of the Network Image, File Image and even the b64 image.
The easier of the image is to load any image from a network location. There are multiple use for this,
In order to load an Image into the React Native application, replace the provide the network location of an image inside the ‘uri;’ of the source attribute. The example below illustrates the same.
import React, { Component } from 'react';
import {StyleSheet,Text, Image ,TouchableOpacity, View} from 'react-native';
export default function App()
{
return(
<View>
<Image style={{height:150, width:150}}
source={{uri:'https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500'}}
</Image>
</View>
);
}
Network Image in a React Native App### Image String in React Native App
The next is to show a Image encoded String or the b64 String which can be usually saved as part of the Database. Note:It is recommended to save images of small size or lower DPI in the database. Encoding an image usually creates String upto 2000 characters or more. In the below example you can create a React Native Application which fetches a sample Encoded string and loads it in the App
import React, { Component } from 'react';
import {StyleSheet,Text, Image ,TouchableOpacity, View} from 'react-native';
export default function App()
{
const [value, onChangeText] = React.useState("Default Value")
return(
<View>
<Image style={{height:150, width:150}}
source={{uri:'data:image/png;base64,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'}}>
</Image>
</View>
);
}
The above example creates an Application that looks like,
Database Image/String Image in React Native### File Image in React Native App
Next up is loading a File Image into your React Native App. The reason for loading a File Image is usually because it comes bundled as part of the project. It could be a simple Icon to a massive background wallpaper. Note: Try to avoid loading a File Image as part of the Project itself. It takes a lot of space and makes the app bulkier. Times when the File Image has to be shown to the user, make use of the require() callinside the ‘uri:’
Code to show a File Image in the React Native App
import React, { Component } from 'react';
import {StyleSheet,Text, Image ,TouchableOpacity, View} from 'react-native';
export default function App()
{
const [value, onChangeText] = React.useState("Default Value")
return(
<View>
<Image style={{height:150, width:150}}
source={{uri:'require(/assets/file.png'}}>
</Image>
</View>
);
}
Note that the file is placed inside a folder called assets and is named file.png. This will load the file on to the App like below,
React Native File Image Example### React Native Image Element – Points to Remember
One of the important points to remember as part of the React Native Image Element is that,
After writing down all the important steps to follow, i realised that there are some common React Native mistakesthat developers do while loading the image in particular.
Check out the image Below for your reference.
Images are super useful for any application. React Native in particular handles different stream of images using a single Element itself. This makes it super easy to write and scale your application faster.
Drop your comments below!
TweetPinShare0 Shares Categories React Native Leave a comment Post navigationHow to get User Input in React Native – TextInputWebDriver Automation With Dart – Automating LinkedIn Post### Leave a Comment Cancel reply
Comment
Name Email Website
Search for: ## Archives
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience. Necessary Necessary Always EnabledNecessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary Non-necessaryAny cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
/* / / */ var swp_nonce = "d0f8c9f8a6";var swpFloatBeforeContent = false; var swp_ajax_url = "https://androidmonks.com/wp-admin/admin-ajax.php"; var swp_post_id = "2299";var swpClickTracking = false;