How to acces useRef value Hook? - reactjs

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.