react-native-multiple-shadows

A wrapper component to implement multiple shadows in react native.

Os	Ios	Android
Supported	☑️	❌

Installation

# yarn
yarn add react-native-multiple-shadows

# npm
npm install react-native-multiple-shadows --save

Then, import with:

import MultipleShadows from "react-native-multiple-shadows";

Usage

Example:

import React from 'react';
import {SafeAreaView, StyleSheet, View, Text, StatusBar} from 'react-native';
import MultipleShadows from "react-native-multiple-shadows";

// Shadows may also be initialised in a stylesheet.
const shadows = [
  {
    shadowColor: 'red',
    shadowOffset: {width: 12, height: 12},
    shadowOpacity: 0.4,
    shadowRadius: 12,
  },
  {
    shadowColor: 'green',
    shadowOffset: {width: -12, height: -12},
    shadowOpacity: 0.4,
    shadowRadius: 12,
  },
  {
    shadowColor: '#252525',
    shadowOffset: {width: 0, height: 0},
    shadowOpacity: 0.8,
    shadowRadius: 50,
  },
];

const App = () => {
  return (
    <View>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.container}>
        <MultipleShadows count={3} shadowStyles={shadows}>
          <View style={styles.outerShadow}>
            <MultipleShadows
              // additional styles can be added to the component
              style={styles.innerShadow} 
              count={3}
              shadowStyles={shadows}>
              <Text>Hello shadow</Text>
            </MultipleShadows>
          </View>
        </MultipleShadows>
      </SafeAreaView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#4af7',
    justifyContent: 'center',
    alignItems: 'center',
  },
  outerShadow: {
    width: 300,
    height: 450,
    backgroundColor: '#22abd3',
  },
  innerShadow: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
});

export default App;

Props

Prop	Required?	Type	Description
count	false	number	The number of shadows to be displayed.
shadowStyles	false	array of objects	Must be an array of styles. The length of the array must be equal the count.
style	false	object	Additional styles to be added to the component.