chore: improve box-shadow performance

Author: Zivsteve

example/src/screens/ShadowsExampleScreen.tsx

@@ -56,6 +56,11 @@ const styles = StyleSheet.create(() => ({
     margin: [100, 0],
     backgroundColor: 'white',
     boxShadow: '1px 1px 15px gray',
+    transition: [['boxShadow', 'borderRadius'], 800],
+
+    '&:active': {
+      borderRadius: 100,
+    },
   },
   text1: {
     margin: [50, 0, 5, 0],

src/Animated.tsx

@@ -392,7 +392,7 @@ export function createComponent<T extends NativeComponents>(WrappedComponent: T)
           {!!BeforeComponent && <BeforeComponent style={before}>{beforeContent}</BeforeComponent>}
 
           {!mockShadow && renderComponent(e)}
-          {mockShadow && <BoxShadow style={this.getStyleProps(e).style}>{renderComponent(e)}</BoxShadow>}
+          {mockShadow && <BoxShadow {...this.getStyleProps(e)}>{renderComponent(e)}</BoxShadow>}
 
           {!!AfterComponent && <AfterComponent style={after}>{afterContent}</AfterComponent>}
         </>

src/components/BoxShadow.tsx

@@ -113,9 +113,9 @@ class BoxShadow extends Component<BoxShadowProps> {
     const height = style.height || 0;
 
     const shadowRadius = style.shadowRadius as any;
-    let radius = shadowRadius / 20;
+    let radius = Math.max(shadowRadius / 6, 1);
     if (typeof shadowRadius?._value !== 'undefined') {
-      (shadowRadius as Animated.Value).addListener(({ value }) => this.setState({ radius: value / 20 }));
+      (shadowRadius as Animated.Value).addListener(({ value }) => this.setState({ radius: Math.max(value / 6, 1) }));
     } else {
       this.setState({ radius });
     }
@@ -209,20 +209,20 @@ const styles = StyleSheet.create((o) => ({
   border: {
     width: o.state.width,
     height: o.state.height,
+    transform: [{ scale: 0.7 }],
     backgroundColor: '#fff',
-    transform: [{ scale: 0.2 }],
     ...o.state.shadowStyle,
   },
   shadow: {
     position: 'absolute',
     width: o.state.width,
     height: o.state.height,
     opacity: o.state.opacity,
-    marginTop: o.state.offset.top,
-    marginLeft: o.state.offset.left,
+    top: o.state.offset.top,
+    left: o.state.offset.left,
     tintColor: o.state.color,
     zIndex: -1,
-    transform: [{ scale: 5 }],
+    transform: [{ scale: 1 / 0.7 }],
     pointerEvents: 'none',
   },
 }));