Animated.View doesn't respect zIndex

🐛 Bug Report

I am trying to follow a tutorial on building a simple stack swiping app similar to how apps like Tinder works. Basically you stack cards and you swipe the top most one to the left or right. Doing so shifts the deck up so the next card is the new top most card. In our tutorial, this is done by using position absolute on a number of View components and an Animated View component. The order in which they are rendered is so the Animated.View is rendered last. The problem is that, at least when I render it on my Android device, the Animated.View is always on the bottom. I have tried changing the zIndex of the Animated View, but it has no effect. No matter what I do, the Animated.View is always behind all the others.

To Reproduce

Generate an array of Views, the last of which is an Animated.View, and style them so they are all position: absolute. Render on an Android devices.

Expected Behavior

When rendered last, the Animated.View should be rendered on top of all the other Views. Also, when the zIndex is changed to a very high number, the Animated.View should be rendered on top of all other components.

Code Example

Full code can be found at https://github.com/haddow777/swipe

bascially, the code that generates the Views is this

renderCards() {
    if (this.state.index >= this.props.data.length) {
      return this.props.renderNoMoreCards();
    }
    return this.props.data
      .map((item, i) => {
        if (i < this.state.index) return null; //
        if (i === this.state.index) {
          return (
            <Animated.View
              key={item.id}
              {...this.state.panResponder.panHandlers}
              style={[
                this.getCardStyle(),
                styles.cardStyle,
                { zIndex: this.props.data.length + 1000 }
              ]}
            >
              {this.props.renderCard(item)}
            </Animated.View>
          );
        }

        return (
          <View key={item.id} style={styles.cardStyle}>
            {this.props.renderCard(item)}
          </View>
        );
      })
      .reverse();
  }

  render() {
    return <View>{this.renderCards()}</View>;
  }
}

const styles = {
  cardStyle: {
    position: "absolute",
    width: SCREEN_WIDTH
  }
};

Environment

 React Native Environment Info:
    System:
      OS: Windows 10
      CPU: (4) x64 Intel(R) Core(TM) i5-4300U CPU @ 1.90GHz
      Memory: 2.72 GB / 7.91 GB
    Binaries:
      Yarn: 1.13.0 - C:\Users\SURFACE\AppData\Roaming\npm\yarn.CMD
      npm: 6.8.0 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.2.0.0 AI-181.5540.7.32.5056338

Expo CLI 2.11.6 environment info:
   System:
     OS: Windows 10
   Binaries:
     Yarn: 1.13.0 - C:\Users\SURFACE\AppData\Roaming\npm\yarn.CMD
     npm: 6.8.0 - C:\Program Files\nodejs\npm.CMD
   IDEs:
     Android Studio: Version  3.2.0.0 AI-181.5540.7.32.5056338

Android version 8.0.0 on Samsung Galaxy Note 8

[ksegla]

elevation helped in my case. Component is rendered on top but there are still all kinds of weird things. When the Animated View is on top of something clickable, that something takes precedence. Also, anything that was ever below the Animated View can’t be clicked anymore. A mess.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.