The touchable component cannot receive onpress event when wrapped with Ripple

[viyang]

Hi,
I have tried to replace TouchableWithoutFeedback with Ripple.
But the inside Touchable component will not response to touch event when it wrapped with Ripple.
Here is demo:

<View>
    {/* work as expected */}
    <TouchableWithoutFeedback onPress={() => console.warn('click TouchableWithoutFeedback')}>
      <View>
        <Text>Extra content</Text>
        <TouchableOpacity>
          <Text onPress={() => console.warn('click inner link')}>link1</Text>
        </TouchableOpacity>
      </View>
    </TouchableWithoutFeedback>
    {/* inner link not work */}
    <Ripple onPress={() => console.warn('click Ripple')}>
      <View>
        <Text>Extra content</Text>
        <TouchableOpacity>
          <Text onPress={() => console.warn('click inner link')}>link1</Text>
        </TouchableOpacity>
      </View>
    </Ripple>
  </View>

is there any work around to fix this?

[karunkumark]

you can use onpress props in Ripple. It worked for me :-)

[viyang]

you can use onpress props in Ripple. It worked for me :-)

I need process separately with different handler when press the Ripple box and the link in the box, can you give a demo how to accomplish this? thank you!

[phattran1201]

Hi,
I have tried to replace TouchableWithoutFeedback with Ripple.
But the inside Touchable component will not response to touch event when it wrapped with Ripple.
Here is demo:

<View>
    {/* work as expected */}
    <TouchableWithoutFeedback onPress={() => console.warn('click TouchableWithoutFeedback')}>
      <View>
        <Text>Extra content</Text>
        <TouchableOpacity>
          <Text onPress={() => console.warn('click inner link')}>link1</Text>
        </TouchableOpacity>
      </View>
    </TouchableWithoutFeedback>
    {/* inner link not work */}
    <Ripple onPress={() => console.warn('click Ripple')}>
      <View>
        <Text>Extra content</Text>
        <TouchableOpacity>
          <Text onPress={() => console.warn('click inner link')}>link1</Text>
        </TouchableOpacity>
      </View>
    </Ripple>
  </View>

is there any work around to fix this?

You can try....
<TouchableOpacity onPress={() => console.warn('click Ripple')}>

Extra content
< Ripple>
<Text onPress={() => console.warn('click inner link')}>link1

---TouchableWithoutFeedback supports only one child. If you wish to have several child components, wrap them in a View. Importantly, TouchableWithoutFeedback works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.

[pragneshpj]

anyone found the solution?

[tristanmb]

I created a gist that fixes this.

Apply the patch in gist and set pointerEvents="box-none" in the Ripple element. This causes the ripple to behave weird sometimes, but the comment explains how to fix it