TouchableWithoutFeedback disables pressing component inside

by

I’m using https://github.com/JoeRoddy/react-native-tag-autocomplete and ran in to the issue where I have it inside TouchableWithoutFeedback component with onPress={Keyboard.dismiss}. The issue is that the tags are no longer touchable when wrapped inside TouchableWithoutFeedback.

<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}> 
    <View>
         <AutoTags />
    </View>
</TouchableWithoutFeedback>

Now I don’t know if I should just wrap every other component on my view with TouchableWithoutFeedback and let Autotags be as it doesn’t seem as a good solution.

1 thought on “TouchableWithoutFeedback disables pressing component inside”

  1. You’ll need to split it up so they aren’t nested – maybe something like this would help..

       <View style={{flex: 1}}>
      <View>
         <AutoTags />
      </View>
      <View style={{position: 'absolute', top: 0, right: 0, bottom: 0, left: 0}}>
        <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}> 
          <View style={{width: '100%', height: '100%'}} />
        </TouchableWithoutFeedback>
      </View>
   </View>

    I haven’t tested it out so the styles might be a bit off, but it should give you an idea on how it can be fixed..
    Let me know if it works for you.

    Reply

Leave a Comment