Image optimization in React Native

Introduction

Images can make apps slow if they are too big. Optimizing images helps apps load faster and use less data.

When your app shows many pictures and you want it to stay fast.

When users have slow internet and you want images to load quickly.

When you want to save space on the user's device.

When you want to reduce app size before publishing.

When you want to improve battery life by using less data.

Syntax

React Native

import { Image } from 'react-native';

<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 100, height: 100 }}
  resizeMode="contain"
  loadingIndicatorSource={require('./loading.png')}
/>

source sets the image location.

resizeMode controls how the image fits inside the space.

Examples

This loads an image from the web and fills the space, cropping if needed.

React Native

import { Image } from 'react-native';

<Image
  source={{ uri: 'https://example.com/photo.png' }}
  style={{ width: 200, height: 200 }}
  resizeMode="cover"
/>

This loads a local image and fits it inside the box without cropping.

React Native

import { Image } from 'react-native';

<Image
  source={require('./local-image.jpg')}
  style={{ width: 150, height: 150 }}
  resizeMode="contain"
/>

This shows the image centered without resizing it.

React Native

import { Image } from 'react-native';

<Image
  source={{ uri: 'https://example.com/image.webp' }}
  style={{ width: 100, height: 100 }}
  resizeMode="center"
/>

Sample App

This app shows a small React Native logo optimized to fit nicely inside a 100x100 box without distortion.

React Native

import React from 'react';
import { View, Image, StyleSheet, Text } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Optimized Image Example</Text>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.image}
        resizeMode="contain"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 18,
    marginBottom: 20
  },
  image: {
    width: 100,
    height: 100
  }
});

Important Notes

Use resizeMode to control how images fit their space: contain keeps the whole image visible, cover fills the space but may crop.

Use smaller image files or modern formats like WebP to reduce size and load time.

Always set explicit width and height to help the app layout images efficiently.

Summary

Optimizing images helps your app run faster and use less data.

Use resizeMode and proper image sizes to control how images appear.

Choose the right image format and size before adding images to your app.