This.refs for functional components (useRef, createRef) | React native - reactjs

Question

I have used this.refs on a class component and now I am refactoring it to be a functional component. I am using the ViewShot lib: https://github.com/gre/react-native-view-shot
In the previous implementation it was used like the following:
You have a QR image in your app and you want to send the image on social media so you wrap it in ViewShot:
<ViewShot ref="viewShot">
<QRImage
address={....}
image={...}
/>
</ViewShot>
Then when you click on the share image it does the following:
onQRImagePress = async (address: string) => {
const viewShotRef: any = this.refs.viewShot;
try {
const uri = await viewShotRef.capture();
const options: Options = {
url: "file://" + uri,
title: `address: ${address}`,
};
await Share.open(options);
}
catch (e) {
console.log(`Could not screenshot the QR or share it due to: ${e}`);
}
};
So we use the ref using the this.refs of the class.
I want to do it for a functional component. preferably using hooks.
I know that userRef exists but it didn't work for me. I also tried using createRef but wasn't sure how to implement it correctly.

Answer 1

for functional component you can use below hook
React alredy providing useRef hook so you can use it
import React, { useRef } from 'react';
import ViewShot from "react-native-view-shot";
const Mycomponent = () =>{
const viewShotRef = useRef();
// Access viewShotref
console.log(viewShotRef && viewShotRef.current)
return (
<View>
<ViewShot ref={viewShotRef} > {...children} </ViewShot>
</View>
)
}

Answer 2

import React, { useRef } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import ViewShot from "react-native-view-shot";
class imageComponent = () => {
const viewShotRef = useRef();
const onSave = () => {
viewShotRef.current.capture().then(uri => {
console.log("do something with ", uri);
});
}
return (<>
<ViewShot ref={viewShotRef} options={{ format: "jpg", quality: 0.9 }}>
<Text>...Something to rasterize...</Text>
</ViewShot>
<TouchableOpacity onPress{onSave}>....</TouchableOpacity>
</>);
}