Menu
I'm using React Native with the Native Base library. I need an onPress event to fire on Native Base' ListItem (equivalent to TouchableOpacity) when the keyboard is open.
I now have to click once to close the keyboard and then I can press the ListItem.
Content tag below is equivalent to ScrollableView:
<Content keyboardShouldPersistTaps='always' keyboardDismissMode='on-drag'> <List> <ListItem style={styles.inspectionsItemDivider} itemDivider> <TextInput autoFocus={true} ref={(input) => { this.titleSearch = input }} placeholder='Start typing...' multiline={true} onChangeText={this.setSearchText.bind(this)} value={this.getSearchValue()}/> </ListItem> <View style={styles.searchContainer}> <Text style={styles.recentText}>Recommended Descriptions</Text> <List dataArray={this.state.searchedDescriptions} renderRow={(description) => <ListItem button onPress={() => this.setInformationDescription(description)}> <Text>{description}</Text> </ListItem> </List> </View> </List> </Content> 
379
To bind onPress with an argument in React Native, we can create a function that returns the onPress handler function. to add a Button with the onPress prop set to the function that we get after we call onPress with 'hello' .
To handle double click events in React:Use the detail property on the event object to get the click count. If the click count is equal to 2, handle the double click event.
Furthermore you can just add a custom code for implementing doubleclick in react native touchables. What you can do is to just save the count on click and clear the click counter after some seconds then trigger a funtion on onPress when it is clicked twice.
I actually just figured this out. I added the keyboardShouldPersistTaps='always' prop to my List, in addition to the Content tag:
<Content keyboardShouldPersistTaps='always' keyboardDismissMode='on-drag'> <List> <ListItem style={styles.inspectionsItemDivider} itemDivider> <TextInput autoFocus={true} ref={(input) => { this.titleSearch = input }} placeholder='Start typing...' multiline={true} onChangeText={this.setSearchText.bind(this)} value={this.getSearchValue()}/> </ListItem> <View style={styles.searchContainer}> <Text style={styles.recentText}>Recommended Descriptions</Text> <List keyboardShouldPersistTaps='always' dataArray={this.state.searchedDescriptions} renderRow={(description) => <ListItem button onPress={() => this.setInformationDescription(description)}> <Text>{description}</Text> </ListItem> </List> </View> </List> </Content> For new googlers, in my case, I had a flatlist with an onPress property, and a searchBar. I wanted to press the row even when the keyboard is up, and I could do it only by double tap.Finally the problem was tackled by using "keyboardShouldPersistTaps" of the flatlist:
Hide_Soft_Keyboard=()=>{ Keyboard.dismiss(); } .... <List> <FlatList keyboardShouldPersistTaps = "always" ... renderItem={({item}) => ( <ListItem ... ... onPress={() =>{this.Hide_Soft_Keyboard(); this.props.navigation.navigate('Screen2')}} /> ) } /> </List> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
