React Native Image

In this tutorial, we will learn how to display images in react native. Whenever you want to add images to your application, one option is to use a react-native-camera component, which allows you to take pictures and get the resulting base64 encoded image. This is generally easier, but might not be possible if all you have is a url instead of the image itself.

Each app built with React Native has an assets folder where all the image assets that are used in the app reside. If you have an images directory with different assets for different ios/android assets, then it is much easier to use these images as React native Image component uses a unique identifier for the image, rather than its path. In this article we will see how to display images in React native.

Example

// App.js

import React from 'react';  
import Display from './Display'

  const App = () => {
    return (
       <Display />
    )
 }
 
export default App

Lets create another component

// Display.js 

import React, { Component } from 'react'
import {  View, Text, Image, StyleSheet  } from 'react-native'

const Display = () => (

    <View style={styles.Container}>
    <Image 
        style={{marginTop: 50 }}
        source={require('./assets/favicon.png')}
    />
    </View>
)
 export default Display
 
 const styles = StyleSheet.create({
    Container: {
      flex: 1,
      padding: 20,
      alignItems: 'center',
      justifyContent: 'center',
      paddingTop: (Platform.OS === 'ios') ? 25 : 0
    }
});

Output