refactor: move Surface iOS logic in separate component and memoize styles

Author: DimitarNestorov

src/components/Surface.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   Animated,
   Platform,
+  ShadowStyleIOS,
   StyleProp,
   StyleSheet,
   View,
@@ -15,6 +16,8 @@ import type { ThemeProp, MD3Elevation } from '../types';
 import { forwardRef } from '../utils/forwardRef';
 import { splitStyles } from '../utils/splitStyles';
 
+type Elevation = 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+
 export type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
    * Content of the `Surface`.
@@ -29,7 +32,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * Note: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.
    * It's no longer supported with theme version 3 and you should use `elevation` property instead.
    */
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  elevation?: Elevation;
   /**
    * @optional
    */
@@ -65,6 +68,138 @@ const MD2Surface = forwardRef<View, Props>(
   }
 );
 
+const shadowColor = '#000';
+const iOSShadowOutputRanges = [
+  {
+    shadowOpacity: 0.15,
+    height: [0, 1, 2, 4, 6, 8],
+    shadowRadius: [0, 3, 6, 8, 10, 12],
+  },
+  {
+    shadowOpacity: 0.3,
+    height: [0, 1, 1, 1, 2, 4],
+    shadowRadius: [0, 1, 2, 3, 3, 4],
+  },
+];
+const inputRange = [0, 1, 2, 3, 4, 5];
+function getStyleForShadowLayer(
+  elevation: Elevation,
+  layer: 0 | 1
+): Animated.WithAnimatedValue<ShadowStyleIOS> {
+  if (isAnimatedValue(elevation)) {
+    return {
+      shadowColor,
+      shadowOpacity: elevation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, iOSShadowOutputRanges[layer].shadowOpacity],
+        extrapolate: 'clamp',
+      }),
+      shadowOffset: {
+        width: 0,
+        height: elevation.interpolate({
+          inputRange,
+          outputRange: iOSShadowOutputRanges[layer].height,
+        }),
+      },
+      shadowRadius: elevation.interpolate({
+        inputRange,
+        outputRange: iOSShadowOutputRanges[layer].shadowRadius,
+      }),
+    };
+  }
+
+  return {
+    shadowColor,
+    shadowOpacity: elevation ? iOSShadowOutputRanges[layer].shadowOpacity : 0,
+    shadowOffset: {
+      width: 0,
+      height: iOSShadowOutputRanges[layer].height[elevation],
+    },
+    shadowRadius: iOSShadowOutputRanges[layer].shadowRadius[elevation],
+  };
+}
+
+const SurfaceIOS = forwardRef<
+  View,
+  Omit<Props, 'elevation'> & {
+    elevation: Elevation;
+    backgroundColor?: string | Animated.AnimatedInterpolation<string | number>;
+  }
+>(({ elevation, style, backgroundColor, testID, children, ...props }, ref) => {
+  const [outerLayerViewStyles, innerLayerViewStyles] = React.useMemo(() => {
+    const {
+      position,
+      alignSelf,
+      top,
+      left,
+      right,
+      bottom,
+      start,
+      end,
+      flex,
+      backgroundColor: backgroundColorStyle,
+      width,
+      height,
+      transform,
+      opacity,
+      ...restStyle
+    } = (StyleSheet.flatten(style) || {}) as ViewStyle;
+
+    const [filteredStyles, marginStyles] = splitStyles(restStyle, (style) =>
+      style.startsWith('margin')
+    );
+
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      filteredStyles.overflow === 'hidden' &&
+      elevation !== 0
+    ) {
+      console.warn(
+        'When setting overflow to hidden on Surface the shadow will not be displayed correctly. Wrap the content of your component in a separate View with the overflow style.'
+      );
+    }
+
+    const outerLayerViewStyles = {
+      ...getStyleForShadowLayer(elevation, 0),
+      ...marginStyles,
+      position,
+      alignSelf,
+      top,
+      right,
+      bottom,
+      left,
+      start,
+      end,
+      flex,
+      width,
+      height,
+      transform,
+      opacity,
+    };
+
+    const innerLayerViewStyles = {
+      ...getStyleForShadowLayer(elevation, 1),
+      ...filteredStyles,
+      flex: height ? 1 : undefined,
+      backgroundColor: backgroundColorStyle || backgroundColor,
+    };
+
+    return [outerLayerViewStyles, innerLayerViewStyles];
+  }, [style, elevation, backgroundColor]);
+
+  return (
+    <Animated.View
+      ref={ref}
+      style={outerLayerViewStyles}
+      testID={`${testID}-outer-layer`}
+    >
+      <Animated.View {...props} style={innerLayerViewStyles} testID={testID}>
+        {children}
+      </Animated.View>
+    </Animated.View>
+  );
+});
+
 /**
  * Surface is a basic container that can give depth to an element with elevation shadow.
  * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
@@ -205,146 +340,16 @@ const Surface = forwardRef<View, Props>(
       );
     }
 
-    const iOSShadowOutputRanges = [
-      {
-        shadowOpacity: 0.15,
-        height: [0, 1, 2, 4, 6, 8],
-        shadowRadius: [0, 3, 6, 8, 10, 12],
-      },
-      {
-        shadowOpacity: 0.3,
-        height: [0, 1, 1, 1, 2, 4],
-        shadowRadius: [0, 1, 2, 3, 3, 4],
-      },
-    ];
-
-    const shadowColor = '#000';
-
-    const {
-      position,
-      alignSelf,
-      top,
-      left,
-      right,
-      bottom,
-      start,
-      end,
-      flex,
-      backgroundColor: backgroundColorStyle,
-      width,
-      height,
-      transform,
-      opacity,
-      ...restStyle
-    } = (StyleSheet.flatten(style) || {}) as ViewStyle;
-
-    const [filteredStyle, marginStyle] = splitStyles(restStyle, (style) =>
-      style.startsWith('margin')
-    );
-
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      filteredStyle.overflow === 'hidden' &&
-      elevation !== 0
-    ) {
-      console.warn(
-        'When setting overflow to hidden on Surface the shadow will not be displayed correctly. Wrap the content of your component in a separate View with the overflow style.'
-      );
-    }
-
-    const innerLayerViewStyles = [
-      filteredStyle,
-      {
-        flex: height ? 1 : undefined,
-        backgroundColor: backgroundColorStyle || backgroundColor,
-      },
-    ];
-
-    const outerLayerViewStyles = {
-      position,
-      alignSelf,
-      top,
-      right,
-      bottom,
-      left,
-      start,
-      end,
-      flex,
-      width,
-      height,
-      transform,
-      opacity,
-      ...marginStyle,
-    };
-
-    if (isAnimatedValue(elevation)) {
-      const inputRange = [0, 1, 2, 3, 4, 5];
-
-      const getStyleForAnimatedShadowLayer = (layer: 0 | 1) => {
-        return {
-          shadowColor,
-          shadowOpacity: elevation.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, iOSShadowOutputRanges[layer].shadowOpacity],
-            extrapolate: 'clamp',
-          }),
-          shadowOffset: {
-            width: 0,
-            height: elevation.interpolate({
-              inputRange,
-              outputRange: iOSShadowOutputRanges[layer].height,
-            }),
-          },
-          shadowRadius: elevation.interpolate({
-            inputRange,
-            outputRange: iOSShadowOutputRanges[layer].shadowRadius,
-          }),
-        };
-      };
-
-      return (
-        <Animated.View
-          style={[getStyleForAnimatedShadowLayer(0), outerLayerViewStyles]}
-          testID={`${testID}-outer-layer`}
-        >
-          <Animated.View
-            style={[getStyleForAnimatedShadowLayer(1), innerLayerViewStyles]}
-            testID={testID}
-          >
-            {children}
-          </Animated.View>
-        </Animated.View>
-      );
-    }
-
-    const getStyleForShadowLayer = (layer: 0 | 1) => {
-      return {
-        shadowColor,
-        shadowOpacity: elevation
-          ? iOSShadowOutputRanges[layer].shadowOpacity
-          : 0,
-        shadowOffset: {
-          width: 0,
-          height: iOSShadowOutputRanges[layer].height[elevation],
-        },
-        shadowRadius: iOSShadowOutputRanges[layer].shadowRadius[elevation],
-      };
-    };
-
     return (
-      <Animated.View
-        ref={ref}
-        style={[getStyleForShadowLayer(0), outerLayerViewStyles]}
-        testID={`${testID}-outer-layer`}
+      <SurfaceIOS
+        {...props}
+        elevation={elevation}
+        backgroundColor={backgroundColor}
+        style={style}
+        testID={testID}
       >
-        <Animated.View
-          {...props}
-          style={[getStyleForShadowLayer(1), innerLayerViewStyles]}
-          testID={testID}
-        >
-          {children}
-        </Animated.View>
-      </Animated.View>
+        {children}
+      </SurfaceIOS>
     );
   }
 );