The Image component is used to display the images on the screen. These image can be loaded from different sources like static resources, local storage, local disc, network images, etc

Static Images

import React, {Component} from 'react';

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

 

export default class Images extends Component {

  render() {

    return (

     

  <View style={ss.container}>

        <View style={ss.header}>

          <Text style={ss.headerText}>ReactNative Images</Text>

        </View>

        <View style={ss.body}>

        <Image

            source={require('./im.png')}

            style={{

              width: 200,

              height: 200,

              borderRadius: 300,

              alignSelf: 'center',

            }}

          />

        

      

    );

  }

}

const ss = StyleSheet.create({

  container: {

    backgroundColor: '#FAFAFA',

    flex: 1,

  },

  header: {

    alignItems: 'center',

    padding: 10,

 

    backgroundColor: 'cyan',

  },

  headerText: {

    fontSize: 25,

  },

  body: {

    backgroundColor: 'grey',

    padding: 16,

    flex: 1,

  },

  textItem: {

    alignContent: 'center',

    padding: 10,

    margin: 10,

    backgroundColor: 'pink',

    borderRadius: 8,

    borderColor: 'green',

  },

  textinputs: {

    color: 'white',

    borderBottomColor: 'white',

    borderBottomWidth: 2,

    fontSize: 22,

  },

});

 

 

Output

 

Load Image from Internet/Network Image Laod

 <Image

            source={{

              uri:

                'https://www.thewowstyle.com/wp-content/uploads/2015/01/nature-images.jpg',

            }}

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

          />

Uri Data Images

The encoded image data use the "data:" uri scheme in the image component. The data image also required to specify the dimension of the image.

<Image  

  style={{width: 66, height: 66}}  

  source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}  

/>  

 

 


Subscribe For Daily Updates