README

expo-react-native-shadow

NPM version">

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:

Demo

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: 0.2,
  x: 0,
  y: 3,
  style: { marginVertical: 5 },
}

Wrap your component in BoxShadow or BorderShadow, passing in the shadowStyle object:

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 (
      <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 or false - This is similar to CSS - shadow: color inset

Usage no npm install needed!