How to scale image in React-native

Hi guys, In this article, we are going to learn about How to scale image in React-native i.e. increase or decrease image component without changing image original dimensions, while developer some times we add height and width to image components and then after we want to change the size of the image but some times image dimension will disturb so the best way to change image size is to use transform and set the scale to change the image size, so let’s start with an example

1. Create a new project

I have already created a project, so I am using the same project

2. Import the following components

3. Define default image size

Define default image size in state variable inside constructor like below

4. Add image component to display Image

Inside return method add image component which we will be going to scale on button click as given below

Set scale to image using a transform in the stylesheet to scale image size like

then add two buttons one for increasing the image size and another for the decreasing size

As you saw in above buttons onPress we reset imageSize in the state

let’s see full source code for screen

5. How to scale image in React-native

6. Output

Scale image without changing dimension React-native

Thank you 🙂

Leave a Reply

Your email address will not be published.