Package Exports

expo-react-native-shadow

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (expo-react-native-shadow) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

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} from 'expo-react-native-shadow' (For BorderShadow, import it as 'BoxShadow')
Create a styles/options object:

const shadowOpt = {
  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:

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  ScrollView,
  Image,
  TouchableHighlight
} from 'react-native'

import { BoxShadow } from 'react-native-shadow'

export default class VideoCell extends Component {
  render = () => {
    const shadowOpt = {
      width: 160,
      height: 170,
      color: "#000",
      border: 2,
      radius: 3,
      opacity: 0.2,
      x: 0,
      y: 3,
      style: { marginVertical: 5 }
    }

    return (
      <BoxShadow setting={shadowOpt}>
        <TouchableHighlight style={{
          position: "relative",
          width: 160,
          height: 170,
          backgroundColor: "#fff",
          borderRadius: 3,
          overflow: "hidden"
        }}>
      </TouchableHighlight>
      </BoxShadow>
    )
  }
}

Styles API

BoxShadow

width: you must set the value the same as your child component
height: the same as above
color: the color of shadow,it doesn't support rgba now,you may use opacity
border: the width of shadow , cannot less than 0
radius: the same value as the "borderRadius" of chileElement
opacity: the opacity of shadow
x: the offsetX of shadow
y: the offsetY of shadow
style: the style you want to add to the wrapper box

BorderShadow

width,color,border,opacity,style: these attributes are the same as above
side: "top" or "bottom",you can choose where the shadow shows
inset: true or false,this is similar to CSS - shadow: color inset