react-native-elevate

Used in React Native to get the same drop shadow on both Android and iOS

Usage no npm install needed!

<script type="module">
  import reactNativeElevate from 'https://cdn.skypack.dev/react-native-elevate';
</script>

README

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:

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

android-elevationiphone-elevation