React Native Tutorial
Core Concepts
Components and APIs
React Native Useful Resources
Selected Reading
Core Concepts
- React Native - Running Android
- React Native - Running IOS
- React Native - Router
- React Native - Debugging
- React Native - Animations
- React Native - Buttons
- React Native - HTTP
- React Native - Images
- React Native - ScrollView
- React Native - Text Input
- React Native - ListView
- React Native - Flexbox
- React Native - Styling
- React Native - Props
- React Native - State
- React Native - App
- React Native - Environment Setup
- React Native - Overview
Components and APIs
- React Native - AsyncStorage
- React Native - Geolocation
- React Native - Alert
- React Native - Text
- React Native - Switch
- React Native - Status Bar
- React Native - Picker
- React Native - ActivityIndicator
- React Native - Modal
- React Native - WebView
- React Native - View
React Native Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
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
![React Native Images](/react_native/images/react_native_images.jpg)
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
![Network Images](/react_native/images/network_images.jpg)