feat: add tabBarSpacing property (#1142)

mlecoq · web-flow · commit 86e66d045730 · 2022-09-01T20:19:21.000+02:00
diff --git a/README.md b/README.md
@@ -518,6 +518,10 @@ Style to apply to the inner container for tabs.
 
 Style to apply to the tab bar container.
 
+### `gap`
+
+Define a spacing between tabs.
+
 ## Using with other libraries
 
 ### [React Navigation](https://github.com/react-navigation/react-navigation)
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -21,6 +21,7 @@ import TabBarIconExample from './TabBarIconExample';
 import CustomIndicatorExample from './CustomIndicatorExample';
 import CustomTabBarExample from './CustomTabBarExample';
 import CoverflowExample from './CoverflowExample';
+import TabBarGapExample from './TabBarGapExample';
 
 type State = {
   title: string;
@@ -47,6 +48,7 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   CustomIndicatorExample,
   CustomTabBarExample,
   CoverflowExample,
+  TabBarGapExample,
 ];
 
 const KeepAwake = () => {
diff --git a/example/src/TabBarGapExample.tsx b/example/src/TabBarGapExample.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  TabView,
+  TabBar,
+  SceneMap,
+  NavigationState,
+  SceneRendererProps,
+} from 'react-native-tab-view';
+import Article from './Shared/Article';
+import Albums from './Shared/Albums';
+import Chat from './Shared/Chat';
+import Contacts from './Shared/Contacts';
+
+type State = NavigationState<{
+  key: string;
+  title: string;
+}>;
+
+export default class TabBarGapExample extends React.Component<{}, State> {
+  // eslint-disable-next-line react/sort-comp
+  static title = 'Tab bar gap';
+  static backgroundColor = '#3f51b5';
+  static appbarElevation = 0;
+
+  state = {
+    index: 1,
+    routes: [
+      { key: 'article', title: 'Article' },
+      { key: 'contacts', title: 'Contacts' },
+      { key: 'albums', title: 'Albums' },
+      { key: 'chat', title: 'Chat ' },
+    ],
+  };
+
+  private handleIndexChange = (index: number) =>
+    this.setState({
+      index,
+    });
+
+  private renderTabBar = (
+    props: SceneRendererProps & { navigationState: State }
+  ) => (
+    <TabBar
+      {...props}
+      scrollEnabled
+      indicatorStyle={styles.indicator}
+      style={styles.tabbar}
+      tabStyle={styles.tab}
+      labelStyle={styles.label}
+      gap={40}
+    />
+  );
+
+  private renderScene = SceneMap({
+    albums: Albums,
+    contacts: Contacts,
+    article: Article,
+    chat: Chat,
+  });
+
+  render() {
+    return (
+      <TabView
+        lazy
+        navigationState={this.state}
+        renderScene={this.renderScene}
+        renderTabBar={this.renderTabBar}
+        onIndexChange={this.handleIndexChange}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  tabbar: {
+    backgroundColor: '#3f51b5',
+  },
+  tab: {
+    width: 'auto',
+  },
+  indicator: {
+    backgroundColor: '#ffeb3b',
+  },
+  label: {
+    fontWeight: '400',
+  },
+});
diff --git a/src/TabBar.tsx b/src/TabBar.tsx
@@ -59,13 +59,18 @@ export type Props<T extends Route> = SceneRendererProps & {
   labelStyle?: StyleProp<TextStyle>;
   contentContainerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
+  gap?: number;
 };
 
 type State = {
   layout: Layout;
   tabWidths: { [key: string]: number };
 };
 
+const Separator = ({ width }: { width: number }) => {
+  return <View style={{ width }} />;
+};
+
 export default class TabBar<T extends Route> extends React.Component<
   Props<T>,
   State
@@ -84,6 +89,7 @@ export default class TabBar<T extends Route> extends React.Component<
     renderIndicator: (props: IndicatorProps<Route>) => (
       <TabBarIndicator {...props} />
     ),
+    gap: 0,
   };
 
   state: State = {
@@ -175,6 +181,7 @@ export default class TabBar<T extends Route> extends React.Component<
     return routes.reduce<number>(
       (acc, _, i) =>
         acc +
+        (i > 0 ? props.gap ?? 0 : 0) +
         this.getComputedTabWidth(
           i,
           layout,
@@ -224,7 +231,12 @@ export default class TabBar<T extends Route> extends React.Component<
 
         // To get the current index centered we adjust scroll amount by width of indexes
         // 0 through (i - 1) and add half the width of current index i
-        return total + (index === i ? tabWidth / 2 : tabWidth);
+        return (
+          total +
+          (index === i
+            ? (tabWidth + (props.gap ?? 0)) / 2
+            : tabWidth + (props.gap ?? 0))
+        );
       },
       0
     );
@@ -299,12 +311,16 @@ export default class TabBar<T extends Route> extends React.Component<
       contentContainerStyle,
       style,
       indicatorContainerStyle,
+      gap = 0,
     } = this.props;
     const { layout, tabWidths } = this.state;
     const { routes } = navigationState;
 
     const isWidthDynamic = this.getFlattenedTabWidth(tabStyle) === 'auto';
     const tabBarWidth = this.getTabBarWidth(this.props, this.state);
+    const separatorsWidth = Math.max(0, routes.length - 1) * gap;
+    const separatorPercent = (separatorsWidth / tabBarWidth) * 100;
+
     const tabBarWidthPercent = `${routes.length * 40}%`;
     const translateX = this.getTranslateX(
       this.scrollAmount,
@@ -321,8 +337,8 @@ export default class TabBar<T extends Route> extends React.Component<
           style={[
             styles.indicatorContainer,
             scrollEnabled ? { transform: [{ translateX }] as any } : null,
-            tabBarWidth
-              ? { width: tabBarWidth }
+            tabBarWidth > separatorsWidth
+              ? { width: tabBarWidth - separatorsWidth }
               : scrollEnabled
               ? { width: tabBarWidthPercent }
               : null,
@@ -334,7 +350,9 @@ export default class TabBar<T extends Route> extends React.Component<
             layout,
             navigationState,
             jumpTo,
-            width: isWidthDynamic ? 'auto' : `${100 / routes.length}%`,
+            width: isWidthDynamic
+              ? 'auto'
+              : `${(100 - separatorPercent) / routes.length}%`,
             style: indicatorStyle,
             getTabWidth: (i: number) =>
               this.getComputedTabWidth(
@@ -345,6 +363,7 @@ export default class TabBar<T extends Route> extends React.Component<
                 tabWidths,
                 this.getFlattenedTabWidth(tabStyle)
               ),
+            gap,
           })}
         </Animated.View>
         <View style={styles.scroll}>
@@ -363,7 +382,12 @@ export default class TabBar<T extends Route> extends React.Component<
             contentContainerStyle={[
               styles.tabContent,
               scrollEnabled
-                ? { width: tabBarWidth || tabBarWidthPercent }
+                ? {
+                    width:
+                      tabBarWidth > separatorsWidth
+                        ? tabBarWidth
+                        : tabBarWidthPercent,
+                  }
                 : styles.container,
               contentContainerStyle,
             ]}
@@ -380,7 +404,7 @@ export default class TabBar<T extends Route> extends React.Component<
             )}
             ref={this.scrollViewRef}
           >
-            {routes.map((route: T) => {
+            {routes.map((route: T, index) => {
               const props: TabBarItemProps<T> & { key: string } = {
                 key: route.key,
                 position: position,
@@ -438,10 +462,15 @@ export default class TabBar<T extends Route> extends React.Component<
                 style: tabStyle,
               };
 
-              return renderTabBarItem ? (
-                renderTabBarItem(props)
-              ) : (
-                <TabBarItem {...props} />
+              return (
+                <React.Fragment key={route.key}>
+                  {gap > 0 && index > 0 ? <Separator width={gap} /> : null}
+                  {renderTabBarItem ? (
+                    renderTabBarItem(props)
+                  ) : (
+                    <TabBarItem {...props} />
+                  )}
+                </React.Fragment>
               );
             })}
           </Animated.ScrollView>
diff --git a/src/TabBarIndicator.tsx b/src/TabBarIndicator.tsx
@@ -18,6 +18,7 @@ export type Props<T extends Route> = SceneRendererProps & {
   width: string | number;
   style?: StyleProp<ViewStyle>;
   getTabWidth: GetTabWidth;
+  gap?: number;
 };
 
 export default class TabBarIndicator<T extends Route> extends React.Component<
@@ -59,14 +60,15 @@ export default class TabBarIndicator<T extends Route> extends React.Component<
   private getTranslateX = (
     position: Animated.AnimatedInterpolation,
     routes: Route[],
-    getTabWidth: GetTabWidth
+    getTabWidth: GetTabWidth,
+    gap?: number
   ) => {
     const inputRange = routes.map((_, i) => i);
 
     // every index contains widths at all previous indices
     const outputRange = routes.reduce<number[]>((acc, _, i) => {
       if (i === 0) return [0];
-      return [...acc, acc[i - 1] + getTabWidth(i - 1)];
+      return [...acc, acc[i - 1] + getTabWidth(i - 1) + (gap ?? 0)];
     }, []);
 
     const translateX = position.interpolate({
@@ -79,16 +81,23 @@ export default class TabBarIndicator<T extends Route> extends React.Component<
   };
 
   render() {
-    const { position, navigationState, getTabWidth, width, style, layout } =
-      this.props;
+    const {
+      position,
+      navigationState,
+      getTabWidth,
+      width,
+      style,
+      layout,
+      gap,
+    } = this.props;
     const { routes } = navigationState;
 
     const transform = [];
 
     if (layout.width) {
       const translateX =
         routes.length > 1
-          ? this.getTranslateX(position, routes, getTabWidth)
+          ? this.getTranslateX(position, routes, getTabWidth, gap)
           : 0;
 
       transform.push({ translateX });
