Display Image in React Native - Mobile Application - Example
Congratulations! You are standing in the right place!
In this article, we will discuss how to exhibit image in react native application utilizing online URL.
We are going to create a mobile app like below,
Implementation:
You must set up your local development environment. Follow the below link to set up your local environment.
After executing the commands mentioned in this link, a folder with a specified name is created with the following contents.
import React, { Component } from 'react';
import {
AppRegistry, Image
} from 'react-native';
export default class App extends Component {
render() {
let Image_URL ={ uri: 'https://raw.githubusercontent.com/knowledgefactory4u/
Javascript/master/photo-1611337449232-e3183e932494.jpeg'};
return (
<Image source={Image_URL} style = {{height: 700, resizeMode : 'stretch',
margin: 5 }} />
);
}
}
AppRegistry.registerComponent('App', () => App);
Explanation
Integrate Image component in import block.
import {
AppRegistry, Image
} from 'react-native';
Engender let variable and assign Image URL to let variable utilizing URI.
let Image_URL ={ uri: 'https://raw.githubusercontent.com/knowledgefactory4u/
Javascript/master/photo-1611337449232-e3183e932494.jpeg'};
Integrate Source attribute in Image tag and Assign Let variable name to it.
return (
<Image source={Image_URL} style = {{height: 700, resizeMode : 'stretch',
margin: 5 }} />
);
}
}
Run
sibinmuhammed@ladmin-H310M-S2:~$ react-native start
sibinmuhammed@ladmin-H310M-S2:~/knf-reactnative/KnowledgeFactoryDemo$ react-native run-android
More Topics,
