How to optimise an Image in React Native

You could use expo-image-manipulator:

import { manipulateAsync, SaveFormat } from 'expo-image-manipulator';    

const compressImage = async (uri, format = SaveFormat.JPEG) => { // SaveFormat.PNG
    const result = await manipulateAsync(
        uri,
        [{ resize: { width: 1200 } }],
        { compress: 0.7, format }
    );

    return  { name: `${Date.now()}.${format}`, type: `image/${format}`, ...result };
    // return: { name, type, width, height, uri }
};

If you are using react-native-image-picker for uploading images, you can set maxWidth, maxHeight or quality of image for reducing the size.

 const options = {
                    title: 'Select Picture',
                    storageOptions: {
                        skipBackup: true,
                        path: 'images',

                    },
                    maxWidth: 500,
                    maxHeight: 500,
                    quality: 0.5
                };
ImagePicker.showImagePicker(options, resolve, reject);

https://github.com/bamlab/react-native-image-resizer provides an API to resize local images.

It allows you to specify:

• Max dimensions (whilst preserving aspect ratio) and;
• Output quality (for JPEG only)

API

import ImageResizer from 'react-native-image-resizer';

ImageResizer.createResizedImage(imageUri, newWidth, newHeight, compressFormat, quality).then((resizedImageUri) => {
  // resizeImageUri is the URI of the new image that can now be displayed, uploaded...
}).catch((err) => {
  // Oops, something went wrong. Check that the filename is correct and
  // inspect err to get more details.
});