From b8df0f306475be43d83424e61f4fb79e970d88e0 Mon Sep 17 00:00:00 2001
From: Luke Fanning <luke@solidstategroup.com>
Date: Thu, 26 Apr 2018 16:01:35 +0100
Subject: [PATCH 1/4] Allow zero opacity

---
 lib/BorderShadow.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/BorderShadow.js b/lib/BorderShadow.js
index fe9baf8..5a7fdea 100644
--- a/lib/BorderShadow.js
+++ b/lib/BorderShadow.js
@@ -5,7 +5,10 @@ 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,opacity,inset=false,style={}}, children } = this.props
+		if (typeof opacity !== 'number') {
+			opacity = 1;
+		}
 
 		const linear = (key) => {
 			return [

From c7da744e41c2f7b8e866a48e3b89f46b9744162e Mon Sep 17 00:00:00 2001
From: Luke Fanning <luke@solidstategroup.com>
Date: Thu, 26 Apr 2018 16:04:41 +0100
Subject: [PATCH 2/4] Extract opacity as readable

---
 lib/BorderShadow.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/BorderShadow.js b/lib/BorderShadow.js
index 5a7fdea..74f17b1 100644
--- a/lib/BorderShadow.js
+++ b/lib/BorderShadow.js
@@ -5,7 +5,8 @@ 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,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;
 		}

From 8e7f8a1225f42434b2e40df72e9f2fd3ca44e170 Mon Sep 17 00:00:00 2001
From: Luke Fanning <luke@solidstategroup.com>
Date: Thu, 26 Apr 2018 16:10:48 +0100
Subject: [PATCH 3/4] Render children only if opacity is 0

---
 lib/BorderShadow.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/BorderShadow.js b/lib/BorderShadow.js
index 74f17b1..3fe5b72 100644
--- a/lib/BorderShadow.js
+++ b/lib/BorderShadow.js
@@ -11,6 +11,10 @@ export default class BorderShadow extends Component {
 			opacity = 1;
 		}
 
+		if (opacity === 0) {
+			return children;
+		}
+
 		const linear = (key) => {
 			return [
 				<Stop offset="0" stopColor={color} stopOpacity={opacity} key={key+'Linear0'} />,

From c4ff5e17b2236ef40ebc266ecfbb15acc6b03e99 Mon Sep 17 00:00:00 2001
From: Luke Fanning <luke@solidstategroup.com>
Date: Thu, 26 Apr 2018 16:18:38 +0100
Subject: [PATCH 4/4] Prevent re-rendering & allow zero opacity on box shadow

---
 lib/BorderShadow.js | 10 ++++------
 lib/BoxShadow.js    | 11 ++++++++---
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/lib/BorderShadow.js b/lib/BorderShadow.js
index 3fe5b72..ccf0d60 100644
--- a/lib/BorderShadow.js
+++ b/lib/BorderShadow.js
@@ -11,10 +11,6 @@ export default class BorderShadow extends Component {
 			opacity = 1;
 		}
 
-		if (opacity === 0) {
-			return children;
-		}
-
 		const linear = (key) => {
 			return [
 				<Stop offset="0" stopColor={color} stopOpacity={opacity} key={key+'Linear0'} />,
@@ -30,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>
 		)