How to resize downloaded images for mobile

Downloading and presenting an image is a common task in the mobile world. Let’s take the scenario of adding a user profile screen to an app. By design, the user’s image should be presented in dimensions of 100 x 100 (remember that all dimensions in React Native are abstract units, and represent density-independent pixels). Assuming our backend supports fetching an image in any size we want, what should be the size we should ask for?

My cat profile image

React Native comes to our help with the utility class: PixelRatio, and its helper method: getPixelSizeForLayoutSize(layoutSize: number): number . This method takes the unitless layout size and returns the pixel layout size, based on the current screen’s pixel density (in fact, this method does a very simple calculation: it multiplies the layout size by the Scale of the device).

const USER_IMAGE_LAYOUT_SIZE = 100;
...
const imageId = "someImageId";
const userImagePixelSize = PixelRatio.getPixelSizeForLayoutSize(USER_IMAGE_LAYOUT_SIZE);
const userImageUrl = `https://awesomeApp.com/getUserImage/id:${imageId}?width=${userImagePixelSize}&height=${userImagePixelSize}`;
<Image source={userImageUrl} style={styles.userImage} />;
...
const styles = StyleSheet.create({
  userImage: {
    width: USER_IMAGE_LAYOUT_SIZE,
    height: USER_IMAGE_LAYOUT_SIZE
  }
})
// example based on the PixelRatio docs

This should look familiar, since this is the same method for working with local images. When we add a local image to the app bundle, we usually add it with three scales: 1x, 2x and 3x. Then, based on the device’s scale, the appropriate asset will be used.

…