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:
;
Usage
Example:
;;; // Shadows may also be initialised in a stylesheet.const shadows = shadowColor: 'red' shadowOffset: width: 12 height: 12 shadowOpacity: 04 shadowRadius: 12 shadowColor: 'green' shadowOffset: width: -12 height: -12 shadowOpacity: 04 shadowRadius: 12 shadowColor: '#252525' shadowOffset: width: 0 height: 0 shadowOpacity: 08 shadowRadius: 50 ; const App = { return <View> <StatusBar barStyle="dark-content" /> <SafeAreaView style=stylescontainer> <MultipleShadows count=3 shadowStyles=shadows> <View style=stylesouterShadow> <MultipleShadows // additional styles can be added to the component style=stylesinnerShadow count=3 shadowStyles=shadows> <Text>Hello shadow</Text> </MultipleShadows> </View> </MultipleShadows> </SafeAreaView> </View> ;}; const styles = StyleSheet; ;
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. |