react native-tutorial

React Native Images

Let’s explore the many sorts of images we have for mobile applications and, more specifically, the image types that the React Native Image component demands before delving into the specifics of the image component.

  • Local images: pictures stored on the user’s device, either utilised momentarily or discovered on the camera roll.
  • Network images: pictures sent via the internet, such those downloaded from Google
  • Static resources: files on the device that are always the same and don’t alter or load dynamically

Properties

The React Native Image component has a few options that you may use to customise the component and alter how the photos are displayed in accordance with the technical or commercial requirements of your team. There are quite a few, but for the time being we’ll concentrate on the fundamental ones.

source

The primary property used to inform the component about the picture you wish to load is this one. You can basically just supply the URI of the image to load it here whether you’re using a local or distant file. You may also provide many URIs via it and instruct the device to choose the best one to use if you need to specify the width and height of the image.

Although this only functions for iOS, source will also receive a cache property that instructs the component how to cache network images.

defaultSource

When your component anticipates loading a network image, this prop is helpful. It is possible to specify a default picture that will load up till the network image is ready.

resizeMode

When an image’s dimensions don’t match the frame’s specifications, this component determines how such adjustments are made. The choices are as follows:

  • cover: enlarges the image’s width and height to match or exceed the size of the view
  • contain: a property that is the opposite of that of cover, contain scales the image’s width and height to match or fall short of the view stretch’s dimensions: independently scales the width and height.
  • repeat: repeats the image to completely fill the middle and cover the view: The image is centred in the view along both axes.
  • style: styled the image component using

Images for the background in React Native

Background pictures are generally added via CSS, but React Native offers an ImageBackground component that makes the same capability accessible in web applications. The same props that the Image component accepts are likewise accepted by the ImageBackground component.

Code

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

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
});

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.tinyLogo}
        source ={{
          uri: 'https://yt3.ggpht.com/nkKTY4sVP9IldAA4-Gox0SZFYN7b263TF1y4ZdhLcEDyvehMHrye6X6MmbV3th_rh0-vXEzNvQ=s176-c-k-c0x00ffffff-no-rj',
        }}
      />
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://yt3.ggpht.com/nkKTY4sVP9IldAA4-Gox0SZFYN7b263TF1y4ZdhLcEDyvehMHrye6X6MmbV3th_rh0-vXEzNvQ=s176-c-k-c0x00ffffff-no-rj',
        }}
      />
      <Image
        style={styles.logo}
        source={{
          uri: 'https://yt3.ggpht.com/nkKTY4sVP9IldAA4-Gox0SZFYN7b263TF1y4ZdhLcEDyvehMHrye6X6MmbV3th_rh0-vXEzNvQ=s176-c-k-c0x00ffffff-no-rj',
        }}
      />
    </View>
  );
}

export default DisplayAnImage;

Output

RECOMMENDED ARTICLES





Leave a Reply

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