1<Image
2 source={{ uri: 'app_icon' }}
3 style={{ width: 40, height: 40 }}
4/>
5
1// useing require is more secure
2<Image
3 source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')}
4/>
1<Image //change imagePath with the real path of your image, for example ./src/image/image.jpg
2 source={require("imagePath")}
3/>
1Adding Image
2Let us create a new folder img inside the src folder. We will add our image (myImage.png) inside this folder.
3
4We will show images on the home screen.
5
6App.js
7import React from 'react';
8import ImagesExample from './ImagesExample.js'
9
10const App = () => {
11 return (
12 <ImagesExample />
13 )
14}
15export default App
16Local image can be accessed using the following syntax.
17
18image_example.js
19import React, { Component } from 'react'
20import { Image } from 'react-native'
21
22const ImagesExample = () => (
23 <Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} />
24)
25export default ImagesExample