README
react-native-multiple-shadows
A wrapper component to implement multiple shadows in react native.
Os | Ios | Android |
---|---|---|
Supported | :ballot_box_with_check: | :x: |
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. |