React Native StackNavigator Reference Null on Props - react-native

Question

I'm using the #react-navigation/stack to use it on our app.
We have an issue that after we navigate to a Detail Component we need to navigate back to the Main Component, the Detail component have a Reference for a input to make a focus on the mount.
So we have this.
const input = React.createRef();
class Barcode extends React.Component {
componentDidMount() {
if(this.input){
setTimeout(() => {
this.input.current.focus();
}, 400);
}
}
moveUpdate() {
const { barcodeReducerMessageVisible, barcodeReducerMessage, barcodeReducerMessageFinished } = this.props;
if(barcodeReducerMessageFinished) {
this.props.navigation.navigate('Search');
}
}
render() {
return ( <ScrollView keyboardShouldPersistTaps={'handled'}>
<Input
label="Código de barras"
placeholder="Código de barras"
errorStyle={{ color: "red" }}
inputStyle={{ marginTop: 40, marginBottom: 40 }}
onChangeText={textBarcode => this.setState({ textBarcode })}
value={textBarcode}
ref={(ref)=>{this.input = ref}}
onBlur={() => this.Save()}
/> </ScrollView> );
}
}
So moveUpdate navigate to 'Search', on search we have something like this:
ChangeBarCode(stockidRewn = null) {
this.props.navigation.navigate('Barcode', { stockidRewn } ,{ stockidRewn: stockidRewn });
}
<ListItem
leftAvatar={{ source: { uri: searchProductReducerRepos[key].vtiger_productid } }}
key={key}
title={searchProductReducerRepos[key].description}
subtitle={description}
bottomDivider
onPress={() => this.ChangeBarCode(searchProductReducerRepos[key].stockid)}
/>
When I call onPress again to go to Barcode I get:
TypeError: undefined is not an object (_this.input.current.focus)
I don't know if the reference is not declared properly.
Any advice?

Answer 1

You should define the ref inside the component
class Barcode extends React.Component {
// declaring ref inside the component
input = React.createRef();
componentDidMount() {
if (this.input) {
setTimeout(() => {
this.input.current.focus();
}, 400);
}
}
moveUpdate() {
const { barcodeReducerMessageVisible, barcodeReducerMessage, barcodeReducerMessageFinished } = this.props;
if (barcodeReducerMessageFinished) {
this.props.navigation.navigate('Search');
}
}
render() {
return (<ScrollView keyboardShouldPersistTaps={'handled'}>
<Input
label="Código de barras"
placeholder="Código de barras"
errorStyle={{ color: "red" }}
inputStyle={{ marginTop: 40, marginBottom: 40 }}
onChangeText={textBarcode => this.setState({ textBarcode })}
value={textBarcode}
ref={(ref) => { this.input = ref }}
onBlur={() => this.Save()}
/> </ScrollView>);
}
}