React-Native Image

Syntax

The <Image> component in React-Native is used to display images within the app.

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

const App = () => {
  return (
    <View>
      <Image
        source={require('./path/to/image.png')}
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
}

export default App;

Example

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

const App = () => {
  return (
    <View>
      <Image
        source={{uri: 'https://via.placeholder.com/150'}}
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
}

export default App;

Output

The <Image> component renders the specified image based on the source prop passed to it. The style prop determines the dimensions of the rendered image.

Explanation

Images are often a crucial aspect of any mobile app. React-Native provides the <Image> component to display images within the app.

The source prop of the <Image> component can be either a local path or a remote URL for the image. The require function is used to provide the local path to the image in the app.

The style prop is used to specify the width and height of the image in the app. Other styles can also be applied, including resizing modes, border width, and border color.

Use

The <Image> component is used to display images within the app.

Some common props that are used with the <Image> component include:

• source: The source of the image to be displayed
• style: The styling options for the image, including dimensions, resizing modes, and border styles
• resizeMode: Determines how the image is resized to fit its container
• onLoad: A callback function called when the image loads
• onError: A callback function called when the image fails to load

Important Points

• Images can be either local or remote, and can be specified using the source prop.
• The require function is used to provide the path for local images.
• The style prop can be used to specify the dimensions and other styling options for the image.
• Images can be resized with the resizeMode prop.

Summary

The <Image> component is a powerful tool for displaying images within a React-Native app. By specifying the source and style props, the component can be customized to fit the needs of any app. The component supports both local and remote images, and provides a range of resizing options.