feat: property on scrollable MaterialTabBar to keep tab in the center

PedroBern · May 4, 2022 · 6d35e31 · 6d35e31
1 parent 41fb49b
commit 6d35e31
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/MaterialTabBar/TabBar.tsx b/src/MaterialTabBar/TabBar.tsx
@@ -58,6 +58,7 @@ const MaterialTabBar = <T extends TabName = any>({
   activeColor,
   tabStyle,
   width: customWidth,
+  keepActiveTabCentered,
 }: MaterialTabBarProps<T>): React.ReactElement => {
   const tabBarRef = useAnimatedRef<Animated.ScrollView>()
   const windowWidth = useWindowDimensions().width
@@ -167,6 +168,7 @@ const MaterialTabBar = <T extends TabName = any>({
         const halfTab = itemsLayout[index.value].width / 2
         const offset = itemsLayout[index.value].x
         if (
+          keepActiveTabCentered ||
           offset < tabsOffset.value ||
           offset > tabsOffset.value + width - 2 * halfTab
         ) {

diff --git a/src/MaterialTabBar/types.ts b/src/MaterialTabBar/types.ts
@@ -84,6 +84,11 @@ export type MaterialTabBarProps<N extends TabName> = TabBarProps<N> & {
    * Custom width of the tabbar. Defaults to the window width.
    */
   width?: number
+
+  /**
+   * Whether to keep the currently active tab centered in a scrollable tab bar
+   */
+  keepActiveTabCentered?: boolean
 }
 
 export type ItemLayout = {