Nested buttons press event

[flahtorres]

I have a custom component that have to buttons using Ripple, a button act like a container and another to only icon. Both the container and icon have distincts press events, but when I a click in the icon, only the container is trigerted and a the icon press event is never called.

Here is the code

<Ripple onPress={event1}>
    <View>
        <Text>Primary click handler</Text>
        {/* antoher view elemets */}

        <Ripple onPress={event2}>
            <View>
                <Icon />
            </View>
        </Ripple>
    </View>
</Ripple>

When I click in the text, the "event1" is called and I see the ripple in all container. When I click in the Icon, the"event1" is called too and I see the ripple in all container instead of only in Icon The "event2" is never called and I never see their ripple

This doesn't happened when I tried to render with react-native TouchableOppacity instead of Ripple

Obs: the Icon element is a implementation of react-native-vector-icons, I tried change the icon to a text and I have the same issue

React-Native: 0.68.2 React-Native-Material-Ripple: 0.9.1 I am testing on Android Studio emulator

[rivaslive]

Set view with xIndex: -1 or 0. This happens because the view is above the element, the zIndex could make it position below, or you can use Ripple as an absolute that takes 100% of the height and width, I think you could try both approaches, good luck!

[badaz]

I'm facing same problem: react-native 0.70.4. I updated from 0.67 where problem did not exist. Unfortunately, this lib does not seem to be maintained anymore, last commit is from 2019.

[MaiconGilton]

I fixed by removing pointerEvents='box-only' in Animated.View https://github.com/n4kz/react-native-material-ripple/blob/39ea61e8345feaa8086899f1a2e90ef31ce422bf/index.js#L267.