fix: add container prop and improve flex/layout handling

src/components/Appbar/Appbar.tsx

@@ -254,6 +254,7 @@ const Appbar = ({
         !theme.isV3 && { elevation },
       ]}
       elevation={elevation as MD3Elevation}
+      container
       {...rest}
     >
       {shouldAddLeftSpacing ? <View style={spacingStyle} /> : null}

src/components/Banner.tsx

@@ -194,6 +194,7 @@ const Banner = ({
       {...rest}
       style={[!theme.isV3 && styles.elevation, { opacity }, style]}
       theme={theme}
+      container
       {...(theme.isV3 && { elevation })}
     >
       <View style={[styles.wrapper, contentStyle]}>

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -574,6 +574,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
           : 'none'
       }
       onLayout={onLayout}
+      container
     >
       <Animated.View
         style={[styles.barContent, { backgroundColor }]}

src/components/Button/Button.tsx

@@ -350,6 +350,7 @@ const Button = (
         ] as Animated.WithAnimatedValue<StyleProp<ViewStyle>>
       }
       {...(isV3 && { elevation: elevation })}
+      container
     >
       <TouchableRipple
         borderless

src/components/Card/Card.tsx

@@ -304,6 +304,7 @@ const Card = (
         elevation: isMode('elevated') ? computedElevation : 0,
       })}
       testID={`${testID}-container`}
+      container
       {...rest}
     >
       {isMode('outlined') && (

src/components/Chip/Chip.tsx

@@ -316,6 +316,7 @@ const Chip = ({
       {...rest}
       testID={`${testID}-container`}
       theme={theme}
+      container
     >
       <TouchableRipple
         borderless

src/components/FAB/AnimatedFAB.tsx

@@ -404,6 +404,7 @@ const AnimatedFAB = ({
       ]}
       {...(isV3 && { elevation: md3Elevation })}
       theme={theme}
+      container
     >
       <Animated.View
         style={[

src/components/FAB/FAB.tsx

@@ -289,6 +289,7 @@ const FAB = forwardRef<View, Props>(
         pointerEvents={visible ? 'auto' : 'none'}
         testID={`${testID}-container`}
         {...(isV3 && { elevation: md3Elevation })}
+        container
       >
         <TouchableRipple
           borderless

src/components/IconButton/IconButton.tsx

@@ -181,6 +181,7 @@ const IconButton = forwardRef<View, Props>(
           !isV3 && disabled && styles.disabled,
           style,
         ]}
+        container
         {...(isV3 && { elevation: 0 })}
       >
         <TouchableRipple

src/components/Menu/Menu.tsx

@@ -675,6 +675,7 @@ const Menu = ({
                 {...(theme.isV3 && { elevation })}
                 testID={`${testID}-surface`}
                 theme={theme}
+                container
               >
                 {(scrollableMenuHeight && (
                   <ScrollView

src/components/Modal.tsx

@@ -220,6 +220,7 @@ function Modal({
           testID={`${testID}-surface`}
           theme={theme}
           style={[{ opacity }, styles.content, contentContainerStyle]}
+          container
         >
           {children}
         </Surface>

src/components/Searchbar.tsx

@@ -275,6 +275,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
         ]}
         testID={`${testID}-container`}
         {...(theme.isV3 && { elevation })}
+        container
         theme={theme}
       >
         <IconButton

src/components/Snackbar.tsx

@@ -321,6 +321,7 @@ const Snackbar = ({
           style,
         ]}
         testID={testID}
+        container
         {...(isV3 && { elevation })}
         {...rest}
       >

src/components/Surface.tsx

@@ -51,6 +51,10 @@ export type Props = Omit<React.ComponentPropsWithRef<typeof View>, 'style'> & {
    */
   testID?: string;
   ref?: React.RefObject<View>;
+  /**
+   * @internal
+   */
+  container?: boolean;
 };
 
 const MD2Surface = forwardRef<View, Props>(
@@ -161,6 +165,7 @@ const SurfaceIOS = forwardRef<
       testID,
       children,
       mode = 'elevated',
+      container,
       ...props
     },
     ref
@@ -202,12 +207,15 @@ const SurfaceIOS = forwardRef<
         ...(isElevated && getStyleForShadowLayer(elevation, 1)),
         ...filteredStyles,
         ...borderRadiusStyles,
-        flex: flattenedStyles.height || flattenedStyles.flex ? 1 : undefined,
+        flex:
+          flattenedStyles.height || (!container && flattenedStyles.flex)
+            ? 1
+            : undefined,
         backgroundColor: bgColor,
       };
 
       return [outerLayerViewStyles, innerLayerViewStyles];
-    }, [style, elevation, backgroundColor, mode]);
+    }, [style, elevation, backgroundColor, mode, container]);
 
     return (
       <Animated.View