How to Easily Resize an Image with React Native

resize image react native

Images can be applied in different formats and sizes when creating mobile and web applications. If you think about how many application settings that can be, you start to understand how tedious and time-consuming the task of resizing images can be.

In this article, you will learn how to easily resize an image with React Native.

Prerequisites

To understand the concepts in this tutorial, a good knowledge of JavaScript and React is required.

You will also need:

The complete source code can be found here.

“Image

Getting started

First, you need to create a React Native starter project by navigating to the desired directory and running the below command in a terminal:

    npm install -g expo-cli
    expo init react_native_img && cd react_native_img


The command installs the Expo CLI on your machine, creates a React Native project called ‘react_native_img,’ and navigates into the project directory.

PS: The command will also ask to choose a template. Choose blank by pressing the Enter key.

Image sourcing for the gallery

Next, you must download sample images for your gallery by navigating to the URLs below:

Car inside a page

Next navigate to the assets folder, create an images folder, and copy and paste the downloaded images into this folder.

Creating a personalized gallery page

Now you’ll need to modify the App.js file to:

https://gist.github.com/Mr-Malomz/fff5926746b4565ecfb13a510bddeefa target=”_blank”

The snippet above:

Last updated: Nov 22, 2023