React Native, I can't tap without closing keyboard

Question

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?

Tamer

why do you have two scrollview components? try it with just one – Malaco

Any luck with this bug? – Stadler

Answer 1

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

Furtek

Thank you so much, beat my head over this for the last day but you're the only one with the most thorough explanation of how to handle it in a modal. – Nonconductor

Answer 2

Try adding keyboardShouldPersistTaps={'always'} to the second ScrollView as well.

Tourism

Can you upload a screen shot so i take a better look at what you are trying to acheive? – Tourism

I edited my question and added the screenshot there. I have a autocomplete component. In my core screen, there is a button on the top. If you press that button, a Modal opens and you see that screen. In modal, you can write in the TextInput component. After some typing, you can see and choose a suggestion below the Text Input. I want to choose suggestion without dismissing keyboard. Keyboard should stay there when I tap TouchableOpacitied text. – Tamer

hmmm why do u have a scroll view if the scrollEnable is false? – Tourism

Did u try to replace the outer ScrollView with a regular view? – Tourism

try pushing ur code to a repository so i can help u out. – Tourism

don't set this to true anymore. set it to "always" – Aiaia

Answer 3

In My case I have Scrollview inside Flatlist so I have to add

keyboardShouldPersistTaps={'handled'} In Flatlist.

<FlatList
       horizontal
       scrollEnabled={false} 
       keyboardShouldPersistTaps="handled">
               <ScrollView
                      keyboardShouldPersistTaps="handled">
               </ScrollView>    
 </FlatList>
              
              

And Now it is working fine.

Taro

Answer 4

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.

Ichthyornis

Answer 5

That I was use but output is not come out for once I click the page not move then I will click for two at time it's was open

Montano

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Marmara