How can I propagate touch event in nested Touchable in React Native?
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 aonStartShouldSetResponderCapture
handler which returnstrue
.
You may have a look into this video