TouchableOpacity inside of TapGestureHandler

I have many <TouchableOpacity /> components inside of one big container component that has a TapGestureHandler on it. For example:

import { TouchableOpacity } from 'react-native-gesture-handler'
public render() {
        return (
            <TapGestureHandler
                onHandlerStateChange={this._onSingleTap}
            >
                 <TouchableOpacity />
                 <TouchableOpacity />
            </TapGestureHandler>
        )
    }

The above example is a very basic one. In reality, my view is very complex and has many different TouchableOpacitys in addition to many TextInputs spanning across many wrapper components.

Currently, when tapping on one of the TouchableOpacitys, only TapGestureRecognizer.onHandlerStateChange is called. The exact opposite should happen, TouchableOpacity.onPress should get called and TapGestureRecognizer.onHandlerStateChange should NOT get called.

This is a very big issue for me, I would appreciate any help I can get! Has this been fixed in the upgrade branch?

Zach

[sa8ab]

Try putting each TouchableOpacity inside a TapGestureHandler

            <TapGestureHandler
                onHandlerStateChange={this._onSingleTap}
            >
                //.....
                  <TapGestureHandler>
                        <TouchableOpacity />
                  <TapGestureHandler/>
                  <TapGestureHandler>
                        <TouchableOpacity />
                  <TapGestureHandler/>
                //.....
            </TapGestureHandler>

[vldslvmgy]

is there any updates on this issue, facing the exact same one right now