react-native-multiple-shadows

A wrapper component to implement multiple shadows in react native.

Usage no npm install needed!

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

README

react-native-multiple-shadows

A wrapper component to implement multiple shadows in react native.

runs with expo

Os Ios Android
Supported :ballot_box_with_check: :x:

react-native-multiple-shadows-example

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.