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 (
style={{ width: 200, height: 200 }}
</View> ); }; export default App;

Add Comment

* Required information


No comments yet. Be the first!

Most Viewed Articles (in React-Native )

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native