react-native-tab-view 3.1.1 → 3.2.1

package/src/TabBar.tsx

@@ -3,13 +3,14 @@ import {
   Animated,
   StyleSheet,
   View,
-  ScrollView,
   StyleProp,
   ViewStyle,
   TextStyle,
   LayoutChangeEvent,
   I18nManager,
   Platform,
+  FlatList,
+  ListRenderItemInfo,
 } from 'react-native';
 import TabBarItem, { Props as TabBarItemProps } from './TabBarItem';
 import TabBarIndicator, { Props as IndicatorProps } from './TabBarIndicator';
@@ -59,6 +60,7 @@ export type Props<T extends Route> = SceneRendererProps & {
   labelStyle?: StyleProp<TextStyle>;
   contentContainerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
+  gap?: number;
 };
 
 type State = {
@@ -66,6 +68,10 @@ type State = {
   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 +90,7 @@ export default class TabBar<T extends Route> extends React.Component<
     renderIndicator: (props: IndicatorProps<Route>) => (
       <TabBarIndicator {...props} />
     ),
+    gap: 0,
   };
 
   state: State = {
@@ -125,7 +132,7 @@ export default class TabBar<T extends Route> extends React.Component<
 
   private scrollAmount = new Animated.Value(0);
 
-  private scrollViewRef = React.createRef<ScrollView>();
+  private flatListRef = React.createRef<FlatList>();
 
   private getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {
     const tabStyle = StyleSheet.flatten(style);
@@ -160,7 +167,6 @@ export default class TabBar<T extends Route> extends React.Component<
     if (scrollEnabled) {
       return (layout.width / 5) * 2;
     }
-
     return layout.width / routes.length;
   };
 
@@ -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
     );
@@ -236,8 +248,8 @@ export default class TabBar<T extends Route> extends React.Component<
 
   private resetScroll = (index: number) => {
     if (this.props.scrollEnabled) {
-      this.scrollViewRef.current?.scrollTo({
-        x: this.getScrollAmount(this.props, this.state, index),
+      this.flatListRef.current?.scrollToOffset({
+        offset: this.getScrollAmount(this.props, this.state, index),
         animated: true,
       });
     }
@@ -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,10 +363,13 @@ export default class TabBar<T extends Route> extends React.Component<
                 tabWidths,
                 this.getFlattenedTabWidth(tabStyle)
               ),
+            gap,
           })}
         </Animated.View>
         <View style={styles.scroll}>
-          <Animated.ScrollView
+          <Animated.FlatList
+            data={routes as Animated.WithAnimatedValue<T>[]}
+            keyExtractor={(item) => item.key}
             horizontal
             accessibilityRole="tablist"
             keyboardShouldPersistTaps="handled"
@@ -357,29 +378,23 @@ export default class TabBar<T extends Route> extends React.Component<
             alwaysBounceHorizontal={false}
             scrollsToTop={false}
             showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
             automaticallyAdjustContentInsets={false}
             overScrollMode="never"
             contentContainerStyle={[
               styles.tabContent,
               scrollEnabled
-                ? { width: tabBarWidth || tabBarWidthPercent }
+                ? {
+                    width:
+                      tabBarWidth > separatorsWidth
+                        ? tabBarWidth
+                        : tabBarWidthPercent,
+                  }
                 : styles.container,
               contentContainerStyle,
             ]}
             scrollEventThrottle={16}
-            onScroll={Animated.event(
-              [
-                {
-                  nativeEvent: {
-                    contentOffset: { x: this.scrollAmount },
-                  },
-                },
-              ],
-              { useNativeDriver: true }
-            )}
-            ref={this.scrollViewRef}
-          >
-            {routes.map((route: T) => {
+            renderItem={({ item: route, index }: ListRenderItemInfo<T>) => {
               const props: TabBarItemProps<T> & { key: string } = {
                 key: route.key,
                 position: position,
@@ -434,16 +449,45 @@ export default class TabBar<T extends Route> extends React.Component<
                 },
                 onLongPress: () => onTabLongPress?.({ route }),
                 labelStyle: labelStyle,
-                style: tabStyle,
+                style: [
+                  tabStyle,
+                  // Calculate the deafult width for tab for FlatList to work.
+                  this.getFlattenedTabWidth(tabStyle) === undefined && {
+                    width: this.getComputedTabWidth(
+                      index,
+                      layout,
+                      routes,
+                      scrollEnabled,
+                      tabWidths,
+                      this.getFlattenedTabWidth(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>
+            }}
+            onScroll={Animated.event(
+              [
+                {
+                  nativeEvent: {
+                    contentOffset: { x: this.scrollAmount },
+                  },
+                },
+              ],
+              { useNativeDriver: true }
+            )}
+            ref={this.flatListRef}
+          />
         </View>
       </Animated.View>
     );

package/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,8 +81,15 @@ 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 = [];
@@ -88,7 +97,7 @@ export default class TabBarIndicator<T extends Route> extends React.Component<
     if (layout.width) {
       const translateX =
         routes.length > 1
-          ? this.getTranslateX(position, routes, getTabWidth)
+          ? this.getTranslateX(position, routes, getTabWidth, gap)
           : 0;
 
       transform.push({ translateX });

package/src/TabView.tsx

@@ -30,6 +30,7 @@ export type Props<T extends Route> = PagerProps & {
   lazy?: ((props: { route: T }) => boolean) | boolean;
   lazyPreloadDistance?: number;
   sceneContainerStyle?: StyleProp<ViewStyle>;
+  pagerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
 };
 
@@ -46,9 +47,11 @@ export default function TabView<T extends Route>({
   renderLazyPlaceholder = () => null,
   renderTabBar = (props) => <TabBar {...props} />,
   sceneContainerStyle,
+  pagerStyle,
   style,
   swipeEnabled = true,
   tabBarPosition = 'top',
+  animationEnabled = true,
 }: Props<T>) {
   const [layout, setLayout] = React.useState({
     width: 0,
@@ -84,6 +87,8 @@ export default function TabView<T extends Route>({
         onSwipeStart={onSwipeStart}
         onSwipeEnd={onSwipeEnd}
         onIndexChange={jumpToIndex}
+        animationEnabled={animationEnabled}
+        style={pagerStyle}
       >
         {({ position, render, addEnterListener, jumpTo }) => {
           // All of the props here must not change between re-renders

package/src/types.tsx

@@ -53,6 +53,7 @@ export type PagerProps = Omit<
 > & {
   keyboardDismissMode?: 'none' | 'on-drag' | 'auto';
   swipeEnabled?: boolean;
+  animationEnabled?: boolean;
   onSwipeStart?: () => void;
   onSwipeEnd?: () => void;
 };