ref undefined in React Native - react-native

Question

Can someone help me in figuring out wha is the best way to use setNativeProps in RN?.
In my react function component I did something like this
const AutoComplete = (props) => {
let parentViewRef = null
useEffect(() => {
setTimeout(function(){ console.log(parentViewRef) }, 3000)
},[])
return(
<View
ref={(viewRef) => {
parentViewRef = viewRef
}}
style={styles.modelOpenViewMain}> <View style={styles.modelOpenInputView}>
</View>
</View>
)
}
}
But unfortunately my parentViewRef is coming out to be undefined. Any idea what I could be doing wrong?

Answer 1

If I'm understanding correctly what you're trying to achieve, then you should be using useRef hook.
So your code would look like something like this:
import React, { useRef } from 'react';
const AutoComplete = (props) => {
let parentViewRef = useRef(null);
return(
<View
ref={parentViewRef}
style={styles.modelOpenViewMain}> <View style={styles.modelOpenInputView}>
</View>
</View>
)
}
}
You will then be able to do whatever you want with your ref via its current property, e.g.
parentViewRef.current. ...
Hope this helps!

Answer 2

Try Passing the parentViewRef as an argument to the useEffect method.
const AutoComplete = (props) => {
let parentViewRef = null
useEffect(() => {
console.log(parentViewRef);
}, [parentViewRef]);
return (
<View
ref={(viewRef) => parentViewRef = viewRef}>
<View >
<Text>CONTENT TEXT</Text>
</View>
</View>
)
}