useRef to control a component that is inside child component - react-native

Question

I am developing react-native project.
I have created a custom component inside which I use a 3rd party library component. The 3rd party library component needs the useRef hook from my code so that I can control the library component.
import React, {useRef} from 'react';
...
const MyComponent = () => {
const ref = useRef();
return (
<View>
<Button
title="OPEN 3rd party component"
onPress={() => ref.current.open()}
/>
<LibraryComponent
ref={ref}
...
/>
</View>)
}
Now, I have a screen named MyScreen, I need to show MyComponent on MyScreen, and control that library component from MyScreen instead of MyComponent. So, I refactored MyComponent to this (I removed the Button and change ref to be a pass-in property):
const MyComponent = ({ref}) => {
return (
<View>
<LibraryComponent
ref={ref}
...
/>
</View>)
}
Then, in MyScreen :
import React, {useRef} from 'react';
import MyComponent from '../components/MyComponent';
export const MyScreen = () => {
const screenRef = useRef();
...
return (
<View style={styles.container}>
<Button onPress=>{()=>screenRef.current.open()}/>
<MyComponent ref={screenRef}>
...
</View>
)
}
But I get warning message: Function components cannot be give refs. Attempts to access this ref will fail. Did you mean to use React.ForwardRef() ?
My questions is:
How to get rid of that warning & having MyScreen control the library component with reference hook?
======== UPDATE =======
I changed the name of the property in MyComponent from ref to innerRef like #Rishabh Anand suggested. The warning disappeared.
const MyComponent = ({innerRef}) => {
...
}
MyScreen is now:
export const MyScreen = () => {
const screenRef = useRef();
...
return (
<View style={styles.container}>
<Button onPress=>{()=>screenRef.current.open()}/>
<MyComponent innerRef={screenRef}>
...
</View>
)
}
But now a new issue comes, when I click on the Button of MyScreen, app crashed with error undefined is not an object (evaluating screenRef.current.open). It seems the screenRef.current holds a null instead of the library component. Why?

Answer 1

You have to use React.forwardRef
From the docs: https://fr.reactjs.org/docs/forwarding-refs.html
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
const ref = React.createRef();
<FancyButton ref={ref}>Cliquez ici</FancyButton>;
You can after you set a ref, call some function inside your child component like this:
const FancyButton = React.forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
click: () => {
onClick();
},
}));
const onClick = () => {
console.log('Clicked.');
};
return (
<button onClick={onClick} className="FancyButton">
{props.children}
</button>
);
});
const ref = React.createRef();
<FancyButton ref={ref}>Cliquez ici</FancyButton>;
And call from your parent component
ref.current.click()