refactor: remove middle layer in Surface

Author: DimitarNestorov

src/components/FAB/FAB.tsx

@@ -266,7 +266,6 @@ const FAB = forwardRef<View, Props>(
               },
             ],
           },
-          styles.container,
           !isV3 && styles.elevated,
           !isV3 && disabled && styles.disabled,
           style,
@@ -286,6 +285,7 @@ const FAB = forwardRef<View, Props>(
           accessibilityRole="button"
           accessibilityState={newAccessibilityState}
           testID={testID}
+          style={{ borderRadius }}
         >
           <View
             style={[styles.content, label ? extendedStyle : fabStyle]}
@@ -330,9 +330,6 @@ const styles = StyleSheet.create({
   elevated: {
     elevation: 6,
   },
-  container: {
-    overflow: 'hidden',
-  },
   content: {
     flexDirection: 'row',
     alignItems: 'center',

src/components/Surface.tsx

@@ -238,21 +238,26 @@ const Surface = forwardRef<View, Props>(
       ...restStyle
     } = (StyleSheet.flatten(style) || {}) as ViewStyle;
 
-    const [filteredStyle, borderRadiusStyle, marginStyle] = splitStyles(
-      restStyle,
-      (style) => style.startsWith('border') && style.endsWith('Radius'),
-      (style) => style.startsWith('margin')
+    const [filteredStyle, marginStyle] = splitStyles(restStyle, (style) =>
+      style.startsWith('margin')
     );
 
-    const sharedStyles = {
-      flex: height ? 1 : undefined,
-    };
+    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,
-      sharedStyles,
-      borderRadiusStyle,
-      { backgroundColor: backgroundColorStyle || backgroundColor },
+      {
+        flex: height ? 1 : undefined,
+        backgroundColor: backgroundColorStyle || backgroundColor,
+      },
     ];
 
     const outerLayerViewStyles = {
@@ -303,16 +308,10 @@ const Surface = forwardRef<View, Props>(
           testID={`${testID}-outer-layer`}
         >
           <Animated.View
-            style={[getStyleForAnimatedShadowLayer(1), sharedStyles]}
-            testID={`${testID}-middle-layer`}
+            style={[getStyleForAnimatedShadowLayer(1), innerLayerViewStyles]}
+            testID={testID}
           >
-            <Animated.View
-              {...props}
-              testID={testID}
-              style={innerLayerViewStyles}
-            >
-              {children}
-            </Animated.View>
+            {children}
           </Animated.View>
         </Animated.View>
       );
@@ -339,16 +338,11 @@ const Surface = forwardRef<View, Props>(
         testID={`${testID}-outer-layer`}
       >
         <Animated.View
-          style={[getStyleForShadowLayer(1), sharedStyles]}
-          testID={`${testID}-middle-layer`}
+          {...props}
+          style={[getStyleForShadowLayer(1), innerLayerViewStyles]}
+          testID={testID}
         >
-          <Animated.View
-            {...props}
-            testID={testID}
-            style={innerLayerViewStyles}
-          >
-            {children}
-          </Animated.View>
+          {children}
         </Animated.View>
       </Animated.View>
     );