ZIndexExp.js

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Button from 'react-native-button';
import _ from 'lodash';

export default class ZIndexExp extends React.PureComponent {
  state = { topBoxIndex: 2 };

  changeTopBox = () => {
    const { topBoxIndex } = this.state;
    this.setState({ topBoxIndex: (topBoxIndex + 1) % 3 });
  };

  render() {
    const { topBoxIndex } = this.state;

    const boxStyles = [
      styles.boxRed,
      styles.boxGreen,
      styles.boxBlue,
    ];

    return (
      <View style={styles.container}>
        {_.map(boxStyles, (boxStyle, index) => {
          const zIndex = index === topBoxIndex ? 99 : -99;
          return <View key={`box_${index}`} style={[styles.box, boxStyle, { zIndex }]} />;
        })}

        <Button onPress={this.changeTopBox}>{'Change top box'}</Button>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: 'white',
    flex: 1,
    justifyContent: 'center',
  },
  box: {
    height: 100,
    position: 'absolute',
    width: 100,
  },
  boxRed: {
    backgroundColor: 'red',
    left: 75,
    top: 100,
  },
  boxGreen: {
    backgroundColor: 'green',
    left: 125,
    top: 100,
  },
  boxBlue: {
    backgroundColor: 'blue',
    left: 170,
    top: 100,
  },
});