@draftbit/core 43.4.15-d80519.0 → 43.4.16-41f9d1.2

package/src/components/Surface.tsx

@@ -6,9 +6,8 @@ import {
   ViewProps,
   StyleProp,
   ViewStyle,
-  View,
-  Platform,
 } from "react-native";
+
 import shadow from "../styles/shadow";
 import overlay from "../styles/overlay";
 import { withTheme } from "../theming";
@@ -29,10 +28,8 @@ const Surface: React.FC<Props> = ({
 }) => {
   const {
     elevation: styleElevation = 3,
-    borderRadius,
-    overflow,
-    height,
-    width,
+    backgroundColor,
+    ...restStyle
   } = (StyleSheet.flatten(style) || {}) as ViewStyle;
 
   const { dark: isDarkTheme, mode, colors } = theme;
@@ -41,34 +38,29 @@ const Surface: React.FC<Props> = ({
 
   const evalationStyles = elevation ? shadow(elevation) : {};
 
+  const getBackgroundColor = () => {
+    if (backgroundColor) {
+      return backgroundColor;
+    } else if (isDarkTheme && mode === "adaptive") {
+      return overlay(elevation, colors.surface);
+    } else {
+      return colors.surface;
+    }
+  };
+
   return (
     <Animated.View
       {...rest}
       style={[
-        style,
         {
-          backgroundColor:
-            isDarkTheme && mode === "adaptive"
-              ? overlay(elevation, colors.surface)
-              : colors.surface,
-          overflow: Platform.OS === "web" ? "hidden" : "visible",
+          backgroundColor: getBackgroundColor(),
           elevation,
           ...evalationStyles,
+          ...restStyle,
         },
       ]}
     >
-      <View
-        style={[
-          {
-            overflow,
-            borderRadius,
-            height,
-            width,
-          },
-        ]}
-      >
-        {children}
-      </View>
+      {children}
     </Animated.View>
   );
 };