react-native-elevate

A Material Design shadow generator which provides similar results on both Android & iOS. Note: Keyword here is similar as on Android the position of the element will determine the size and opacity of the drop shadow. Inspired by:

• https://material.io/design/environment/elevation.html
• https://github.com/ethercreative/react-native-shadow-generator

Installation

Install the package using Yarn:

yarn add react-native-elevate

or npm:

npm install --save react-native-elevate

Usage

Import the function:

import { elevate } from "react-native-elevation"

Use it in a StyleSheet:

const styles = StyleSheet.create({
	container: {
		...elevate(4)
	}
})

Use it in your component:

<View style={[styles.wrapper, elevate(2)]}>
	...
</View>

Example