react-native-tab-view 3.1.1 → 3.2.0

package/lib/module/TabBarItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TabBarItem.tsx"],"names":["React","Animated","StyleSheet","View","PlatformPressable","DEFAULT_ACTIVE_COLOR","DEFAULT_INACTIVE_COLOR","TabBarItem","Component","position","routes","tabIndex","length","inputRange","map","_","i","interpolate","outputRange","render","route","navigationState","renderLabel","renderLabelCustom","renderIcon","renderBadge","getLabelText","getTestID","getAccessibilityLabel","getAccessible","activeColor","activeColorCustom","inactiveColor","inactiveColorCustom","pressColor","pressOpacity","labelStyle","style","onLayout","onPress","onLongPress","props","indexOf","isFocused","index","labelColorFromStyle","flatten","color","undefined","activeOpacity","getActiveOpacity","inactiveOpacity","getInactiveOpacity","icon","label","activeIcon","focused","inactiveIcon","styles","opacity","absoluteFill","labelText","marginTop","activeLabel","inactiveLabel","tabStyle","isWidthSet","width","tabContainerStyle","flex","scene","accessibilityLabel","badge","borderless","selected","pressable","item","create","margin","backgroundColor","textTransform","alignItems","justifyContent","padding","minHeight","top","right"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  Animated,\n  StyleSheet,\n  View,\n  StyleProp,\n  LayoutChangeEvent,\n  TextStyle,\n  ViewStyle,\n} from 'react-native';\nimport PlatformPressable from './PlatformPressable';\nimport type { Scene, Route, NavigationState } from './types';\n\nexport type Props<T extends Route> = {\n  position: Animated.AnimatedInterpolation;\n  route: T;\n  navigationState: NavigationState<T>;\n  activeColor?: string;\n  inactiveColor?: string;\n  pressColor?: string;\n  pressOpacity?: number;\n  getLabelText: (scene: Scene<T>) => string | undefined;\n  getAccessible: (scene: Scene<T>) => boolean | undefined;\n  getAccessibilityLabel: (scene: Scene<T>) => string | undefined;\n  getTestID: (scene: Scene<T>) => string | undefined;\n  renderLabel?: (scene: {\n    route: T;\n    focused: boolean;\n    color: string;\n  }) => React.ReactNode;\n  renderIcon?: (scene: {\n    route: T;\n    focused: boolean;\n    color: string;\n  }) => React.ReactNode;\n  renderBadge?: (scene: Scene<T>) => React.ReactNode;\n  onLayout?: (event: LayoutChangeEvent) => void;\n  onPress: () => void;\n  onLongPress: () => void;\n  labelStyle?: StyleProp<TextStyle>;\n  style: StyleProp<ViewStyle>;\n};\n\nconst DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';\nconst DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';\n\nexport default class TabBarItem<T extends Route> extends React.Component<\n  Props<T>\n> {\n  private getActiveOpacity = (\n    position: Animated.AnimatedInterpolation,\n    routes: Route[],\n    tabIndex: number\n  ) => {\n    if (routes.length > 1) {\n      const inputRange = routes.map((_, i) => i);\n\n      return position.interpolate({\n        inputRange,\n        outputRange: inputRange.map((i) => (i === tabIndex ? 1 : 0)),\n      });\n    } else {\n      return 1;\n    }\n  };\n\n  private getInactiveOpacity = (\n    position: Animated.AnimatedInterpolation,\n    routes: Route[],\n    tabIndex: number\n  ) => {\n    if (routes.length > 1) {\n      const inputRange = routes.map((_: Route, i: number) => i);\n\n      return position.interpolate({\n        inputRange,\n        outputRange: inputRange.map((i: number) => (i === tabIndex ? 0 : 1)),\n      });\n    } else {\n      return 0;\n    }\n  };\n\n  render() {\n    const {\n      route,\n      position,\n      navigationState,\n      renderLabel: renderLabelCustom,\n      renderIcon,\n      renderBadge,\n      getLabelText,\n      getTestID,\n      getAccessibilityLabel,\n      getAccessible,\n      activeColor: activeColorCustom,\n      inactiveColor: inactiveColorCustom,\n      pressColor,\n      pressOpacity,\n      labelStyle,\n      style,\n      onLayout,\n      onPress,\n      onLongPress,\n    } = this.props;\n\n    const tabIndex = navigationState.routes.indexOf(route);\n    const isFocused = navigationState.index === tabIndex;\n\n    const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;\n\n    const activeColor =\n      activeColorCustom !== undefined\n        ? activeColorCustom\n        : typeof labelColorFromStyle === 'string'\n        ? labelColorFromStyle\n        : DEFAULT_ACTIVE_COLOR;\n    const inactiveColor =\n      inactiveColorCustom !== undefined\n        ? inactiveColorCustom\n        : typeof labelColorFromStyle === 'string'\n        ? labelColorFromStyle\n        : DEFAULT_INACTIVE_COLOR;\n\n    const activeOpacity = this.getActiveOpacity(\n      position,\n      navigationState.routes,\n      tabIndex\n    );\n    const inactiveOpacity = this.getInactiveOpacity(\n      position,\n      navigationState.routes,\n      tabIndex\n    );\n\n    let icon: React.ReactNode | null = null;\n    let label: React.ReactNode | null = null;\n\n    if (renderIcon) {\n      const activeIcon = renderIcon({\n        route,\n        focused: true,\n        color: activeColor,\n      });\n      const inactiveIcon = renderIcon({\n        route,\n        focused: false,\n        color: inactiveColor,\n      });\n\n      if (inactiveIcon != null && activeIcon != null) {\n        icon = (\n          <View style={styles.icon}>\n            <Animated.View style={{ opacity: inactiveOpacity }}>\n              {inactiveIcon}\n            </Animated.View>\n            <Animated.View\n              style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}\n            >\n              {activeIcon}\n            </Animated.View>\n          </View>\n        );\n      }\n    }\n\n    const renderLabel =\n      renderLabelCustom !== undefined\n        ? renderLabelCustom\n        : ({ route, color }: { route: T; color: string }) => {\n            const labelText = getLabelText({ route });\n\n            if (typeof labelText === 'string') {\n              return (\n                <Animated.Text\n                  style={[\n                    styles.label,\n                    icon ? { marginTop: 0 } : null,\n                    labelStyle,\n                    { color },\n                  ]}\n                >\n                  {labelText}\n                </Animated.Text>\n              );\n            }\n\n            return labelText;\n          };\n\n    if (renderLabel) {\n      const activeLabel = renderLabel({\n        route,\n        focused: true,\n        color: activeColor,\n      });\n      const inactiveLabel = renderLabel({\n        route,\n        focused: false,\n        color: inactiveColor,\n      });\n\n      label = (\n        <View>\n          <Animated.View style={{ opacity: inactiveOpacity }}>\n            {inactiveLabel}\n          </Animated.View>\n          <Animated.View\n            style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}\n          >\n            {activeLabel}\n          </Animated.View>\n        </View>\n      );\n    }\n\n    const tabStyle = StyleSheet.flatten(style);\n    const isWidthSet = tabStyle?.width !== undefined;\n    const tabContainerStyle: ViewStyle | null = isWidthSet ? null : { flex: 1 };\n\n    const scene = { route };\n\n    let accessibilityLabel = getAccessibilityLabel(scene);\n\n    accessibilityLabel =\n      typeof accessibilityLabel !== 'undefined'\n        ? accessibilityLabel\n        : getLabelText(scene);\n\n    const badge = renderBadge ? renderBadge(scene) : null;\n\n    return (\n      <PlatformPressable\n        android_ripple={{ borderless: true }}\n        testID={getTestID(scene)}\n        accessible={getAccessible(scene)}\n        accessibilityLabel={accessibilityLabel}\n        accessibilityRole=\"tab\"\n        accessibilityState={{ selected: isFocused }}\n        // @ts-ignore: this is to support older React Native versions\n        accessibilityStates={isFocused ? ['selected'] : []}\n        pressColor={pressColor}\n        pressOpacity={pressOpacity}\n        delayPressIn={0}\n        onLayout={onLayout}\n        onPress={onPress}\n        onLongPress={onLongPress}\n        style={[styles.pressable, tabContainerStyle]}\n      >\n        <View pointerEvents=\"none\" style={[styles.item, tabStyle]}>\n          {icon}\n          {label}\n          {badge != null ? <View style={styles.badge}>{badge}</View> : null}\n        </View>\n      </PlatformPressable>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  label: {\n    margin: 4,\n    backgroundColor: 'transparent',\n    textTransform: 'uppercase',\n  },\n  icon: {\n    margin: 2,\n  },\n  item: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: 10,\n    minHeight: 48,\n  },\n  badge: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n  },\n  pressable: {\n    // The label is not pressable on Windows\n    // Adding backgroundColor: 'transparent' seems to fix it\n    backgroundColor: 'transparent',\n  },\n});\n"]}
+{"version":3,"names":["React","Animated","StyleSheet","View","PlatformPressable","DEFAULT_ACTIVE_COLOR","DEFAULT_INACTIVE_COLOR","TabBarItem","Component","position","routes","tabIndex","length","inputRange","map","_","i","interpolate","outputRange","render","route","navigationState","renderLabel","renderLabelCustom","renderIcon","renderBadge","getLabelText","getTestID","getAccessibilityLabel","getAccessible","activeColor","activeColorCustom","inactiveColor","inactiveColorCustom","pressColor","pressOpacity","labelStyle","style","onLayout","onPress","onLongPress","props","indexOf","isFocused","index","labelColorFromStyle","flatten","color","undefined","activeOpacity","getActiveOpacity","inactiveOpacity","getInactiveOpacity","icon","label","activeIcon","focused","inactiveIcon","styles","opacity","absoluteFill","labelText","marginTop","activeLabel","inactiveLabel","tabStyle","isWidthSet","width","tabContainerStyle","flex","scene","accessibilityLabel","badge","borderless","selected","pressable","item","create","margin","backgroundColor","textTransform","alignItems","justifyContent","padding","minHeight","top","right"],"sources":["TabBarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Animated,\n  StyleSheet,\n  View,\n  StyleProp,\n  LayoutChangeEvent,\n  TextStyle,\n  ViewStyle,\n} from 'react-native';\nimport PlatformPressable from './PlatformPressable';\nimport type { Scene, Route, NavigationState } from './types';\n\nexport type Props<T extends Route> = {\n  position: Animated.AnimatedInterpolation;\n  route: T;\n  navigationState: NavigationState<T>;\n  activeColor?: string;\n  inactiveColor?: string;\n  pressColor?: string;\n  pressOpacity?: number;\n  getLabelText: (scene: Scene<T>) => string | undefined;\n  getAccessible: (scene: Scene<T>) => boolean | undefined;\n  getAccessibilityLabel: (scene: Scene<T>) => string | undefined;\n  getTestID: (scene: Scene<T>) => string | undefined;\n  renderLabel?: (scene: {\n    route: T;\n    focused: boolean;\n    color: string;\n  }) => React.ReactNode;\n  renderIcon?: (scene: {\n    route: T;\n    focused: boolean;\n    color: string;\n  }) => React.ReactNode;\n  renderBadge?: (scene: Scene<T>) => React.ReactNode;\n  onLayout?: (event: LayoutChangeEvent) => void;\n  onPress: () => void;\n  onLongPress: () => void;\n  labelStyle?: StyleProp<TextStyle>;\n  style: StyleProp<ViewStyle>;\n};\n\nconst DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';\nconst DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';\n\nexport default class TabBarItem<T extends Route> extends React.Component<\n  Props<T>\n> {\n  private getActiveOpacity = (\n    position: Animated.AnimatedInterpolation,\n    routes: Route[],\n    tabIndex: number\n  ) => {\n    if (routes.length > 1) {\n      const inputRange = routes.map((_, i) => i);\n\n      return position.interpolate({\n        inputRange,\n        outputRange: inputRange.map((i) => (i === tabIndex ? 1 : 0)),\n      });\n    } else {\n      return 1;\n    }\n  };\n\n  private getInactiveOpacity = (\n    position: Animated.AnimatedInterpolation,\n    routes: Route[],\n    tabIndex: number\n  ) => {\n    if (routes.length > 1) {\n      const inputRange = routes.map((_: Route, i: number) => i);\n\n      return position.interpolate({\n        inputRange,\n        outputRange: inputRange.map((i: number) => (i === tabIndex ? 0 : 1)),\n      });\n    } else {\n      return 0;\n    }\n  };\n\n  render() {\n    const {\n      route,\n      position,\n      navigationState,\n      renderLabel: renderLabelCustom,\n      renderIcon,\n      renderBadge,\n      getLabelText,\n      getTestID,\n      getAccessibilityLabel,\n      getAccessible,\n      activeColor: activeColorCustom,\n      inactiveColor: inactiveColorCustom,\n      pressColor,\n      pressOpacity,\n      labelStyle,\n      style,\n      onLayout,\n      onPress,\n      onLongPress,\n    } = this.props;\n\n    const tabIndex = navigationState.routes.indexOf(route);\n    const isFocused = navigationState.index === tabIndex;\n\n    const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;\n\n    const activeColor =\n      activeColorCustom !== undefined\n        ? activeColorCustom\n        : typeof labelColorFromStyle === 'string'\n        ? labelColorFromStyle\n        : DEFAULT_ACTIVE_COLOR;\n    const inactiveColor =\n      inactiveColorCustom !== undefined\n        ? inactiveColorCustom\n        : typeof labelColorFromStyle === 'string'\n        ? labelColorFromStyle\n        : DEFAULT_INACTIVE_COLOR;\n\n    const activeOpacity = this.getActiveOpacity(\n      position,\n      navigationState.routes,\n      tabIndex\n    );\n    const inactiveOpacity = this.getInactiveOpacity(\n      position,\n      navigationState.routes,\n      tabIndex\n    );\n\n    let icon: React.ReactNode | null = null;\n    let label: React.ReactNode | null = null;\n\n    if (renderIcon) {\n      const activeIcon = renderIcon({\n        route,\n        focused: true,\n        color: activeColor,\n      });\n      const inactiveIcon = renderIcon({\n        route,\n        focused: false,\n        color: inactiveColor,\n      });\n\n      if (inactiveIcon != null && activeIcon != null) {\n        icon = (\n          <View style={styles.icon}>\n            <Animated.View style={{ opacity: inactiveOpacity }}>\n              {inactiveIcon}\n            </Animated.View>\n            <Animated.View\n              style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}\n            >\n              {activeIcon}\n            </Animated.View>\n          </View>\n        );\n      }\n    }\n\n    const renderLabel =\n      renderLabelCustom !== undefined\n        ? renderLabelCustom\n        : ({ route, color }: { route: T; color: string }) => {\n            const labelText = getLabelText({ route });\n\n            if (typeof labelText === 'string') {\n              return (\n                <Animated.Text\n                  style={[\n                    styles.label,\n                    icon ? { marginTop: 0 } : null,\n                    labelStyle,\n                    { color },\n                  ]}\n                >\n                  {labelText}\n                </Animated.Text>\n              );\n            }\n\n            return labelText;\n          };\n\n    if (renderLabel) {\n      const activeLabel = renderLabel({\n        route,\n        focused: true,\n        color: activeColor,\n      });\n      const inactiveLabel = renderLabel({\n        route,\n        focused: false,\n        color: inactiveColor,\n      });\n\n      label = (\n        <View>\n          <Animated.View style={{ opacity: inactiveOpacity }}>\n            {inactiveLabel}\n          </Animated.View>\n          <Animated.View\n            style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}\n          >\n            {activeLabel}\n          </Animated.View>\n        </View>\n      );\n    }\n\n    const tabStyle = StyleSheet.flatten(style);\n    const isWidthSet = tabStyle?.width !== undefined;\n    const tabContainerStyle: ViewStyle | null = isWidthSet ? null : { flex: 1 };\n\n    const scene = { route };\n\n    let accessibilityLabel = getAccessibilityLabel(scene);\n\n    accessibilityLabel =\n      typeof accessibilityLabel !== 'undefined'\n        ? accessibilityLabel\n        : getLabelText(scene);\n\n    const badge = renderBadge ? renderBadge(scene) : null;\n\n    return (\n      <PlatformPressable\n        android_ripple={{ borderless: true }}\n        testID={getTestID(scene)}\n        accessible={getAccessible(scene)}\n        accessibilityLabel={accessibilityLabel}\n        accessibilityRole=\"tab\"\n        accessibilityState={{ selected: isFocused }}\n        // @ts-ignore: this is to support older React Native versions\n        accessibilityStates={isFocused ? ['selected'] : []}\n        pressColor={pressColor}\n        pressOpacity={pressOpacity}\n        delayPressIn={0}\n        onLayout={onLayout}\n        onPress={onPress}\n        onLongPress={onLongPress}\n        style={[styles.pressable, tabContainerStyle]}\n      >\n        <View pointerEvents=\"none\" style={[styles.item, tabStyle]}>\n          {icon}\n          {label}\n          {badge != null ? <View style={styles.badge}>{badge}</View> : null}\n        </View>\n      </PlatformPressable>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  label: {\n    margin: 4,\n    backgroundColor: 'transparent',\n    textTransform: 'uppercase',\n  },\n  icon: {\n    margin: 2,\n  },\n  item: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: 10,\n    minHeight: 48,\n  },\n  badge: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n  },\n  pressable: {\n    // The label is not pressable on Windows\n    // Adding backgroundColor: 'transparent' seems to fix it\n    backgroundColor: 'transparent',\n  },\n});\n"],"mappings":"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"}

package/lib/module/TabView.js

@@ -1,27 +1,29 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import TabBar from './TabBar';
 import SceneView from './SceneView';
 import Pager from './Pager';
-export default function TabView({
-  onIndexChange,
-  navigationState,
-  renderScene,
-  initialLayout,
-  keyboardDismissMode = 'auto',
-  lazy = false,
-  lazyPreloadDistance = 0,
-  onSwipeStart,
-  onSwipeEnd,
-  renderLazyPlaceholder = () => null,
-  renderTabBar = props => /*#__PURE__*/React.createElement(TabBar, props),
-  sceneContainerStyle,
-  style,
-  swipeEnabled = true,
-  tabBarPosition = 'top'
-}) {
+export default function TabView(_ref) {
+  let {
+    onIndexChange,
+    navigationState,
+    renderScene,
+    initialLayout,
+    keyboardDismissMode = 'auto',
+    lazy = false,
+    lazyPreloadDistance = 0,
+    onSwipeStart,
+    onSwipeEnd,
+    renderLazyPlaceholder = () => null,
+    renderTabBar = props => /*#__PURE__*/React.createElement(TabBar, props),
+    sceneContainerStyle,
+    pagerStyle,
+    style,
+    swipeEnabled = true,
+    tabBarPosition = 'top'
+  } = _ref;
   const [layout, setLayout] = React.useState({
     width: 0,
     height: 0,
@@ -61,13 +63,15 @@ export default function TabView({
     swipeEnabled: swipeEnabled,
     onSwipeStart: onSwipeStart,
     onSwipeEnd: onSwipeEnd,
-    onIndexChange: jumpToIndex
-  }, ({
-    position,
-    render,
-    addEnterListener,
-    jumpTo
-  }) => {
+    onIndexChange: jumpToIndex,
+    style: pagerStyle
+  }, _ref2 => {
+    let {
+      position,
+      render,
+      addEnterListener,
+      jumpTo
+    } = _ref2;
     // All of the props here must not change between re-renders
     // This is crucial to optimizing the routes with PureComponent
     const sceneRendererProps = {
@@ -88,13 +92,16 @@ export default function TabView({
         lazyPreloadDistance: lazyPreloadDistance,
         navigationState: navigationState,
         style: sceneContainerStyle
-      }), ({
-        loading
-      }) => loading ? renderLazyPlaceholder({
-        route
-      }) : renderScene({ ...sceneRendererProps,
-        route
-      }));
+      }), _ref3 => {
+        let {
+          loading
+        } = _ref3;
+        return loading ? renderLazyPlaceholder({
+          route
+        }) : renderScene({ ...sceneRendererProps,
+          route
+        });
+      });
     })), tabBarPosition === 'bottom' && renderTabBar({ ...sceneRendererProps,
       navigationState
     }));

package/lib/module/TabView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TabView.tsx"],"names":["React","StyleSheet","View","TabBar","SceneView","Pager","TabView","onIndexChange","navigationState","renderScene","initialLayout","keyboardDismissMode","lazy","lazyPreloadDistance","onSwipeStart","onSwipeEnd","renderLazyPlaceholder","renderTabBar","props","sceneContainerStyle","style","swipeEnabled","tabBarPosition","layout","setLayout","useState","width","height","jumpToIndex","index","handleLayout","e","nativeEvent","prevLayout","styles","pager","position","render","addEnterListener","jumpTo","sceneRendererProps","routes","map","route","i","key","loading","create","flex","overflow"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  StyleSheet,\n  View,\n  StyleProp,\n  ViewStyle,\n  LayoutChangeEvent,\n} from 'react-native';\nimport TabBar from './TabBar';\nimport SceneView from './SceneView';\nimport Pager from './Pager';\nimport type {\n  Layout,\n  NavigationState,\n  Route,\n  SceneRendererProps,\n  PagerProps,\n} from './types';\n\nexport type Props<T extends Route> = PagerProps & {\n  onIndexChange: (index: number) => void;\n  navigationState: NavigationState<T>;\n  renderScene: (props: SceneRendererProps & { route: T }) => React.ReactNode;\n  renderLazyPlaceholder?: (props: { route: T }) => React.ReactNode;\n  renderTabBar?: (\n    props: SceneRendererProps & { navigationState: NavigationState<T> }\n  ) => React.ReactNode;\n  tabBarPosition?: 'top' | 'bottom';\n  initialLayout?: Partial<Layout>;\n  lazy?: ((props: { route: T }) => boolean) | boolean;\n  lazyPreloadDistance?: number;\n  sceneContainerStyle?: StyleProp<ViewStyle>;\n  style?: StyleProp<ViewStyle>;\n};\n\nexport default function TabView<T extends Route>({\n  onIndexChange,\n  navigationState,\n  renderScene,\n  initialLayout,\n  keyboardDismissMode = 'auto',\n  lazy = false,\n  lazyPreloadDistance = 0,\n  onSwipeStart,\n  onSwipeEnd,\n  renderLazyPlaceholder = () => null,\n  renderTabBar = (props) => <TabBar {...props} />,\n  sceneContainerStyle,\n  style,\n  swipeEnabled = true,\n  tabBarPosition = 'top',\n}: Props<T>) {\n  const [layout, setLayout] = React.useState({\n    width: 0,\n    height: 0,\n    ...initialLayout,\n  });\n\n  const jumpToIndex = (index: number) => {\n    if (index !== navigationState.index) {\n      onIndexChange(index);\n    }\n  };\n\n  const handleLayout = (e: LayoutChangeEvent) => {\n    const { height, width } = e.nativeEvent.layout;\n\n    setLayout((prevLayout) => {\n      if (prevLayout.width === width && prevLayout.height === height) {\n        return prevLayout;\n      }\n\n      return { height, width };\n    });\n  };\n\n  return (\n    <View onLayout={handleLayout} style={[styles.pager, style]}>\n      <Pager\n        layout={layout}\n        navigationState={navigationState}\n        keyboardDismissMode={keyboardDismissMode}\n        swipeEnabled={swipeEnabled}\n        onSwipeStart={onSwipeStart}\n        onSwipeEnd={onSwipeEnd}\n        onIndexChange={jumpToIndex}\n      >\n        {({ position, render, addEnterListener, jumpTo }) => {\n          // All of the props here must not change between re-renders\n          // This is crucial to optimizing the routes with PureComponent\n          const sceneRendererProps = {\n            position,\n            layout,\n            jumpTo,\n          };\n\n          return (\n            <React.Fragment>\n              {tabBarPosition === 'top' &&\n                renderTabBar({\n                  ...sceneRendererProps,\n                  navigationState,\n                })}\n              {render(\n                navigationState.routes.map((route, i) => {\n                  return (\n                    <SceneView\n                      {...sceneRendererProps}\n                      addEnterListener={addEnterListener}\n                      key={route.key}\n                      index={i}\n                      lazy={typeof lazy === 'function' ? lazy({ route }) : lazy}\n                      lazyPreloadDistance={lazyPreloadDistance}\n                      navigationState={navigationState}\n                      style={sceneContainerStyle}\n                    >\n                      {({ loading }) =>\n                        loading\n                          ? renderLazyPlaceholder({ route })\n                          : renderScene({\n                              ...sceneRendererProps,\n                              route,\n                            })\n                      }\n                    </SceneView>\n                  );\n                })\n              )}\n              {tabBarPosition === 'bottom' &&\n                renderTabBar({\n                  ...sceneRendererProps,\n                  navigationState,\n                })}\n            </React.Fragment>\n          );\n        }}\n      </Pager>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  pager: {\n    flex: 1,\n    overflow: 'hidden',\n  },\n});\n"]}
+{"version":3,"names":["React","StyleSheet","View","TabBar","SceneView","Pager","TabView","onIndexChange","navigationState","renderScene","initialLayout","keyboardDismissMode","lazy","lazyPreloadDistance","onSwipeStart","onSwipeEnd","renderLazyPlaceholder","renderTabBar","props","sceneContainerStyle","pagerStyle","style","swipeEnabled","tabBarPosition","layout","setLayout","useState","width","height","jumpToIndex","index","handleLayout","e","nativeEvent","prevLayout","styles","pager","position","render","addEnterListener","jumpTo","sceneRendererProps","routes","map","route","i","key","loading","create","flex","overflow"],"sources":["TabView.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  StyleSheet,\n  View,\n  StyleProp,\n  ViewStyle,\n  LayoutChangeEvent,\n} from 'react-native';\nimport TabBar from './TabBar';\nimport SceneView from './SceneView';\nimport Pager from './Pager';\nimport type {\n  Layout,\n  NavigationState,\n  Route,\n  SceneRendererProps,\n  PagerProps,\n} from './types';\n\nexport type Props<T extends Route> = PagerProps & {\n  onIndexChange: (index: number) => void;\n  navigationState: NavigationState<T>;\n  renderScene: (props: SceneRendererProps & { route: T }) => React.ReactNode;\n  renderLazyPlaceholder?: (props: { route: T }) => React.ReactNode;\n  renderTabBar?: (\n    props: SceneRendererProps & { navigationState: NavigationState<T> }\n  ) => React.ReactNode;\n  tabBarPosition?: 'top' | 'bottom';\n  initialLayout?: Partial<Layout>;\n  lazy?: ((props: { route: T }) => boolean) | boolean;\n  lazyPreloadDistance?: number;\n  sceneContainerStyle?: StyleProp<ViewStyle>;\n  pagerStyle?: StyleProp<ViewStyle>;\n  style?: StyleProp<ViewStyle>;\n};\n\nexport default function TabView<T extends Route>({\n  onIndexChange,\n  navigationState,\n  renderScene,\n  initialLayout,\n  keyboardDismissMode = 'auto',\n  lazy = false,\n  lazyPreloadDistance = 0,\n  onSwipeStart,\n  onSwipeEnd,\n  renderLazyPlaceholder = () => null,\n  renderTabBar = (props) => <TabBar {...props} />,\n  sceneContainerStyle,\n  pagerStyle,\n  style,\n  swipeEnabled = true,\n  tabBarPosition = 'top',\n}: Props<T>) {\n  const [layout, setLayout] = React.useState({\n    width: 0,\n    height: 0,\n    ...initialLayout,\n  });\n\n  const jumpToIndex = (index: number) => {\n    if (index !== navigationState.index) {\n      onIndexChange(index);\n    }\n  };\n\n  const handleLayout = (e: LayoutChangeEvent) => {\n    const { height, width } = e.nativeEvent.layout;\n\n    setLayout((prevLayout) => {\n      if (prevLayout.width === width && prevLayout.height === height) {\n        return prevLayout;\n      }\n\n      return { height, width };\n    });\n  };\n\n  return (\n    <View onLayout={handleLayout} style={[styles.pager, style]}>\n      <Pager\n        layout={layout}\n        navigationState={navigationState}\n        keyboardDismissMode={keyboardDismissMode}\n        swipeEnabled={swipeEnabled}\n        onSwipeStart={onSwipeStart}\n        onSwipeEnd={onSwipeEnd}\n        onIndexChange={jumpToIndex}\n        style={pagerStyle}\n      >\n        {({ position, render, addEnterListener, jumpTo }) => {\n          // All of the props here must not change between re-renders\n          // This is crucial to optimizing the routes with PureComponent\n          const sceneRendererProps = {\n            position,\n            layout,\n            jumpTo,\n          };\n\n          return (\n            <React.Fragment>\n              {tabBarPosition === 'top' &&\n                renderTabBar({\n                  ...sceneRendererProps,\n                  navigationState,\n                })}\n              {render(\n                navigationState.routes.map((route, i) => {\n                  return (\n                    <SceneView\n                      {...sceneRendererProps}\n                      addEnterListener={addEnterListener}\n                      key={route.key}\n                      index={i}\n                      lazy={typeof lazy === 'function' ? lazy({ route }) : lazy}\n                      lazyPreloadDistance={lazyPreloadDistance}\n                      navigationState={navigationState}\n                      style={sceneContainerStyle}\n                    >\n                      {({ loading }) =>\n                        loading\n                          ? renderLazyPlaceholder({ route })\n                          : renderScene({\n                              ...sceneRendererProps,\n                              route,\n                            })\n                      }\n                    </SceneView>\n                  );\n                })\n              )}\n              {tabBarPosition === 'bottom' &&\n                renderTabBar({\n                  ...sceneRendererProps,\n                  navigationState,\n                })}\n            </React.Fragment>\n          );\n        }}\n      </Pager>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  pager: {\n    flex: 1,\n    overflow: 'hidden',\n  },\n});\n"],"mappings":"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"}

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["default","TabBar","TabView","TabBarIndicator","TabBarItem","SceneMap"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAApB,QAAkC,UAAlC;AAGA,SAASD,OAAO,IAAIE,OAApB,QAAmC,WAAnC;AAGA,SAASF,OAAO,IAAIG,eAApB,QAA2C,mBAA3C;AAGA,SAASH,OAAO,IAAII,UAApB,QAAsC,cAAtC;AAGA,SAASJ,OAAO,IAAIK,QAApB,QAAoC,YAApC","sourcesContent":["export { default as TabBar } from './TabBar';\nexport type { Props as TabBarProps } from './TabBar';\n\nexport { default as TabView } from './TabView';\nexport type { Props as TabViewProps } from './TabView';\n\nexport { default as TabBarIndicator } from './TabBarIndicator';\nexport type { Props as TabBarIndicatorProps } from './TabBarIndicator';\n\nexport { default as TabBarItem } from './TabBarItem';\nexport type { Props as TabBarItemProps } from './TabBarItem';\n\nexport { default as SceneMap } from './SceneMap';\n\nexport type { Route, NavigationState, SceneRendererProps } from './types';\n"]}
+{"version":3,"names":["default","TabBar","TabView","TabBarIndicator","TabBarItem","SceneMap"],"sources":["index.tsx"],"sourcesContent":["export { default as TabBar } from './TabBar';\nexport type { Props as TabBarProps } from './TabBar';\n\nexport { default as TabView } from './TabView';\nexport type { Props as TabViewProps } from './TabView';\n\nexport { default as TabBarIndicator } from './TabBarIndicator';\nexport type { Props as TabBarIndicatorProps } from './TabBarIndicator';\n\nexport { default as TabBarItem } from './TabBarItem';\nexport type { Props as TabBarItemProps } from './TabBarItem';\n\nexport { default as SceneMap } from './SceneMap';\n\nexport type { Route, NavigationState, SceneRendererProps } from './types';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAApB,QAAkC,UAAlC;AAGA,SAASD,OAAO,IAAIE,OAApB,QAAmC,WAAnC;AAGA,SAASF,OAAO,IAAIG,eAApB,QAA2C,mBAA3C;AAGA,SAASH,OAAO,IAAII,UAApB,QAAsC,cAAtC;AAGA,SAASJ,OAAO,IAAIK,QAApB,QAAoC,YAApC"}

package/lib/module/types.js

@@ -1,2 +1,2 @@
-
+export {};
 //# sourceMappingURL=types.js.map

package/lib/module/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["types.tsx"],"sourcesContent":["import type { Animated } from 'react-native';\nimport type { PagerViewProps } from 'react-native-pager-view';\n\nexport type Route = {\n  key: string;\n  icon?: string;\n  title?: string;\n  accessible?: boolean;\n  accessibilityLabel?: string;\n  testID?: string;\n};\n\nexport type Event = {\n  defaultPrevented: boolean;\n  preventDefault(): void;\n};\n\nexport type Scene<T extends Route> = {\n  route: T;\n};\n\nexport type NavigationState<T extends Route> = {\n  index: number;\n  routes: T[];\n};\n\nexport type Layout = {\n  width: number;\n  height: number;\n};\n\nexport type Listener = (value: number) => void;\n\nexport type SceneRendererProps = {\n  layout: Layout;\n  position: Animated.AnimatedInterpolation;\n  jumpTo: (key: string) => void;\n};\n\nexport type EventEmitterProps = {\n  addEnterListener: (listener: Listener) => () => void;\n};\n\nexport type PagerProps = Omit<\n  PagerViewProps,\n  | 'initialPage'\n  | 'scrollEnabled'\n  | 'onPageScroll'\n  | 'onPageSelected'\n  | 'onPageScrollStateChanged'\n  | 'keyboardDismissMode'\n  | 'children'\n> & {\n  keyboardDismissMode?: 'none' | 'on-drag' | 'auto';\n  swipeEnabled?: boolean;\n  onSwipeStart?: () => void;\n  onSwipeEnd?: () => void;\n};\n"],"mappings":""}

package/lib/module/useAnimatedValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAnimatedValue.tsx"],"names":["React","Animated","useAnimatedValue","initialValue","lazyRef","useRef","current","undefined","Value"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,eAAe,SAASC,gBAAT,CAA0BC,YAA1B,EAAgD;AAC7D,QAAMC,OAAO,GAAGJ,KAAK,CAACK,MAAN,EAAhB;;AAEA,MAAID,OAAO,CAACE,OAAR,KAAoBC,SAAxB,EAAmC;AACjCH,IAAAA,OAAO,CAACE,OAAR,GAAkB,IAAIL,QAAQ,CAACO,KAAb,CAAmBL,YAAnB,CAAlB;AACD;;AAED,SAAOC,OAAO,CAACE,OAAf;AACD","sourcesContent":["import * as React from 'react';\nimport { Animated } from 'react-native';\n\nexport default function useAnimatedValue(initialValue: number) {\n  const lazyRef = React.useRef<Animated.Value>();\n\n  if (lazyRef.current === undefined) {\n    lazyRef.current = new Animated.Value(initialValue);\n  }\n\n  return lazyRef.current as Animated.Value;\n}\n"]}
+{"version":3,"names":["React","Animated","useAnimatedValue","initialValue","lazyRef","useRef","current","undefined","Value"],"sources":["useAnimatedValue.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Animated } from 'react-native';\n\nexport default function useAnimatedValue(initialValue: number) {\n  const lazyRef = React.useRef<Animated.Value>();\n\n  if (lazyRef.current === undefined) {\n    lazyRef.current = new Animated.Value(initialValue);\n  }\n\n  return lazyRef.current as Animated.Value;\n}\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,eAAe,SAASC,gBAAT,CAA0BC,YAA1B,EAAgD;EAC7D,MAAMC,OAAO,GAAGJ,KAAK,CAACK,MAAN,EAAhB;;EAEA,IAAID,OAAO,CAACE,OAAR,KAAoBC,SAAxB,EAAmC;IACjCH,OAAO,CAACE,OAAR,GAAkB,IAAIL,QAAQ,CAACO,KAAb,CAAmBL,YAAnB,CAAlB;EACD;;EAED,OAAOC,OAAO,CAACE,OAAf;AACD"}

package/lib/typescript/TabBar.d.ts

@@ -36,6 +36,7 @@ export declare type Props<T extends Route> = SceneRendererProps & {
     labelStyle?: StyleProp<TextStyle>;
     contentContainerStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
+    gap?: number;
 };
 declare type State = {
     layout: Layout;
@@ -50,12 +51,13 @@ export default class TabBar<T extends Route> extends React.Component<Props<T>, S
         getAccessibilityLabel: ({ route }: Scene<Route>) => string | undefined;
         getTestID: ({ route }: Scene<Route>) => string | undefined;
         renderIndicator: (props: IndicatorProps<Route>) => JSX.Element;
+        gap: number;
     };
     state: State;
     componentDidUpdate(prevProps: Props<T>, prevState: State): void;
     private measuredTabWidths;
     private scrollAmount;
-    private scrollViewRef;
+    private flatListRef;
     private getFlattenedTabWidth;
     private getComputedTabWidth;
     private getMaxScrollDistance;

package/lib/typescript/TabBarIndicator.d.ts

@@ -7,6 +7,7 @@ export declare 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<Props<T>> {
     componentDidMount(): void;

package/lib/typescript/TabView.d.ts

@@ -20,6 +20,7 @@ export declare type Props<T extends Route> = PagerProps & {
     }) => boolean) | boolean;
     lazyPreloadDistance?: number;
     sceneContainerStyle?: StyleProp<ViewStyle>;
+    pagerStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
 };
-export default function TabView<T extends Route>({ onIndexChange, navigationState, renderScene, initialLayout, keyboardDismissMode, lazy, lazyPreloadDistance, onSwipeStart, onSwipeEnd, renderLazyPlaceholder, renderTabBar, sceneContainerStyle, style, swipeEnabled, tabBarPosition, }: Props<T>): JSX.Element;
+export default function TabView<T extends Route>({ onIndexChange, navigationState, renderScene, initialLayout, keyboardDismissMode, lazy, lazyPreloadDistance, onSwipeStart, onSwipeEnd, renderLazyPlaceholder, renderTabBar, sceneContainerStyle, pagerStyle, style, swipeEnabled, tabBarPosition, }: Props<T>): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tab-view",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Tab view component for React Native",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
@@ -44,26 +44,27 @@
   },
   "homepage": "https://github.com/satya164/react-native-tab-view#readme",
   "devDependencies": {
-    "@commitlint/config-conventional": "^13.1.0",
-    "@expo/vector-icons": "^12.0.5",
-    "@release-it/conventional-changelog": "^3.0.1",
-    "@types/react": "^17.0.15",
-    "@types/react-native": "0.64.12",
-    "babel-jest": "^27.0.6",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@expo/vector-icons": "^13.0.0",
+    "@release-it/conventional-changelog": "^5.1.0",
+    "@types/react": "^18.0.14",
+    "@types/react-native": "0.69.5",
+    "babel-jest": "^29.0.1",
+    "babel-loader": "^8.2.5",
     "babel-preset-react-native": "^4.0.0",
-    "commitlint": "^13.1.0",
-    "eslint": "^7.31.0",
-    "eslint-config-satya164": "^3.1.10",
+    "commitlint": "^17.1.2",
+    "eslint": "^8.23.0",
+    "eslint-config-satya164": "^3.1.11",
     "eslint-plugin-react-native-globals": "^0.1.2",
     "husky": "^4.2.5",
-    "jest": "^27.0.6",
-    "prettier": "^2.3.2",
-    "react": "~16.13.1",
-    "react-native": "~0.63.4",
-    "react-native-builder-bob": "^0.18.1",
-    "react-native-pager-view": "^5.0.12",
-    "release-it": "^14.10.1",
-    "typescript": "^4.3.5"
+    "jest": "^29.0.1",
+    "prettier": "^2.7.1",
+    "react": "18.0.0",
+    "react-native": "0.69.5",
+    "react-native-builder-bob": "^0.18.3",
+    "react-native-pager-view": "5.4.24",
+    "release-it": "^15.4.0",
+    "typescript": "^4.8.2"
   },
   "peerDependencies": {
     "react": "*",

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,6 +47,7 @@ export default function TabView<T extends Route>({
   renderLazyPlaceholder = () => null,
   renderTabBar = (props) => <TabBar {...props} />,
   sceneContainerStyle,
+  pagerStyle,
   style,
   swipeEnabled = true,
   tabBarPosition = 'top',
@@ -84,6 +86,7 @@ export default function TabView<T extends Route>({
         onSwipeStart={onSwipeStart}
         onSwipeEnd={onSwipeEnd}
         onIndexChange={jumpToIndex}
+        style={pagerStyle}
       >
         {({ position, render, addEnterListener, jumpTo }) => {
           // All of the props here must not change between re-renders