CODEWITHSUNDEEP
react-nativereact-native-flatlist
Ager
Ager

Reputation: 183

When textInput focused, first touch on flatList doesn't work, however the second works

When I type something into TextInput, then I touch one of FlatList items first time. It should console.log('item press'), but it not. Only the second touch It consoles. Does someone know the reason?

This is my code.

<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>
    }
/>

Upvotes: 17

Views: 8997

Answers (1)

Vahid Boreiri
Vahid Boreiri

Reputation: 3438

You should use the FlatList with keyboardShouldPersistTaps={'handled'} prop and handle your keyboard close in another function by Keyboard.Dissmiss(). your FlatList will be like this: 

       <FlatList
          keyboardShouldPersistTaps={'handled'}
          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>
          }
        />

You can use the Keyboard.dismiss() function in the onPress prop after in the console.log('item press') command in TouchableHighlight component.

Upvotes: 31

Related Questions