How to open keyboard automatically in React Native?

Question

I have a screen in my React Native application in which I have few text fields.

I was wondering if there is any way in which on screen load my keyword opens automati

Answer 1

The selected solution did not work for me due to stack navigation (see comment of "SoundStage" on selected solution)

I added a new variable openTheKeyboard to the state initially set to false.

My hacky solution:

componentDidMount() {
  this.setState({ openTheKeyboard: true });
}

componentDidUpdate() {
  if (this.state.openTheKeyboard) {
    this.textInput.focus();
    this.setState({ openTheKeyboard: false });
  }
}

Answer 2

My way (there was a problem with focusing and showing a keyboard on component render)

import { InteractionManager, TextInput } from 'react-native';

...

inputRef = React.createRef();

componentDidMount() {
  this.focusInputWithKeyboard()
}

focusInputWithKeyboard() {
  InteractionManager.runAfterInteractions(() => {
    this.inputRef.current.focus()
  });
}

render() {
  <TextInput ref={this.inputRef} />
}

Answer 3

This seems to be working in my simulator. Have not confirmed on a real device.

constructor(props) {
  super(props);
  this.buildNameTextInput = React.createRef();
}

<TouchableOpacity
  style={styles.mainButton}
  onPress={() => {
    this.buildNameTextInput = true
    this.props.setSaveBuildModal(true)
  }}
>
  <Text style={styles.mainButtonText}> Save Build </Text>
</TouchableOpacity>

<TextInput
  autoFocus={!!this.buildNameTextInput}
  ref={this.buildNameTextInput}
  placeholder="Type a Name"
  autoCapitalize="words"
  style={{...styles.heroBtnText, marginVertical: 50}}
  onChangeText={buildName => this.props.setCurrentBuildName(buildName)}
  value={this.props.buildName}
/>

1. I needed the constructor to register the reference
2. The handler sets a local variable to true
3. autoFocus will trigger the field to be focused. The keyboard sometimes opens up on android simulator (this I cannot explain).
4. ref is for the reference to the DOM element

Answer 4

The keyboard should open automatically when a <TextField /> is focused. You can use the autoFocus prop to make it focus when the element mounts (link)