Render error for map.reverse() in swipe project

[maidh91]

Hello,

In the swipe project, Deck.js render cards using map() and reverse() on the data.

Everything works fine in iOS simulator and real devices. However, in Android simulator and devices, the Card #1 is rendered behind the Card #2 for some reasons that I cannot figure out.

[krean93]

@maidh91 Did you manage to find the solution for this? I am running into the exact same problem.

[elhe26]

@maidh91 Did you find the solution?

[saglamcem]

If you are following the course on Udemy, you should be able to find several solutions to this in the Q&A section. If not, I'll try to share a solution in a couple of hours.

[krean93]

@cemsterr Please do so, it would be useful.

[saglamcem]

@krean93 Sorry for the late reply.

It seems that having the zIndex properties set up as such in the AnimatedViews fixed the issue for me:

      (...)
      if (i === this.state.index) {
        return (
          <Animated.View
            key={item.id}
            style={[this.getCardStyle(), styles.cardStyle, { zIndex: 99 }]}
            {...this.state.panResponder.panHandlers}
          >
            {this.props.renderCard(item)}
          </Animated.View>
        );
      }

      return (
        <Animated.View
          key={item.id}
          style={[styles.cardStyle, { top: 10 * (i - this.state.index), zIndex: 5 }]}
        >
          {this.props.renderCard(item)}
        </Animated.View>
);

However, if this doesn't work for you, a follower of the course named John Caraballo has shared his solution as follows. The comments suggest that this works fine.

So as noted the reverse() solution only works for iOS devices and not android devices. The solution is to set zIndex now to get this done quick just flip the index to it's negative value so that the higher the actual index is, in it's negative counterpart the "lower" on the screen it will be rendered, so behind other cards. I.E -1 is above -2 is above -3 and so forth. TLDR: zIndex: i * -1

Hope this helped.

[nrogap]

I very very recommend @cemsterr 's solution.