React Native Image

React Native Image

Hi, in this tutorial I am going to let you guys know about React Native Image

If you already know how we did use image tag in HTML it’s easy for you to understand it in react native.

Firstly start new react native project by executing following command:

create-react-native-app appname

Once your react native project created just enter into the directory by using following commands:

cd appname

Now here execute npm start command to start the react native expo server for testing.

npm start

After this open your app.js file which is downloaded with the project files.

Now lest code :

First of all we need Image tag to load in our react native script:

import { Image } from 'react-native';
After this we are ready to use it with the coding part:
Coding for the image as follow:
<Container>
<Header/>
<Content padder>
<Card>
<CardItem header bordered>
<Text>Image</Text>
</CardItem>
<CardItem bordered>
<Body>
<Image
source={{uri: 'http://onlinetutorial.co.in/wp-content/uploads/2018/06/image-1.png'}}
/>
</Body>
</CardItem>
<CardItem footer bordered>
<Text>My Footer</Text>
</CardItem>
</Card>
</Content>
</Container>
This code will show nothing in the output as we have not used any styles for image.
In this case we need to use style with width and height .
style={{width:300, height:100}}
After applying style on image you can see your output with the image URL.
Output for the same as follow :
React Native Image
React Native Image
So You can see the image with the dimensions set using the style.
Here is the full code for the same.
import React, { Component } from "react";
import { Image } from 'react-native';
import { Container, Header, Content, Card, CardItem, Text, Body, DatePicker } from "native-base";
export default class CardItemBordered extends Component {
render() {
return (
<Container>
<Header/>
<Contentpadder>
<Card>
<CardItemheaderbordered>
<Text>Image</Text>
</CardItem>
<CardItembordered>
<Body>
<Image
style={{width:300, height:100}}
source={{uri: 'http://onlinetutorial.co.in/wp-content/uploads/2018/06/image-1.png'}}
/>
</Body>
</CardItem>
<CardItemfooterbordered>
<Text>My Footer</Text>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
So that’s all for today guys tomorrow I will let you know how you can use image from local computer in react native stay tuned.
Download this code from github:
Download Project from Github
Download Project from Github

9 thoughts on “React Native Image

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Hi there! This post could not be written much better! Going through this article reminds me of my previous roommate!
    He constantly kept talking about this. I am going to send this post to him.
    Pretty sure he’ll have a good read. Many thanks for sharing!

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.