TextInput sometimes doesn't focus when located in a Modal

Question

I open a Modal where there is a TextInput on top. My TextInput component has the autoFocus set to true. I can say my TextInput is focused about 6 times on 10 (open/close Modal). When it's not focused and if I try to tap (even several times) on TextInput, it doesn't want to focus.

I made another test, I set the autoFocus to false. When I open my Modal then I immediately tap the TextInput to get the focus, sometimes I have to tap twice before I get the focus on. So, it's like something didn't finish its loading before I could tap and get the focus. If I do the same test but I wait maybe 2 seconds before I do a first tap, I always get the focus.

So did you know if there is a conflict between Modal / TextInput / Keyboard?

Here is my code, in case:

    return (

        <View style={styles.container}>

          <TouchableOpacity
            style={styles.addressButton}
            onPress={() => {
              this.props.feedList([]);
              this.props.onPressBackButton();
            }}
          >
            <Linearicon name="arrow-left" size={30} color="white" />
          </TouchableOpacity>
          <View
            style={styles.searchBox}
          >
            <Linearicon style={styles.searchIcon} name="magnifier" size={16} color="#999999" />
            <TextInput
              style={[styles.searchBoxText, styles.searchBoxTextInput]}
              placeholder="Recherchez une adresse..."
              autoFocus={false}
              placeholderTextColor='#999999'
              autoCorrect={false}
              onChangeText={(text) => this.onChangeText(text)}
              value={this.state.address}
            />
          </View>
        </View>

      )

Answer 1

I also ran into a similar kind of problem. My TextInput has autoFocus in a modal. The TextInput focus worked, but the keyboard sometimes opened and sometimes it did not open. It appears to be a race condition, where autoFocus assigns focus before the modal is visible. The solution was to use onShow attribute in Modal.

<Modal onShow={() => {this.textInput.focus();}} > 
<TextInput ref={input => {this.textInput = input;}} />
</Modal>