Expo-compatible version of react-native-shadow, replacing react-native-svg components with Expo's RNSVG components. Does not require ejecting.
npm install expo-react-native-shadowThis 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:
!Demo
bash
yarn add expo-react-native-shadow
` $3
1.
import { BoxShadow, BorderShadow } from 'expo-react-native-shadow'2. Create a styles/options object:
`js
const shadowStyle = {
width: 100,
height: 100,
color: "#000",
border: 2,
radius: 3,
opacity: 0.2,
x: 0,
y: 3,
style: { marginVertical: 5 },
}
`3. Wrap your component in
BoxShadow or BorderShadow, passing in the shadowStyle object:
`js
import React, { Component } from 'react'
import { TouchableHighlight } from 'react-native'
import { BoxShadow } from 'expo-react-native-shadow'const buttonStyle = {
position: "relative",
width: 160,
height: 170,
backgroundColor: "#fff",
}
const shadowStyle = {
width: buttonStyle.width,
height: buttonStyle.height,
color: "#000",
border: 2,
radius: 3,
opacity: 0.2,
x: 0,
y: 3,
style: { marginVertical: 5 }
}
export default class VideoCell extends Component {
render = () => {
return (
)
}
}
`Styles API
$3
+ 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 tag of the SVG component.$3
+ 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 or false - This is similar to CSS - shadow: color inset`
[npm-url]: https://npmjs.org/package/expo-react-native-shadow
[downloads-image]: http://img.shields.io/npm/dm/expo-react-native-shadow.svg
[npm-image]: http://img.shields.io/npm/v/expo-react-native-shadow.svg