Programming Tutorials

Image component in React Native

By: Niraj in React-Native Tutorials on 2023-04-09  

In React Native, the Image component is used to display images. It supports several props to control how the image is displayed:

1. source: This is the mandatory prop that specifies the source of the image. It can be a URI or a require() statement that points to a local file.

2. style: This prop sets the style for the Image component. It can be used to specify dimensions, margins, padding, and more.

3. resizeMode: This prop specifies how the image should be resized when it doesn't fit within its container. The available values are:

   • cover: The image is scaled uniformly to fit within the container. It may crop parts of the image to fill the container.

   • contain: The image is scaled uniformly to fit within the container. It may leave empty space around the image to maintain its aspect ratio.

   • stretch: The image is scaled non-uniformly to fill the container. It may distort the image to fit the container.

   • repeat: The image is repeated horizontally and vertically to fill the container.

   • center: The image is centered within the container, and its original size is preserved.

4. onLoad: This prop is a callback function that is called when the image is loaded.

5. onError: This prop is a callback function that is called when the image fails to load.

6. defaultSource: This prop is used to specify a default image to be displayed while the main image is being loaded.

7. blurRadius: This prop sets the blur radius of the image. It can be used to create a blurred version of the image.

8. borderRadius: This prop sets the border radius of the image.

Here's an example of how to use the Image component:

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

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

export default App;