diff --git a/lib/BorderShadow.js b/lib/BorderShadow.js
index fe9baf8..ccf0d60 100644
--- a/lib/BorderShadow.js
+++ b/lib/BorderShadow.js
@@ -5,7 +5,11 @@ import Svg,{ Rect,Defs,LinearGradient,Stop,RadialGradient,Path } from 'react-nat
 export default class BorderShadow extends Component {
 	render = () => {
 
-		const { setting:{side="bottom",width=0,color="#000",border=0,opacity=1,inset=false,style={}}, children } = this.props
+		const { setting:{side="bottom",width=0,color="#000",border=0,inset=false,style={}}, children } = this.props
+		var {setting: {opacity}} = this.props;
+		if (typeof opacity !== 'number') {
+			opacity = 1;
+		}
 
 		const linear = (key) => {
 			return [
@@ -22,25 +26,27 @@ export default class BorderShadow extends Component {
 					switch (side){
 						case "top":
 							return [
+								opacity !== 0 ?
 								<Svg height={lineWidth} width={width+lineWidth} style={{position:"absolute",top:(inset?0:-lineWidth)}}>
 									<Defs>
 										<LinearGradient id="top" x1="0%" x2="0%" y1="100%" y2="0%">{linear('BorderTop')}</LinearGradient>
 										<LinearGradient id="top-inset" x1="0%" x2="0%" y1="0%" y2="100%">{linear('BorderTopInset')}</LinearGradient>
 									</Defs>
 									<Rect x={0} y={0} width={width} height={lineWidth} fill={`url(#top${inset?"-inset":""})`} />
-								</Svg>,
+								</Svg> : null,
 								...children
 							]
 						case "bottom":
 							return [
 								...children,
+								opacity !== 0 ?
 								<Svg height={lineWidth} width={width+lineWidth} style={{position:"absolute",bottom:(inset?-lineWidth:0)}}>
 									<Defs>
 										<LinearGradient id="bottom" x1="0%" x2="0%" y1="0%" y2="100%">{linear('BorderBottom')}</LinearGradient>
 										<LinearGradient id="bottom-inset" x1="0%" x2="0%" y1="100%" y2="0%">{linear('BorderBottomInset')}</LinearGradient>
 									</Defs>
 									<Rect x={0} y={0} width={width} height={lineWidth} fill={`url(#bottom${inset?"-inset":""})`} />
-								</Svg>
+								</Svg> : null
 							]
 						default:
 							throw new Error("Wrong Type of Side! We just support 'top' and 'bottom'")
diff --git a/lib/BoxShadow.js b/lib/BoxShadow.js
index bff3bfc..c9bfbc2 100644
--- a/lib/BoxShadow.js
+++ b/lib/BoxShadow.js
@@ -27,7 +27,11 @@ function colorRgb (color){
 export default class BoxShadow extends Component {
 	render = () => {
 		//get the shadow settings and give them default values
-		const { setting:{width=0,height=0,color="#000",border=0,radius=0,opacity=1,x=0,y=0,style={}}, children } = this.props
+		const { setting:{width=0,height=0,color="#000",border=0,radius=0,x=0,y=0,style={}}, children } = this.props
+		var {setting: {opacity}} = this.props;
+		if (typeof opacity !== 'number') {
+			opacity = 1;
+		}
 
 		//define the lengths
 		const lineWidth = border,
@@ -58,13 +62,14 @@ export default class BoxShadow extends Component {
 		//return a view ,whose background is a svg picture
 		return (
 			<View style={[{position:"relative",width:width,height:height},style]}>
+				{opacity !== 0 ?
 				<Svg height={height+lineWidth*2+radius*2} width={width+lineWidth*2+radius*2} style={{position:"absolute",top:y-lineWidth,left:x-lineWidth}}>
 					<Defs>
 						<LinearGradient id="top" x1="0%" x2="0%" y1="100%" y2="0%">{linear('BoxTop')}</LinearGradient>
 						<LinearGradient id="bottom" x1="0%" x2="0%" y1="0%" y2="100%">{linear('BoxBottom')}</LinearGradient>
 						<LinearGradient id="left" x1="100%" y1="0%" x2="0%" y2="0%">{linear('BoxLeft')}</LinearGradient>
 						<LinearGradient id="right" x1="0%" y1="0%" x2="100%" y2="0%" >{linear('BoxRight')}</LinearGradient>
-				
+
 						<RadialGradient id="border-left-top" r="100%" cx="100%" cy="100%" fx="100%" fy="100%">{radial('BoxLeftTop')}</RadialGradient>
 						<RadialGradient id="border-left-bottom" r="100%" cx="100%" cy="0%" fx="100%" fy="0%">{radial('BoxLeftBottom')}</RadialGradient>
 						<RadialGradient id="border-right-top" r="100%" cx="0%" cy="100%" fx="0%" fy="100%">{radial('BoxRightTop')}</RadialGradient>
@@ -82,7 +87,7 @@ export default class BoxShadow extends Component {
 					<Rect x={outerWidth} y={rectHeight+lineWidth+2*radius} width={rectWidth} height={lineWidth} fill="url(#bottom)" />
 
 					<Path d={`M ${outerWidth} ${lineWidth},h ${rectWidth},q ${radius} 0 ${radius} ${radius},v ${rectHeight},q 0 ${radius} -${radius} ${radius},h -${rectWidth},q -${radius} 0 -${radius} -${radius},v -${rectHeight},q 0 -${radius} ${radius} -${radius}`} fill={`rgba(${rgb[0]},${rgb[1]},${rgb[2]},${opacity || 1})`}/>
-				</Svg>
+				</Svg> : null}
 				{children}
 			</View>
 		)