How can I propagate touch event in nested Touchable in React Native?

Question

In my app I have a nested Touchable element. Every time I press on one of them, I got only one event. Can I propagate the inner downward the layer? Thanks in advance!

Code as follow:

    <TouchableHighlight style={{ flex: 1 }} onPress={() => { console.log('outer press') }}>
        <TouchableHighlight style={{ flex: 0.8, backgroundColor: 'blue' }} onPress={() => { console.log('inner press') }}>
            <Text>1</Text>
        </TouchableHighlight>
    </TouchableHighlight>

Answer 1

A Touchables contains one local state, that is native to it and the other Touchables are not aware of it.

So when you touch a nested Touchable, the event gets propogated to the child element that access the state and does not release the resource unless it is complete

Here would be the life cycle in your case for the nested buttons, as mentioned in the docs

Parent: Parent Touchable
Child: Child Touchable

Parent onStartShouldSetResponder > Parent onResponderGrant > Parent onResponderTerminationRequest > Parent onResponderTerminate > Child onStartShouldSetResponder > Child onResponderGrant > Child onResponderRelease

Parent will not get access due to onResponderReject

If a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

You may have a look into this video