React Native, I can't tap without closing keyboard

user_8002728 0
Viewed 5920

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?

react-native reactjs keyboard
3 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>
   )
}
user_114511030
Related