feat: add ability to override bottom tab sideContent styles

react-navigation · Apr 5, 2024 · bddbdb0 · bddbdb0
1 parent d90ed76
commit bddbdb0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx
@@ -227,6 +227,11 @@ export type BottomTabNavigationOptions = HeaderOptions & {
    */
   tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 
+  /**
+   * Style object for the tab bar content container.
+   */
+  tabBarContentStyle?: StyleProp<ViewStyle>;
+
   /**
    * Function which returns a React Element to use as background for the tab bar.
    * You could render an image, a gradient, blur view etc.

diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -155,6 +155,7 @@ export function BottomTabBar({
     tabBarHideOnKeyboard = false,
     tabBarVisibilityAnimationConfig,
     tabBarStyle,
+    tabBarContentStyle,
     tabBarBackground,
     tabBarActiveTintColor,
     tabBarInactiveTintColor,
@@ -332,7 +333,10 @@ export function BottomTabBar({
       </View>
       <View
         accessibilityRole="tablist"
-        style={tabBarIsHorizontal ? styles.bottomContent : styles.sideContent}
+        style={[
+          tabBarIsHorizontal ? styles.bottomContent : styles.sideContent,
+          tabBarContentStyle,
+        ]}
       >
         {routes.map((route, index) => {
           const focused = index === state.index;