How do I compress an image in React?

Question

I would like to know how to compress an image in React Native.

Currently I am using Flatlist to create GRID images, and would like to learn how to do when adding and compressing a photo of EX: 5mb turn 300kb.

constructor(props) {
    super(props);
    this.state = {
        data: [
            { id: '0', image: img },
            { id: '1', image: img2 },
            { id: '2', image: img3 },
            { id: '3', image: img4 },
            { id: '0', image: img },
            { id: '1', image: img2 },
            { id: '2', image: img3 },
            { id: '3', image: img4 },
            { id: '0', image: img },
            { id: '1', image: img2 },
            { id: '2', image: img3 },
            { id: '3', image: img4 },
            { id: '0', image: img },
            { id: '1', image: img2 },
            { id: '2', image: img3 },
            { id: '3', image: img4 },
            { id: '0', image: img },
            { id: '1', image: img2 },
            { id: '2', image: img3 },
            { id: '3', image: img4 }
        ],
    };
}

<FlatList
                        data={this.state.data}
                        numColumns={4}
                        keyExtractor={item => item.id}
                        renderItem={({ item }) => {
                            return (
                                <View style={{ flex: 1, width: 120, height: 100, marginBottom: 15, marginRight: 3 }}>
                                    <SafeAreaView>
                                        <Lightbox
                                            enableZoom
                                            clickOutsideToClose
                                            backgroundColor='transparent'
                                        >
                                            <Image source={item.image} style={styles.images} />
                                        </Lightbox>
                                    </SafeAreaView>
                                </View>
                            );
                        }}
                    />

const img = require('../assets/img/apr2.png');
const img2 = require('../assets/img/apr1.png');
const img3 = require('../assets/img/apr3.png');
const img4 = require('../assets/img/apr1.png');

Answer 1

You can use the React-Native-image-Resizer.

npm install --save react-native-image-resizer
react-native link react-native-image-resizer

Example taken from the documentation:

resize() {
    ImageResizer.createResizedImage(this.state.image.uri, 8, 6, 'JPEG', 80)
      .then(({ uri }) => {
        this.setState({
          resizedImageUri: uri,
        });
      })
      .catch(err => {
        console.log(err);
        return Alert.alert('Unable to resize the photo', 'Check the console for full the error message');
      });
}

Follows method with the order of params:

createResizedImage(path, maxWidth, maxHeight, compressFormat, quality, rotation = 0, outputPath)