React Native - Images
React Native - Images
In this chapter, we will understand how to work with images in React Native.
Adding Image
Let us create a new folder img inside the src folder. We will add our image (myImage.png) inside this folder.
We will show images on the home screen.
App.js
import React from 'react'; import ImagesExample from './ImagesExample.js' const App = () => { return ( <ImagesExample /> ) } export default App
Local image can be accessed using the following syntax.
image_example.js
import React, { Component } from 'react' import { Image } from 'react-native' const ImagesExample = () => ( <Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} /> ) export default ImagesExample
Output
Screen Density
React Native offers a way to optimize images for different devices using @2x, @3x suffix. The app will load only the image necessary for particular screen density.
The following will be the names of the image inside the img folder.
my-image@2x.jpg my-image@3x.jpg
Network Images
When using network images, instead of require, we need the source property. It is recommended to define the width and the height for network images.
App.js
import React from 'react'; import ImagesExample from './image_example.js' const App = () => { return ( <ImagesExample /> ) } export default App
image_example.js
import React, { Component } from 'react' import { View, Image } from 'react-native' const ImagesExample = () => ( <Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}} style = {{ width: 200, height: 200 }} /> ) export default ImagesExample
Output
Frequently Asked Questions
+
Ans: React Native - ScrollView view more..
+
Ans: React Native - Text Input view more..
+
Ans: React Native - ListView view more..
+
Ans: React Native - Images
view more..
+
Ans: React Native - HTTP view more..
+
Ans: React Native - Buttons view more..
+
Ans: React Native - Animations
view more..
+
Ans: React Native - Debugging
view more..
+
Ans: React Native - Router
view more..
+
Ans: React Native - Running IOS
view more..
+
Ans: React Native - Running Android
view more..
+
Ans: React Native - View
view more..
+
Ans: React Native - WebView
view more..
+
Ans: React Native - Modal
view more..
+
Ans: React Native - ActivityIndicator
view more..
+
Ans: React Native - Picker
view more..
+
Ans: React Native - Status Bar
view more..
+
Ans: React Native - Switch
view more..
Recommended Posts:
Rating - NAN/5
Advertisements