Touchables not working on CardB of Card Stack (Calls CardA's Touchables instead)

[nevaehph]

React Native Version

0.57.1

Description

If any Touchable is included into a Card and stacked on top of one another, Every 2nd Card's Touchable will not work, but instead calls the Touchable of the Card below it.

E.g.

Top
______ <-- Card A
______ <-- Card B
______ <-- Card C

In this scenario, each card (A, B, C) has the same Touchable. At this point pressing the Touchable on the top will trigger onPress() from Card A. Upon removing Card A from the Stack....

Top
______ <-- Card B
______ <-- Card C

Pressing the Touchable on the top at this point will trigger onPress() from Card C, even though the expected behavior is to trigger onPress() from Card B.

Problem

Relevant Issue: facebook/react-native#1076 (comment)

The behavior occurs due to positioning of CardA and CardB in CardStack.js. Whichever card being placed below the other in the code will determine the which card's the Touchable is clickable.

In the current code, CardA will be rendered below CardB, allowing CardA's Touchable to be on the top, as shown below:

Top
______ <-- CardA
______ <-- CardB

Once a card is removed, CardB will be rendered on top whereas the next card will be rendered as the new CardA and be placed below CardB according to the zIndex:

Top
______ <-- CardB
______ <-- CardA <-- Touchables take precedence

But since the code still renders CardA below CardB, CardA's Touchables will still take precedence over CardB's Touchables, irregardless of the zIndex value of both cards,

Proposed Solution

Render CardA and CardB sequentially based on the topCard variable in render(). In doing so ensures that each Touchable at the top of the stack can be interacted with.

[eraydemirok]

The problem is completely solved in here.