React Native – Images

Create a folder and add images in it. Here we have created folder named images and added image called pic1.jpg.

In 1st example we will see how to display images from local storage.

Open App.js and add below code

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


export default class SplashScreen extends React.Component{
render(){

return(
  <View style={styles.container}>
       
        <Image source={require('./images/pic1.jpg')}
        style={{ width: 250, height: 100 }}
        />

      </View>
    );

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }


}); 
 

In second example we will see how to load image from external sources.

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


export default class SplashScreen extends React.Component{
render(){

return(
  <View style={styles.container}>
       
       <Image source={{uri: 'https://picsum.photos/200/300'}}
        style={{ width: 250, height: 100 }}
        />

      </View>
    );

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }


});