How to acces useRef value Hook?

Question

I am trying to implement a react native image crop view and I am using : https://github.com/hhunaid/react-native-image-crop-tools#readme

After a bit of fixing it works and apparenty there is automatically an output generated:

https://ibb.co/SBLvFGY

My question is, how can I get the value of the useRef Hook, since I want to store it in redux, it all is immensly confusing to me, the code :

import React, { useState, useRef } from 'react';
import { Button, StatusBar, StyleSheet, View, Image } from 'react-native';
import { CropView } from 'react-native-image-crop-tools';
import ImagePicker from 'react-native-image-picker';

import { connect } from 'react-redux';
import { changeNewIdeaImage } from '../../redux/actions/';

const TestImageCropper = () => {
    const [uri, setUri] = useState();
    const cropViewRef = useRef();
    return (
        <>
            <StatusBar barStyle="dark-content" />
            <View style={styles.container}>
                <Button
                    title={'Pick Image'}
                    onPress={() => {
                        ImagePicker.launchImageLibrary(
                            { noData: true },
                            (response) => {
                                setUri(response.uri);
                            }
                        );
                    }}
                />
                {uri !== undefined && (
                    <CropView
                        sourceUrl={uri}
                        style={styles.cropView}
                        ref={cropViewRef}
                        onImageCrop={(res) => console.warn(res)}
                        keepAspectRatio
                        aspectRatio={{ width: 4, height: 4 }}
                    />
                )}
                <Button
                    title={'Get Cropped View'}
                    onPress={() => {
                        cropViewRef.current.saveImage(true, 90);

                    }}
                />
            </View>
        </>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    cropView: {
        flex: 1,
        backgroundColor: 'red',
    },
});

const mapStatetoProps = (state: any) => {};

export default TestImageCropper;

Now this is the most confusing part to me.Where does the saveImage view function even come from and how can I hook it up, so that I can save the Image uri in Redux, to display it?

 <Button
    title={'Get Cropped View'}
                    onPress={() => {
                        cropViewRef.current.saveImage(true, 90);

                    }}
                />

Thanks in advance!

Answer 1

The saveImage() seems like a method coming from CropView. Ref is simply storing - in your case - the rendered CropView element, so cropViewRef.current is basically the CropView in your TestImageCropper component, and you call it's built-in method with cropViewRef.current.saveImage(true, 90);

What not clear to me, is what is it that you want to store in redux? The value of the ref is the element itself.