FlatList - First touch doesn't work with focused TextInput

[inevermore]

I have a <TextInput/> and a <FlatList/>, when I type something into <TextInput/> and then touch one item of FlatList. THE RESULT is the first does not work, the second works. I don't know why.

          <TextInput
              placeholder='test'
              value={this.state.inputText}
              onChangeText={(inputText) => this.setState({inputText})}
              style={{marginBottom: 20, fontSize: 17, width: 300, textAlign: 'center'}}
          />
          <FlatList
              data={[{key: 'item 1'}, {key: 'item 2'}]}
              renderItem={({item}) =>
                  <TouchableHighlight onPress={() => console.log('item press')}
                                      underlayColor='#dddddd'>
                      <View style={{height: 40}}>
                          <Text style={{fontSize: 16, textAlign: 'center'}}>{item.key}</Text>
                      </View>
                  </TouchableHighlight>
             }
          />

React Native version: 0.46.1 / 0.47

[inevermore]

just found a solution, THX

[TrinityHC]

@inevermore How did you fix the problem? I have the same issue. Thanks

[inevermore]

@hchen1202 I add keyboardShouldPersistTaps={'handled'} prop to <FlatList/> and in its renderItem hide the keyboard by Keyboard.dismiss(). The code will be like this:

<FlatList 
    ...
    keyboardShouldPersistTaps={'handled'}
    renderItem={
        .....
        <TouchableHighlight 
            onPress={() => {
                ...
                Keyboard.dismiss();
                }}
        </TouchableHighlight>
/>