fix: add container prop and improve flex/layout handling (#4742)

Author: lukewalczak

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