Scaled images in React Native

How to scale images in React Native keeping the proportions and not affecting UX

Sharing is caring!

by German Stuarts

03/19/2018

A year ago we started implementing a new design for Keep a Breast and chose React Native to build the app for both Android and iOS. When we were working with the navigation bar, we had to add icons. All of them had the same height, but their width differed. Since the Image component of React Native forced us to set width and height, we had to set both parameters by hand for every image when one of the two was always fixed. Because of that, we needed to calculate the width automatically.

This issue is not common in web development, where images are scaled automatically. In React Native this kind of functionality doesn’t exist by default. Here’s the explanation.

In order to solve this issue for our application we created react-native-scaled-image. A module that enables us to add images defining only height or width and keeping the aspect ratio.

How the React Native Scaled Image works

This part of the code checks the origin of the image and gets its dimensions using the proper function according to the source of it:

  • If it’s a remote image (it has a URI) the method getSize from the default Image class of React Native is used.

  • If it’s a static image the function resolveAssetSource is used, since Image.getSize doesn’t work with local images.

This part of the code handles the actual dimension calculation. Using the actual size of the image and the values received by parameter, the “other” dimension is calculated, keeping the aspect ratio.

In case both width and height are set, those values are set to the state of the component. If none of them is defined, the size calculated in the previous code is the one used.

This module is brand new and we’re eager for feedback! If you have any comments, go ahead. You can also add new feature proposals using the GitHub issues!

end

Previous Post

03/23/2018

News

Comunidad en NaNLABS – Espacio de Coworking en La Plata

Next Post

03/14/2018

Back-end

Native extensions for NodeJS

Small enough to care,
big enough to get the job done

La Plata, ARGENTINA

Av. 13 #99, Offices 201 & 204

Neuquén, ARGENTINA

Independencia 596, Edificio Fidtech

Paris, FRANCE

24 Cour des Petites Écuries, 75010

© 2021

NAN

LABS. All Rights Reserved.