fix: iOS Surface styles

Author: DimitarNestorov

example/src/Examples/SurfaceExample.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
-import { MD3Elevation, Surface, Text } from 'react-native-paper';
+import { MD3Elevation, Surface, Text, MD3Colors } from 'react-native-paper';
 
 import { useExampleTheme } from '..';
 import { isWeb } from '../../utils';
@@ -31,6 +31,23 @@ const SurfaceExample = () => {
           </Text>
         </Surface>
       ))}
+
+      <View style={styles.horizontalSurfacesContainer}>
+        <Surface style={styles.horizontalSurface}>
+          <Text style={styles.centerText}>Left</Text>
+        </Surface>
+        <Surface style={styles.horizontalSurface}>
+          <Text style={styles.centerText}>Right</Text>
+        </Surface>
+      </View>
+      <View style={styles.verticalSurfacesContainer}>
+        <Surface style={styles.verticalSurface}>
+          <Text style={styles.centerText}>Top</Text>
+        </Surface>
+        <Surface style={styles.verticalSurface}>
+          <Text style={styles.centerText}>Bottom</Text>
+        </Surface>
+      </View>
     </ScreenWrapper>
   );
 };
@@ -61,6 +78,37 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+
+  horizontalSurfacesContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    marginBottom: 20,
+    borderColor: MD3Colors.tertiary50,
+    padding: 10,
+    borderWidth: 1,
+  },
+  horizontalSurface: {
+    width: '48%',
+  },
+
+  verticalSurfacesContainer: {
+    height: 400,
+    justifyContent: 'space-between',
+    width: '100%',
+    marginBottom: 100,
+    borderColor: MD3Colors.tertiary50,
+    padding: 10,
+    borderWidth: 1,
+  },
+  verticalSurface: {
+    height: '48%',
+    justifyContent: 'center',
+  },
+
+  centerText: {
+    textAlign: 'center',
+  },
 });
 
 export default SurfaceExample;

src/components/Surface.tsx

@@ -13,6 +13,7 @@ import overlay, { isAnimatedValue } from '../styles/overlay';
 import shadow from '../styles/shadow';
 import type { ThemeProp, MD3Elevation } from '../types';
 import { forwardRef } from '../utils/forwardRef';
+import { splitStyles } from '../utils/splitStyles';
 
 export type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
@@ -229,10 +230,32 @@ const Surface = forwardRef<View, Props>(
       start,
       end,
       flex,
+      backgroundColor: backgroundColorStyle,
+      width,
+      height,
+      transform,
+      opacity,
       ...restStyle
     } = (StyleSheet.flatten(style) || {}) as ViewStyle;
 
-    const absoluteStyles = {
+    const [filteredStyle, borderRadiusStyle, marginStyle] = splitStyles(
+      restStyle,
+      (style) => style.startsWith('border') && style.endsWith('Radius'),
+      (style) => style.startsWith('margin')
+    );
+
+    const sharedStyles = {
+      flex: height ? 1 : undefined,
+    };
+
+    const innerLayerViewStyles = [
+      filteredStyle,
+      sharedStyles,
+      borderRadiusStyle,
+      { backgroundColor: backgroundColorStyle || backgroundColor },
+    ];
+
+    const outerLayerViewStyles = {
       position,
       alignSelf,
       top,
@@ -241,14 +264,14 @@ const Surface = forwardRef<View, Props>(
       left,
       start,
       end,
+      flex,
+      width,
+      height,
+      transform,
+      opacity,
+      ...marginStyle,
     };
 
-    const sharedStyle = [{ backgroundColor, flex }, restStyle];
-
-    const innerLayerViewStyles = [{ flex }];
-
-    const outerLayerViewStyles = [absoluteStyles, innerLayerViewStyles];
-
     if (isAnimatedValue(elevation)) {
       const inputRange = [0, 1, 2, 3, 4, 5];
 
@@ -280,10 +303,14 @@ const Surface = forwardRef<View, Props>(
           testID={`${testID}-outer-layer`}
         >
           <Animated.View
-            style={[getStyleForAnimatedShadowLayer(1), innerLayerViewStyles]}
-            testID={`${testID}-inner-layer`}
+            style={[getStyleForAnimatedShadowLayer(1), sharedStyles]}
+            testID={`${testID}-middle-layer`}
           >
-            <Animated.View {...props} testID={testID} style={sharedStyle}>
+            <Animated.View
+              {...props}
+              testID={testID}
+              style={innerLayerViewStyles}
+            >
               {children}
             </Animated.View>
           </Animated.View>
@@ -312,10 +339,14 @@ const Surface = forwardRef<View, Props>(
         testID={`${testID}-outer-layer`}
       >
         <Animated.View
-          style={[getStyleForShadowLayer(1), innerLayerViewStyles]}
-          testID={`${testID}-inner-layer`}
+          style={[getStyleForShadowLayer(1), sharedStyles]}
+          testID={`${testID}-middle-layer`}
         >
-          <Animated.View {...props} testID={testID} style={sharedStyle}>
+          <Animated.View
+            {...props}
+            testID={testID}
+            style={innerLayerViewStyles}
+          >
             {children}
           </Animated.View>
         </Animated.View>

src/utils/splitStyles.ts

@@ -0,0 +1,39 @@
+import type { ViewStyle } from 'react-native';
+
+type Tuple = readonly ((style: string) => boolean)[];
+
+type MappedTuple<T extends Tuple> = {
+  [Index in keyof T]: ViewStyle;
+} & { length: T['length'] };
+
+export function splitStyles<T extends Tuple>(styles: ViewStyle, ...filters: T) {
+  const newStyles = filters.map<[string, ViewStyle][]>(returnEmptyArray);
+
+  // Rest styles
+  newStyles.push([]);
+
+  outer: for (const item of Object.entries(styles) as [string, ViewStyle][]) {
+    for (let i = 0; i < filters.length; i++) {
+      if (filters[i](item[0])) {
+        newStyles[i].push(item);
+        continue outer;
+      }
+    }
+
+    // Adds to rest styles if not filtered
+    newStyles[filters.length].push(item);
+  }
+
+  // Put rest styles in the beginning
+  const last = newStyles.pop()!;
+  newStyles.unshift(last);
+
+  return newStyles.map((styles) => Object.fromEntries(styles)) as unknown as [
+    ViewStyle,
+    ...MappedTuple<T>
+  ];
+}
+
+function returnEmptyArray<T extends unknown[]>() {
+  return [] as unknown as T;
+}