Here is my phone screen I tried ScrollView with keyboardShouldPersistTaps, but it didn't work. I have a ScrollView for Autocomplete suggestions, and when user can types there, they should also be able to select from suggestions. However, without closing keyboard, it is not possible in my case. Here is my work
<ScrollView scrollEnabled={false} keyboardShouldPersistTaps={true}> <View style={{ maxHeight: 220 }}> <ScrollView style={Style.suggestionContainer} scrollEnabled={true} > {this.state.showOptions.map(this.renderSuggestions)} </ScrollView> </View> </ScrollView> . . . private renderSuggestions(option: MultiInputQuestionOption) { return ( <TouchableOpacity onPress={this.addSelection.bind(this, option)} > <Text style={Style.suggestions}> {option[this.props.titleKey]} </Text> </TouchableOpacity > ) }Is there any possible solution?
23 Answers
You need to pass the key keyboardShouldPersistTaps=‘handled’ on scroll view which contains the TextInput:-
<ScrollView keyboardShouldPersistTaps=‘handled’> ... <TextInput />
</ScrollView>And if you are having issue inside of a modal then You need to pass key keyboardShouldPersistTaps=‘handled’ on All scrollview which are in component stack for the screen. In the ancestors/parent of the Modal also.
Like in my case:
const CountryModal=(props)=>{ return( <Modal visible={props.visible} transparent={false} {...props} > <ScrollView keyboardShouldPersistTaps=‘handled’> … </ScrollView> /> ) }In Parent class: In the parent class where ancestors of modal is there. You need to pass key keyboardShouldPersistTaps=‘handled’`.
class Parent extends Component{ render(){ return( <ScrollView keyboardShouldPersistTaps=‘handled’> // pass ‘handled’ here also … <CountryModal /> // Its the same modal being used as a component in parent class. </ScrollView> )
}Try addingkeyboardShouldPersistTaps={'always'}to the second ScrollView as well.
Use the 'handled' value for keyboardShouldPersistTaps property because the true value is deprecated. use the keyboardShouldPersistTaps in two ScrollViews and handle your keyboard state in somewhere else by using Keyboard.dismiss() function.
