React Native Scalable Image – Android iOS Example

Image aspect ratio is used to set image scaling according to a given ration count. There are several type of image aspect ratio available for scaling image. In react native the Image component dose not support scale image according to width or height. But using the react-native-scalable-image custom component we can easily make the image component scalable. The react-native-scalable-image dose support all the major props like width, height and style. If we pass width only in react-native-scalable-image component then it will automatically resize the image according to given width and set its height. So in this tutorial we would learn about React Native Scalable Image Component Android iOS Example.

Contents in this project React Native Scalable Image – Android iOS Example:

1. First we need to download and install the react-native-scalable-image component in our react native project. So open your react native project root director and execute below command to install it.

Screenshot of CMD:

Screenshot of CMD after finish installation:

2. Now open your project’s main App.js file and import View, StyleSheet and Text component.

3. Importing Image component from react-native-scalable-image library.

4. Creating our main export default functional component App. This is our main parent component.

5. Creating return() block and here we would first make a Root View component then make the Image component. We are calling the image from online URL, so if anyone copies my code it will directly run into your project.

List of React Native Scalable Image Props:

  1. width : Image width.
  2. height : Image height.
  3. onPress : To set click event on Image.
  4. background : Image can be used as background, Support Boolean True False value. Value should bet set True if user wants to set image as background.
  5. onSize : Is called with { width, height } as the first argument once image size is calculated.

6. Creating Style.

7. Complete Source Code for App.js file:

Screenshot:

React Native Scalable Image - Android iOS Example

Leave a Reply

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