feat: expose tabBarGap option in material top tabs (#11038)

the new `tabBarGap` option helps to configure `gap` option of `react-native-tab-view` : see https://github.com/react-navigation/react-navigation/tree/main/packages/react-native-tab-view#gap
react-navigation · Nov 28, 2022 · 29818a8 · 29818a8
1 parent 61ffc24
commit 29818a8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/material-top-tabs/src/types.tsx b/packages/material-top-tabs/src/types.tsx
@@ -195,6 +195,11 @@ export type MaterialTopTabNavigationOptions = {
    */
   tabBarStyle?: StyleProp<ViewStyle>;
 
+  /**
+   * Gap between tabs
+   */
+  tabBarGap?: number;
+
   /**
    * Whether to enable swipe gestures when this screen is focused.
    * Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,

diff --git a/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx b/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx
@@ -41,6 +41,7 @@ export default function TabBarTop({
         { backgroundColor: colors.primary },
         focusedOptions.tabBarIndicatorStyle,
       ]}
+      gap={focusedOptions.tabBarGap}
       indicatorContainerStyle={focusedOptions.tabBarIndicatorContainerStyle}
       contentContainerStyle={focusedOptions.tabBarContentContainerStyle}
       style={[{ backgroundColor: colors.card }, focusedOptions.tabBarStyle]}