how to input get focus every time in react navigation - react-native

Question

I use react navigation TabNavigator and I want every time user goes to second tab, one TextInput in screen get focus and keyboard gets popup

Answer 1

You can use refs and react navigation lifecycle for this:
constructor(props) {
super(props);
this.input = React.createRef();
this.didFocusDSubscription = this.props.navigation.addListener(
'didFocus',
payload => {
this.input.current.focus();
}
);
}
render() {
return <TextInput ref={this.input} />;
}

Answer 2

this might help you
this.viewDidAppearListener = this.props.navigation.addListener('didFocus', (payload) => this._viewDidAppear(payload));
didFocus event will be triggered every time the view is showed (like viewDidAppear in iOS) so you can then do focus() on your textinput manually.

Answer 3

Simplest is to add "autoFocus" to your textInput
Like this:
<TextInput
placeholder="Type any activity name"
placeholderTextColor="lightgray"
...
ref="textInput"
autoFocus />

Answer 4

For react-navigation#3.X.X use navigation.addListener and .focus():
class AutoFocusedTextInput extends React.Component {
state = {
text: '',
}
componentDidMount() {
this.props.navigation.addListener('didFocus', payload => {this.textInput.focus()})
}
componentWillUnmount() {
didFocusSubscription.remove();
}
render() {
return (
<View>
<TextInput
ref={(component) => this.textInput = component}
autoFocus={true}
placeholder="Start typing"
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
</View>
)
}
}
The reference:
https://reactnavigation.org/docs/3.x/navigation-prop#addlistener---subscribe-to-updates-to-navigation-lifecycle