feat: add sceneContainerStyle prop to bottom-tabs navigator (#8947)

This feature adds the sceneContainerStyle prop to the bottom-tabs navigator, to allow setting styles on the container's view. It's already implemented in the material-top-tabs and drawer navigators, I've simply ported it into the bottom-tabs navigator.

It also fixes this issue:

https://github.com/react-navigation/react-navigation/issues/8076

Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>

packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx

@@ -23,6 +23,7 @@ function BottomTabNavigator({
   backBehavior,
   children,
   screenOptions,
+  sceneContainerStyle,
   ...rest
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
@@ -43,6 +44,7 @@ function BottomTabNavigator({
       state={state}
       navigation={navigation}
       descriptors={descriptors}
+      sceneContainerStyle={sceneContainerStyle}
     />
   );
 }

packages/bottom-tabs/src/types.tsx

@@ -170,6 +170,10 @@ export type BottomTabNavigationConfig<T = BottomTabBarOptions> = {
    * Options for the tab bar which will be passed as props to the tab bar component.
    */
   tabBarOptions?: T;
+  /**
+   * Style object for the component wrapping the screen content.
+   */
+  sceneContainerStyle?: StyleProp<ViewStyle>;
 };
 
 export type BottomTabBarOptions = {

packages/bottom-tabs/src/views/BottomTabView.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 {
   NavigationHelpersContext,
@@ -31,9 +31,11 @@ type State = {
 function SceneContent({
   isFocused,
   children,
+  style,
 }: {
   isFocused: boolean;
   children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
 }) {
   const { colors } = useTheme();
 
@@ -41,7 +43,7 @@ function SceneContent({
     <View
       accessibilityElementsHidden={!isFocused}
       importantForAccessibility={isFocused ? 'auto' : 'no-hide-descendants'}
-      style={[styles.content, { backgroundColor: colors.background }]}
+      style={[styles.content, { backgroundColor: colors.background }, style]}
     >
       {children}
     </View>
@@ -85,7 +87,13 @@ export default class BottomTabView extends React.Component<Props, State> {
   };
 
   render() {
-    const { state, descriptors, navigation, lazy } = this.props;
+    const {
+      state,
+      descriptors,
+      navigation,
+      lazy,
+      sceneContainerStyle,
+    } = this.props;
     const { routes } = state;
     const { loaded } = this.state;
 
@@ -114,7 +122,10 @@ export default class BottomTabView extends React.Component<Props, State> {
                     style={StyleSheet.absoluteFill}
                     isVisible={isFocused}
                   >
-                    <SceneContent isFocused={isFocused}>
+                    <SceneContent
+                      isFocused={isFocused}
+                      style={sceneContainerStyle}
+                    >
                       {descriptor.render()}
                     </SceneContent>
                   </ResourceSavingScene>