TouchableWithoutFeedback disables pressing component inside

user_10603283 0
Viewed 64

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.

react-native javascript
1 Answers

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.

user_121637010
Related