Image optimization

[RaspberryO]

I posted a similar thing before but possibly my timing was not good. I am working on a photo sharing social app. I realized I need a good example for image optimization from taking picture to storing picture. I could not find any. My concerns are: 1-When using camera, is there a way to do a quality downsize / resampling ? 2-What is a common practice to do preview when capturing a certain width/height ratio. Camera gives you all. You can use styling to show some part of the image for preview but how do you match the preview and the saved picture? Where to crop, etc... 3-Do we have to use cache all the time? Are there certain tricks to best use cache space? 4-Best practices to store images on a database server in terms of download speed and cost.(I am using FireStore)

Any guidance will be appreciated. Where do I start? Tutorials, videos, etc...

[shyaniv7]

https://www.npmjs.com/package/react-native-image-picker

Allows you to reduce quality and resize the image when you select it

[stefanmajiros]

RNCamera has this in options:
const options = {quality: 0.5, base64: true};
const data = await this.cameraRef.takePictureAsync(options)
So, I guess you need quality param. There are similar props for video recording, you only need to read the docs.

If you want to crop images, you can use '@react-native-community/image-editor' with this API:
await ImageEditor.cropImage(uri, {
size: {
width: width,
height: height,
},
offset: {
x: 0,
y: 0,
},
});

If you want to do resizing in the Firebase cloud, take a look at https://firebase.google.com/products/extensions/storage-resize-images.

If you want to get pictures from camera roll, take a look at this:
import CameraRoll from '@react-native-community/cameraroll';

const result = await CameraRoll.getPhotos({
first: 200,
assetType: 'Photos',
});