React Native Image - Geekscoders

React Native

About Lesson

In this React Native lesson we are going to learn about React Native Image, Image is a built in component in react native and it is used for adding images in your react native application, you can use offline images from your directory or online images from the internet, also we will learn that how you can use ImageBackground in react native.

This is my ReactImage.js component.

import React from 'react'
import {Image, View} from 'react-native';

function ReactImage() {
    return (
       <View style = {{alignItems:'center', padding:40}}>
            <Image
        style ={{width:'100%', height:200}}
        source = {require('../img/cake.jpg')}    
        
        />

<Image
        style ={{width:'100%', height:200}}
        source = {require('../img/cake.jpg')}    
        
        />
       </View>
            
      
    )
}

export default ReactImage

import React from 'react'

import {Image, View} from 'react-native';

function ReactImage() {

return (

<Image

style ={{width:'100%', height:200}}

source = {require('../img/cake.jpg')}

<Image

style ={{width:'100%', height:200}}

source = {require('../img/cake.jpg')}

</View>

)

}

export default ReactImage

You can see that we have added our Image, also i have added some styles for the image like width and height, after that you need to specify the source of the image, i have already added an image in my working directory.

     <Image
        style ={{width:'100%', height:200}}
        source = {require('../img/cake.jpg')}    
        
        />

<Image

style ={{width:'100%', height:200}}

source = {require('../img/cake.jpg')}

This is my App.js file.

import React from 'react';

import ReactImage from './components/ReactImage';



export default function App() {
  return (
 
    <ReactImage/>
  
  );
}

import React from 'react';

import ReactImage from './components/ReactImage';

export default function App() {

return (

);

}

Run your application and this is the result.

Also you can use ImageBackground for adding a background to your React Native application.

import React from 'react'
import {ImageBackground, View} from 'react-native';

function ReactImage() {
    return (
        <ImageBackground
         style ={{width:'100%', height:'100%'}}
         source = {require('../img/cake.jpg')}    
         
         />
     )
}

export default ReactImage

import React from 'react'

import {ImageBackground, View} from 'react-native';

function ReactImage() {

return (

<ImageBackground

style ={{width:'100%', height:'100%'}}

source = {require('../img/cake.jpg')}

)

}

export default ReactImage

Run your application and this is the result.