React Native zIndex Example

React Native zIndex Example

import React, {Component} from 'react';
import {StyleSheet, Text, View, Dimensions } from 'react-native';

export default class App extends Component {
	render() {
		return (
			<View style={styles.wrapper}>
				<View style={styles.back}>
					<View style={{ backgroundColor: "#2156E9", flex: 1}}></View>
					<View style={{ backgroundColor: "#fff", flex: 2}}></View>
				</View>
				<View style={styles.front}>
					<View style={{ marginBottom: 50 }}>
						<Text style={{ color: "#B6B6CA", fontSize: 26 }}>Today is sunshine.</Text>
						<Text style={{ color: "#fff", fontSize: 28 }}>Good Morning, Bobby!</Text>
					</View>
					<View style={styles.box}>
						<View style={styles.boxItem}>
							<View style={{ marginRight: 20 }}>
								<Text>ICON</Text>
							</View>
							<Text style={{ fontWeight: "bold", color: "#242424" }}>Balance </Text>
							<Text style={{ color: "#AAAFCD" }}>in your portfolio</Text>
						</View>
						<View style={styles.divider} />
						<View style={styles.boxItem}>
							<View style={{ marginRight: 20 }}>
								<Text>ICON</Text>
							</View>
							<Text style={{ fontWeight: "bold", color: "#242424" }}>Latest </Text>
							<Text style={{ color: "#AAAFCD" }}>transactions</Text>
						</View>
					</View>
					<View style={styles.box}>
						<View style={styles.boxItem}>
							<View style={{ marginRight: 20 }}>
								<Text>ICON</Text>
							</View>
							<Text style={{ fontWeight: "bold", color: "#242424" }}>Balance </Text>
							<Text style={{ color: "#AAAFCD" }}>in your portfolio</Text>
						</View>
						<View style={styles.divider} />
						<View style={styles.boxItem}>
							<View style={{ marginRight: 20 }}>
								<Text>ICON</Text>
							</View>
							<Text style={{ fontWeight: "bold", color: "#242424" }}>Latest </Text>
							<Text style={{ color: "#AAAFCD" }}>transactions</Text>
						</View>
					</View>
				</View>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	wrapper: {
		flex:1
	},
	back: {
		flex: 1,
		//zIndex: 0
	},
	front: {
		position: 'absolute',
		paddingTop: 50,
		paddingLeft: 25,
		justifyContent: "center",
		zIndex: 1
	},
	box: {
		flex: 1,
		backgroundColor: "#fff",
		borderRadius: 5,
		padding: 10,
		alignSelf: 'stretch',
		width: Dimensions.get('window').width-50,
		marginBottom: 20,

		shadowColor: "#000",
		shadowOffset: {
			width: 0,
			height: 1,
		},
		shadowOpacity: 0.22,
		shadowRadius: 2.22,

		elevation: 3,
	},
	boxItem: {
		paddingLeft: 10,
		flexDirection: "row"
	},
	divider: {
		borderBottomWidth: 1,
		borderBottomColor: "#B6B6CA",
		marginLeft: -10,
		marginRight: -10,
		marginBottom: 10,
		marginTop: 10
	}
});

Screenshot