React Native

React Native – Image

This post will give you an idea to Display Image in React Native Using Image Component. React Native Image is a component for displaying different types of images, including network images, static resources, temporary local images, and images from local disks, such as the camera roll.

Note that for network and data images, you will need to manually specify the dimensions of your image!

To Import Image in the Code
import { Image } from 'react-native'
Static Image Resources

The static images are added in app by placing it in somewhere in the source code directory and provide its path as:

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

require can also be used for including audio, video or document files in your project. Most common .mp3, .wav, .mp4, .mov, .html and .pdf.

Network Requests for Images

The dynamic and network images are also be displayed in the Image component. To access the network image, it is required to specify the dimensions of image manually.

    source={{uri: ''}} 
    style={{width: 400, height: 400}} 
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.

    style={{width: 66, height: 58}} 
import React, { Component } from 'react';
import { Text, Image, View, StyleSheet } from 'react-native';
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
          style={{ width: 66, height: 58 }}
          style={{width: 200, height: 150}} 
          style={{ width: 400, height: 400, margin: 16 }}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 40,
    backgroundColor: '#ecf0f1',

When building your own native code, GIF and WebP are not supported by default on Android.

You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:2.0.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:2.1.0'
  implementation 'com.facebook.fresco:webpsupport:2.0.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:2.0.0'

Shaiv Roy

Hy Myself shaiv roy, I am a passionate blogger and love to share ideas among people, I am having good experience with laravel, vue js, react, flutter and doing website and app development work from last 7 years.

Related Articles

Leave a Reply

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

Back to top button