expo-react-native-shadow
This is a port of react-native-shadow
that is compatible with Expo and replaces the react-native-svg tags in React Native Shadow with Expo's SVG API. That means no ejecting!
The documentation is the same as react-native-shadow
's:
HOW TO USE IT
Installation
you must run the command to install the plugin and its dependences in you project
yarn add expo-react-native-shadow
Implementation
-
import { BoxShadow, BorderShadow } from 'expo-react-native-shadow'
-
Create a styles/options object:
const shadowStyle = width: 100 height: 100 color: "#000" border: 2 radius: 3 opacity: 02 x: 0 y: 3 style: marginVertical: 5
- Wrap your component in
BoxShadow
orBorderShadow
, passing in theshadowStyle
object:
const buttonStyle = position: "relative" width: 160 height: 170 backgroundColor: "#fff" const shadowStyle = width: buttonStylewidth height: buttonStyleheight color: "#000" border: 2 radius: 3 opacity: 02 x: 0 y: 3 style: marginVertical: 5 { return <BoxShadow setting=shadowStyle> <TouchableHighlight style=buttonStyle /> </BoxShadow> }
Styles API
BoxShadow
- width: Must be set to the same value as the child component.
- height: Must be set to the same value as the child component.
- color: Color of shadow. RGBA is not supported, however you may use the opacity property.
- border: Width of the shadow, cannot be a negative number.
- radius: Should be set to the
borderRadius
of child component. - opacity: the
opacity
of the shadow. - x: The
offsetX
of the shadow - y: The
offsetY
of the shadow - style: A styles object to be applied to the wrapping
<View>
tag of the SVG component.
BorderShadow
- width: Same as above.
- color: Same as above.
- border: Same as above.
- opacity: Same as above.
- style: Same as above.
- side:
"top"
or"bottom"
- Display position of the border shadow. - inset:
true
orfalse
- This is similar to CSS -shadow: color inset