React Native Auto Scale Image Width Height Dimension Example Tutorial

Automatically image component image scaling is one of the extremely used feature in currently developed mobile application. Using the auto image scaling feature the image can automatically scale itself to given width, It automatically calculates the image height according to given width as respect of image. We are using the¬†react-native-scalable-image NPM GitHub library to achieve this functionality. This library would override the original image component and add the image scaling functionality on it. It works on Image aspect ration calculation system, So in this tutorial we would going to make a tutorial on Auto Scale Image Width Height Dimension in react native android iOS application. So let’s get started ūüôā .

Note: Width and Height of Image component will calculate automatically but all other props will be same as original React Native <Image/> component.

Contents in this project Auto Scale Image Width Height Dimension in React Native Android iOS App Example Tutorial:

1. Open your react native project folder in CMD / Terminal and execute below command to install the react-native-scalable-image library in your project.

Screenshot of CMD :

Screenshot of CMD after executing above command:

2. Import StyleSheet and View component in your project.

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

4. Create a constant named as¬†Scale_Image in render’s block, We are calling image from online URL and only defining the image width as 250. It will automatically calculate the image height as respect of image width.

5. Calling the¬†Scale_Image¬†constant in render’s return block inside the root View component.

6. Creating css style.

7. Complete source code for App.js File :

Screenshot:

Auto Scale Image Width Height Dimension

2 Comments

  1. Hi bro, can you work on timeline react native with localhost Thanks

Leave a Reply

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