feat: add a Background component

example/ios/ReactNavigation.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

packages/bottom-tabs/src/views/BottomTabView.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { ScreenContainer } from 'react-native-screens';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 import {
   NavigationHelpersContext,
   ParamListBase,
   TabNavigationState,
-  useTheme,
 } from '@react-navigation/native';
 import {
   Header,
@@ -34,28 +33,6 @@ type Props = BottomTabNavigationConfig & {
   descriptors: BottomTabDescriptorMap;
 };
 
-function SceneContent({
-  isFocused,
-  children,
-  style,
-}: {
-  isFocused: boolean;
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-}) {
-  const { colors } = useTheme();
-
-  return (
-    <View
-      accessibilityElementsHidden={!isFocused}
-      importantForAccessibility={isFocused ? 'auto' : 'no-hide-descendants'}
-      style={[styles.content, { backgroundColor: colors.background }, style]}
-    >
-      {children}
-    </View>
-  );
-}
-
 export default function BottomTabView(props: Props) {
   const {
     tabBar = (props: BottomTabBarProps) => <BottomTabBar {...props} />,
@@ -150,26 +127,26 @@ export default function BottomTabView(props: Props) {
                 visible={isFocused}
                 enabled={detachInactiveScreens}
               >
-                <SceneContent isFocused={isFocused} style={sceneContainerStyle}>
-                  <BottomTabBarHeightContext.Provider value={tabBarHeight}>
-                    <Screen
-                      route={descriptor.route}
-                      navigation={descriptor.navigation}
-                      headerShown={descriptor.options.headerShown}
-                      headerStatusBarHeight={
-                        descriptor.options.headerStatusBarHeight
-                      }
-                      header={header({
-                        layout: dimensions,
-                        route: descriptor.route,
-                        navigation: descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
-                        options: descriptor.options,
-                      })}
-                    >
-                      {descriptor.render()}
-                    </Screen>
-                  </BottomTabBarHeightContext.Provider>
-                </SceneContent>
+                <BottomTabBarHeightContext.Provider value={tabBarHeight}>
+                  <Screen
+                    focused={isFocused}
+                    route={descriptor.route}
+                    navigation={descriptor.navigation}
+                    headerShown={descriptor.options.headerShown}
+                    headerStatusBarHeight={
+                      descriptor.options.headerStatusBarHeight
+                    }
+                    header={header({
+                      layout: dimensions,
+                      route: descriptor.route,
+                      navigation: descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
+                      options: descriptor.options,
+                    })}
+                    style={sceneContainerStyle}
+                  >
+                    {descriptor.render()}
+                  </Screen>
+                </BottomTabBarHeightContext.Provider>
               </ScreenFallback>
             );
           })}
@@ -187,7 +164,4 @@ const styles = StyleSheet.create({
     flex: 1,
     overflow: 'hidden',
   },
-  content: {
-    flex: 1,
-  },
 });

packages/drawer/src/views/Drawer.tsx

@@ -93,7 +93,6 @@ type Props = {
   statusBarAnimation: 'slide' | 'none' | 'fade';
   overlayStyle?: StyleProp<ViewStyle>;
   drawerStyle?: StyleProp<ViewStyle>;
-  sceneContainerStyle?: StyleProp<ViewStyle>;
   renderDrawerContent: Renderer;
   renderSceneContent: Renderer;
   gestureHandlerProps?: React.ComponentProps<typeof PanGestureHandler>;
@@ -573,7 +572,6 @@ export default class DrawerView extends React.Component<Props> {
       drawerPosition,
       drawerType,
       swipeEdgeWidth,
-      sceneContainerStyle,
       drawerStyle,
       overlayStyle,
       renderDrawerContent,
@@ -642,7 +640,6 @@ export default class DrawerView extends React.Component<Props> {
             style={[
               styles.content,
               { transform: [{ translateX: contentTranslateX }] },
-              sceneContainerStyle as any,
             ]}
           >
             <View

packages/drawer/src/views/DrawerView.tsx

@@ -89,7 +89,6 @@ function DrawerViewBase({
     gestureHandlerProps,
     keyboardDismissMode = 'on-drag',
     overlayColor = 'rgba(0, 0, 0, 0.5)',
-    sceneContainerStyle,
     swipeEdgeWidth,
     swipeEnabled,
     swipeMinDistance,
@@ -181,6 +180,7 @@ function DrawerViewBase({
                 }
               />
             ),
+            sceneContainerStyle,
           } = descriptor.options;
 
           return (
@@ -191,6 +191,7 @@ function DrawerViewBase({
               enabled={detachInactiveScreens}
             >
               <Screen
+                focused={isFocused}
                 route={descriptor.route}
                 navigation={descriptor.navigation}
                 headerShown={descriptor.options.headerShown}
@@ -201,6 +202,7 @@ function DrawerViewBase({
                   navigation: descriptor.navigation as DrawerNavigationProp<ParamListBase>,
                   options: descriptor.options,
                 })}
+                style={sceneContainerStyle}
               >
                 {descriptor.render()}
               </Screen>
@@ -222,10 +224,6 @@ function DrawerViewBase({
         gestureHandlerProps={gestureHandlerProps}
         drawerType={drawerType}
         drawerPosition={drawerPosition}
-        sceneContainerStyle={[
-          { backgroundColor: colors.background },
-          sceneContainerStyle,
-        ]}
         drawerStyle={[
           {
             width: getDefaultDrawerWidth(dimensions),

packages/elements/src/Background.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+import { useTheme } from '@react-navigation/native';
+
+type Props = ViewProps & {
+  children: React.ReactNode;
+};
+
+export default function Background({ style, ...rest }: Props) {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      {...rest}
+      style={[{ flex: 1, backgroundColor: colors.background }, style]}
+    />
+  );
+}

packages/elements/src/Screen.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import {
   useSafeAreaFrame,
   useSafeAreaInsets,
@@ -12,16 +12,19 @@ import {
   ParamListBase,
 } from '@react-navigation/native';
 
+import Background from './Background';
 import HeaderShownContext from './Header/HeaderShownContext';
 import HeaderHeightContext from './Header/HeaderHeightContext';
 import getDefaultHeaderHeight from './Header/getDefaultHeaderHeight';
 
 type Props = {
+  focused: boolean;
   navigation: NavigationProp<ParamListBase>;
   route: RouteProp<ParamListBase, string>;
   header: React.ReactNode;
   headerShown?: boolean;
   headerStatusBarHeight?: number;
+  style?: StyleProp<ViewStyle>;
   children: React.ReactNode;
 };
 
@@ -33,12 +36,14 @@ export default function Screen(props: Props) {
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
 
   const {
+    focused,
     header,
     headerShown = true,
     headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
-    children,
     navigation,
     route,
+    children,
+    style,
   } = props;
 
   const [headerHeight, setHeaderHeight] = React.useState(() =>
@@ -46,7 +51,11 @@ export default function Screen(props: Props) {
   );
 
   return (
-    <View style={styles.container}>
+    <Background
+      accessibilityElementsHidden={!focused}
+      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      style={[styles.container, style]}
+    >
       <View style={styles.content}>
         <HeaderShownContext.Provider
           value={isParentHeaderShown || headerShown !== false}
@@ -73,7 +82,7 @@ export default function Screen(props: Props) {
           </NavigationRouteContext.Provider>
         </NavigationContext.Provider>
       ) : null}
-    </View>
+    </Background>
   );
 }
 

packages/elements/src/index.tsx

@@ -14,6 +14,7 @@ export { default as PlatformPressable } from './PlatformPressable';
 export { default as ResourceSavingView } from './ResourceSavingView';
 export { default as SafeAreaProviderCompat } from './SafeAreaProviderCompat';
 export { default as Screen } from './Screen';
+export { default as Background } from './Background';
 
 export const Assets = [
   // eslint-disable-next-line import/no-commonjs

packages/stack/src/views/Stack/CardStack.tsx

@@ -15,6 +15,7 @@ import type {
 import {
   getDefaultHeaderHeight,
   SafeAreaProviderCompat,
+  Background,
 } from '@react-navigation/elements';
 
 import {
@@ -467,7 +468,7 @@ export default class CardStack extends React.Component<Props, State> {
     );
 
     return (
-      <React.Fragment>
+      <Background>
         {isFloatHeaderAbsolute ? null : floatingHeader}
         <MaybeScreenContainer
           enabled={detachInactiveScreens}
@@ -655,7 +656,7 @@ export default class CardStack extends React.Component<Props, State> {
           })}
         </MaybeScreenContainer>
         {isFloatHeaderAbsolute ? floatingHeader : null}
-      </React.Fragment>
+      </Background>
     );
   }
 }