When you have a TextInput, ScrollView and Keyboard, how do you make them work together smoothly?
 |
React Native textInput scrollView keyboard |
Issues that I faced:
- Tap once to select
- Tap elsewhere to close keyboard
- Search result scrollable and close keyboard when scrolling
Solutions:
- Set ScrollView's prop keyboardShouldPersistTaps to always so that onPress can be captured by
children components.
- Use TouchableWithoutFeedback component to listen to onPress event and close the Keyboard.
- Don't set height to ScrollView's parent container. If height is set, it is not scrollable when keyboard is up. Use ...StyleSheet.absoluteFillObject instead.
Result:
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<KeyboardAvoidingView style={styles.keyboardView}>
<View style={styles.container}>
<FlatList
keyboardShouldPersistTaps='always'
data={this.props._blogArticles}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
ItemSeparatorComponent={() => <SeparatorComponent/>}
/>
</View>
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
Thank you for reading!
Jun
Comments
Post a Comment