react-native: Property keyboardShouldPersistTaps={true} not working in view

Issue Description

Given a <TextInput /> in a <Modal />, and the TextInput being active (keyboard is shown), I can’t get any Touchable… element to respond to onPress before dismissing the keyboard.

Steps to Reproduce / Code Snippets

See the example code below. I would expect the TouchableOpacity (a yellow square) to popup an Alert while the TextInput is active and the keyboard is shown. Instead, I have to tap to dismiss the keyboard first.

The property keyboardShouldPersistTaps={true} does the trick in another view, but not inside of a <Modal />

<Modal
  animationType={"slide"}
  transparent={false}
  visible={this.props.visible} >
  <ScrollView
    keyboardDismissMode="on-drag"
    keyboardShouldPersistTaps={true} >
    <TouchableOpacity onPress={() => alert(1)} style={{ backgroundColor: 'yellow', width: 200, height: 200, }} />
    <TextInput style={{
      height: 40,
      backgroundColor: 'red',
    }} />
  </ScrollView>
</Modal>

Additional Information

React Native version: 0.34
Platform(s): iOS
Operating System: macOS

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 24
Comments: 21 (2 by maintainers)

Most upvoted comments

what fixed it for me is to make sure that all nested scrollviews have this property set.

e.g:

<ScrollView><ScrollView keyboardShouldPersistTaps></ScrollView></ScrollView>

This won’t work because the parent ScrollView does not have this property set.

+19

despreston on May 26, 2017

the fix for me was that I had to set keyboardShouldPersistTaps on ALL scrollview ancestors of my Modal… otherwise, if any ScrollView in your parent tree do the default keyboardShouldPersistTaps=“none”, the keyboard will be dismissed (in my case I want to prevent a dismiss).

anyway, whatever what you want to solve (dismiss/not dismiss/respond to onPress) – you will have to be aware that the <Modal> cares about its (scrollview) parent stack, I assumed it would be like if rendered on top level, but no. rendering your modal component from root OR within a complex stack of scrollview, have different behavior. I think that’s a valid concern for Modal to fix that, at least if not, it should be documented.

+12

gre on May 29, 2017

I know this is closed. However, I just struggled with this for a few hours as well. Thanks to the comments read here; I found a solution that worked in my situation. I didn’t even know that Flatlist would accept the keyboardShouldPersistTaps=‘always’ parameter. I ended up having no extra ScrollViews, simply adding that parameter to Flatlist worked out great.

  <FlatList
    keyboardShouldPersistTaps='always'
    data={this.props.itemList}
    extraData={this.props}
    renderItem={this.renderCardItem}
    ItemSeparatorComponent={this.itemSeparator}
  />

Cheers Using RN .51 BTW

+10

profiVideos on Feb 5, 2018

putting the scrollview on the outside of my Modal did not solve issue for me.

dxiao on Mar 8, 2017

In my case, I have a ScrollView as the parent of Modal. Setting keyboardShouldPersistTaps on that ScrollView fix the issue inside Modal.

ptgamr on Feb 23, 2017

@despreston & @gre that solved it for me.

Once my both my parent and child FlatList had the keyboardShouldPersistTaps prop set it worked a treat

marktrobinson on Jun 7, 2017

The only solution I could find is having keyboardShouldPersistTaps on all ScrollViews in the component stack for the screen.

Credits: @despreston, @gre

ghoshabhi on Jul 18, 2018

I lost 2 hours because of this bug.

razvan-tudosa on Feb 1, 2017