react-native-shadow

Since there is no "shadow" attribute in style list of Android,if we want to add a shadow effect on a component,we must patch a PNG-24 picture,but it's so non-graceful;therefore here comes a SVG shadow plugin to help with this problem. We suggest you to use native shadow on iOS

There are two BoxShadow Elements in the picture which support border-radius,and the Line at the bottom is generated with BorderShadow which provide with a top or bottom shadow(can also be inset shadow)

HOW TO USE IT

First

you must run the command to install the plugin and its dependences in you project

npm install react-native-shadow --save

Second

you have to config your project to support the SVG component we use( react-native-svg - Link): Link native code

react-native link react-native-svg

react-native@0.29.0 and 0.29.1 cannot work with Android link properly:here

Or use rnpm instead

rnpm link react-native-svg

**The commands above may add some code to your android and ios dir,if those commands don't make sense,you can try the ways below(for Android): **

Edit `./android/settings.gradle`

If you haven't add any other component,it's like:

rootProject.name = 'reactNative'

include ':app'

you can manually add the react-native-svg:

rootProject.name = 'reactNative'

include ':app', ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')

if you have other components,don't try deleting theme

Edit `./android/app/build.gradle`

find the dependence part like

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

after add:

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile project(':react-native-svg')
}

Edit `./android/app/src/main/java/com/name/MainApplication.java`

add package after the imports:

import com.horcrux.svg.SvgPackage;

AND add a method getPackages in class MainApplication:

protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new SvgPackage()
      );
  }

run `react-native run-android` to install the lastest version on your phone

Third

After config the SVG component,you can simply use it in your project(show ES6 only):

import {BoxShadow} from 'react-native-shadow'(For BorderShadow,import it as 'BoxShadow')
set an opption object:

const shadowOpt = {
	width:100,
	height:100,
	color:"#000",
	border:2,
	radius:3,
	opacity:0.2,
	x:0,
	y:3,
	style:{marginVertical:5}
}

3.create a shadow element and set the object to setting,and you

MUST SET ITS PARENTELEMENT RELATIVE:

render = () => {
	return (
		<View>
			<Shadow setting={shadowOpt}>
				<View style={{width:100,height:100}}/>
			</Shadow>
		</View>
	)
}

Sample

Here is a simple use of the component:

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,
					// marginVertical:5,
					overflow:"hidden"}}>
					…………………………
				</TouchableHighlight>
			</BoxShadow>
		)
	}
}

Manual

the attribute we supported now:

###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

what to notice

This component is so simple,and we are making efforts to make it better; if you met any problem when using it,you can try solving yourself by reading the source code or post an issue,thanks ~~

DoruFurtuna/react-native-shadow