refactor: iOS Surface major refactoring (#3738)

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/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 }}
           {...rest}
         >
           <View
@@ -331,9 +331,6 @@ const styles = StyleSheet.create({
   elevated: {
     elevation: 6,
   },
-  container: {
-    overflow: 'hidden',
-  },
   content: {
     flexDirection: 'row',
     alignItems: 'center',