react-native-tab-view 3.1.0 → 3.2.0

package/lib/module/SceneView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SceneView.tsx"],"names":["React","View","StyleSheet","SceneView","Component","loading","Math","abs","props","navigationState","index","lazyPreloadDistance","value","setState","prevState","getDerivedStateFromProps","state","componentDidMount","lazy","unsubscribe","addEnterListener","handleEnter","timerHandler","setTimeout","componentDidUpdate","prevProps","componentWillUnmount","clearTimeout","undefined","render","layout","style","focused","styles","route","width","absoluteFill","children","create","flex","overflow"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';\nimport type {\n  SceneRendererProps,\n  EventEmitterProps,\n  NavigationState,\n  Route,\n} from './types';\n\ntype Props<T extends Route> = SceneRendererProps &\n  EventEmitterProps & {\n    navigationState: NavigationState<T>;\n    lazy: boolean;\n    lazyPreloadDistance: number;\n    index: number;\n    children: (props: { loading: boolean }) => React.ReactNode;\n    style?: StyleProp<ViewStyle>;\n  };\n\ntype State = {\n  loading: boolean;\n};\n\nexport default class SceneView<T extends Route> extends React.Component<\n  Props<T>,\n  State\n> {\n  static getDerivedStateFromProps(props: Props<Route>, state: State) {\n    if (\n      state.loading &&\n      Math.abs(props.navigationState.index - props.index) <=\n        props.lazyPreloadDistance\n    ) {\n      // Always render the route when it becomes focused\n      return { loading: false };\n    }\n\n    return null;\n  }\n\n  state = {\n    loading:\n      Math.abs(this.props.navigationState.index - this.props.index) >\n      this.props.lazyPreloadDistance,\n  };\n\n  componentDidMount() {\n    if (this.props.lazy) {\n      // If lazy mode is enabled, listen to when we enter screens\n      this.unsubscribe = this.props.addEnterListener(this.handleEnter);\n    } else if (this.state.loading) {\n      // If lazy mode is not enabled, render the scene with a delay if not loaded already\n      // This improves the initial startup time as the scene is no longer blocking\n      this.timerHandler = setTimeout(\n        () => this.setState({ loading: false }),\n        0\n      );\n    }\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (\n      this.props.lazy !== prevProps.lazy ||\n      this.state.loading !== prevState.loading\n    ) {\n      // We only need the listener if the tab hasn't loaded yet and lazy is enabled\n      if (this.props.lazy && this.state.loading) {\n        this.unsubscribe?.();\n        this.unsubscribe = this.props.addEnterListener(this.handleEnter);\n      } else {\n        this.unsubscribe?.();\n      }\n    }\n  }\n\n  componentWillUnmount() {\n    this.unsubscribe?.();\n\n    if (this.timerHandler) {\n      clearTimeout(this.timerHandler);\n      this.timerHandler = undefined;\n    }\n  }\n\n  private timerHandler: NodeJS.Timeout | undefined;\n\n  private unsubscribe: (() => void) | null = null;\n\n  private handleEnter = (value: number) => {\n    const { index } = this.props;\n\n    // If we're entering the current route, we need to load it\n    if (value === index) {\n      this.setState((prevState) => {\n        if (prevState.loading) {\n          return { loading: false };\n        }\n\n        return null;\n      });\n    }\n  };\n\n  render() {\n    const { navigationState, index, layout, style } = this.props;\n    const { loading } = this.state;\n\n    const focused = navigationState.index === index;\n\n    return (\n      <View\n        accessibilityElementsHidden={!focused}\n        importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}\n        style={[\n          styles.route,\n          // If we don't have the layout yet, make the focused screen fill the container\n          // This avoids delay before we are able to render pages side by side\n          layout.width\n            ? { width: layout.width }\n            : focused\n            ? StyleSheet.absoluteFill\n            : null,\n          style,\n        ]}\n      >\n        {\n          // Only render the route only if it's either focused or layout is available\n          // When layout is not available, we must not render unfocused routes\n          // so that the focused route can fill the screen\n          focused || layout.width ? this.props.children({ loading }) : null\n        }\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  route: {\n    flex: 1,\n    overflow: 'hidden',\n  },\n});\n"]}
+{"version":3,"names":["React","View","StyleSheet","SceneView","Component","loading","Math","abs","props","navigationState","index","lazyPreloadDistance","value","setState","prevState","getDerivedStateFromProps","state","componentDidMount","lazy","unsubscribe","addEnterListener","handleEnter","timerHandler","setTimeout","componentDidUpdate","prevProps","componentWillUnmount","clearTimeout","undefined","render","layout","style","focused","styles","route","width","absoluteFill","children","create","flex","overflow"],"sources":["SceneView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';\nimport type {\n  SceneRendererProps,\n  EventEmitterProps,\n  NavigationState,\n  Route,\n} from './types';\n\ntype Props<T extends Route> = SceneRendererProps &\n  EventEmitterProps & {\n    navigationState: NavigationState<T>;\n    lazy: boolean;\n    lazyPreloadDistance: number;\n    index: number;\n    children: (props: { loading: boolean }) => React.ReactNode;\n    style?: StyleProp<ViewStyle>;\n  };\n\ntype State = {\n  loading: boolean;\n};\n\nexport default class SceneView<T extends Route> extends React.Component<\n  Props<T>,\n  State\n> {\n  static getDerivedStateFromProps(props: Props<Route>, state: State) {\n    if (\n      state.loading &&\n      Math.abs(props.navigationState.index - props.index) <=\n        props.lazyPreloadDistance\n    ) {\n      // Always render the route when it becomes focused\n      return { loading: false };\n    }\n\n    return null;\n  }\n\n  state = {\n    loading:\n      Math.abs(this.props.navigationState.index - this.props.index) >\n      this.props.lazyPreloadDistance,\n  };\n\n  componentDidMount() {\n    if (this.props.lazy) {\n      // If lazy mode is enabled, listen to when we enter screens\n      this.unsubscribe = this.props.addEnterListener(this.handleEnter);\n    } else if (this.state.loading) {\n      // If lazy mode is not enabled, render the scene with a delay if not loaded already\n      // This improves the initial startup time as the scene is no longer blocking\n      this.timerHandler = setTimeout(\n        () => this.setState({ loading: false }),\n        0\n      );\n    }\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (\n      this.props.lazy !== prevProps.lazy ||\n      this.state.loading !== prevState.loading\n    ) {\n      // We only need the listener if the tab hasn't loaded yet and lazy is enabled\n      if (this.props.lazy && this.state.loading) {\n        this.unsubscribe?.();\n        this.unsubscribe = this.props.addEnterListener(this.handleEnter);\n      } else {\n        this.unsubscribe?.();\n      }\n    }\n  }\n\n  componentWillUnmount() {\n    this.unsubscribe?.();\n\n    if (this.timerHandler) {\n      clearTimeout(this.timerHandler);\n      this.timerHandler = undefined;\n    }\n  }\n\n  private timerHandler: NodeJS.Timeout | undefined;\n\n  private unsubscribe: (() => void) | null = null;\n\n  private handleEnter = (value: number) => {\n    const { index } = this.props;\n\n    // If we're entering the current route, we need to load it\n    if (value === index) {\n      this.setState((prevState) => {\n        if (prevState.loading) {\n          return { loading: false };\n        }\n\n        return null;\n      });\n    }\n  };\n\n  render() {\n    const { navigationState, index, layout, style } = this.props;\n    const { loading } = this.state;\n\n    const focused = navigationState.index === index;\n\n    return (\n      <View\n        accessibilityElementsHidden={!focused}\n        importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}\n        style={[\n          styles.route,\n          // If we don't have the layout yet, make the focused screen fill the container\n          // This avoids delay before we are able to render pages side by side\n          layout.width\n            ? { width: layout.width }\n            : focused\n            ? StyleSheet.absoluteFill\n            : null,\n          style,\n        ]}\n      >\n        {\n          // Only render the route only if it's either focused or layout is available\n          // When layout is not available, we must not render unfocused routes\n          // so that the focused route can fill the screen\n          focused || layout.width ? this.props.children({ loading }) : null\n        }\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  route: {\n    flex: 1,\n    overflow: 'hidden',\n  },\n});\n"],"mappings":"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"}

package/lib/module/TabBar.js

@@ -4,9 +4,21 @@ import * as React from 'react';
 import { Animated, StyleSheet, View, I18nManager, Platform } from 'react-native';
 import TabBarItem from './TabBarItem';
 import TabBarIndicator from './TabBarIndicator';
+
+const Separator = _ref => {
+  let {
+    width
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      width
+    }
+  });
+};
+
 export default class TabBar extends React.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "state", {
       layout: {
@@ -20,7 +32,7 @@ export default class TabBar extends React.Component {
 
     _defineProperty(this, "scrollAmount", new Animated.Value(0));
 
-    _defineProperty(this, "scrollViewRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "flatListRef", /*#__PURE__*/React.createRef());
 
     _defineProperty(this, "getFlattenedTabWidth", style => {
       const tabStyle = StyleSheet.flatten(style);
@@ -68,7 +80,7 @@ export default class TabBar extends React.Component {
       const {
         routes
       } = props.navigationState;
-      return routes.reduce((acc, _, i) => acc + this.getComputedTabWidth(i, layout, routes, scrollEnabled, tabWidths, this.getFlattenedTabWidth(tabStyle)), 0);
+      return routes.reduce((acc, _, i) => acc + (i > 0 ? props.gap ?? 0 : 0) + this.getComputedTabWidth(i, layout, routes, scrollEnabled, tabWidths, this.getFlattenedTabWidth(tabStyle)), 0);
     });
 
     _defineProperty(this, "normalizeScrollValue", (props, state, value) => {
@@ -106,7 +118,7 @@ export default class TabBar extends React.Component {
         const tabWidth = this.getComputedTabWidth(i, layout, routes, scrollEnabled, tabWidths, this.getFlattenedTabWidth(tabStyle)); // 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);
       const scrollAmount = centerDistance - layout.width / 2;
       return this.normalizeScrollValue(props, state, scrollAmount);
@@ -114,10 +126,10 @@ export default class TabBar extends React.Component {
 
     _defineProperty(this, "resetScroll", index => {
       if (this.props.scrollEnabled) {
-        var _this$scrollViewRef$c;
+        var _this$flatListRef$cur;
 
-        (_this$scrollViewRef$c = this.scrollViewRef.current) === null || _this$scrollViewRef$c === void 0 ? void 0 : _this$scrollViewRef$c.scrollTo({
-          x: this.getScrollAmount(this.props, this.state, index),
+        (_this$flatListRef$cur = this.flatListRef.current) === null || _this$flatListRef$cur === void 0 ? void 0 : _this$flatListRef$cur.scrollToOffset({
+          offset: this.getScrollAmount(this.props, this.state, index),
           animated: true
         });
       }
@@ -191,7 +203,8 @@ export default class TabBar extends React.Component {
       indicatorStyle,
       contentContainerStyle,
       style,
-      indicatorContainerStyle
+      indicatorContainerStyle,
+      gap = 0
     } = this.props;
     const {
       layout,
@@ -202,6 +215,8 @@ export default class TabBar extends React.Component {
     } = 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, this.getMaxScrollDistance(tabBarWidth, layout.width));
     return /*#__PURE__*/React.createElement(Animated.View, {
@@ -213,8 +228,8 @@ export default class TabBar extends React.Component {
         transform: [{
           translateX
         }]
-      } : null, tabBarWidth ? {
-        width: tabBarWidth
+      } : null, tabBarWidth > separatorsWidth ? {
+        width: tabBarWidth - separatorsWidth
       } : scrollEnabled ? {
         width: tabBarWidthPercent
       } : null, indicatorContainerStyle]
@@ -223,12 +238,15 @@ export default class TabBar extends React.Component {
       layout,
       navigationState,
       jumpTo,
-      width: isWidthDynamic ? 'auto' : `${100 / routes.length}%`,
+      width: isWidthDynamic ? 'auto' : `${(100 - separatorPercent) / routes.length}%`,
       style: indicatorStyle,
-      getTabWidth: i => this.getComputedTabWidth(i, layout, routes, scrollEnabled, tabWidths, this.getFlattenedTabWidth(tabStyle))
+      getTabWidth: i => this.getComputedTabWidth(i, layout, routes, scrollEnabled, tabWidths, this.getFlattenedTabWidth(tabStyle)),
+      gap
     })), /*#__PURE__*/React.createElement(View, {
       style: styles.scroll
-    }, /*#__PURE__*/React.createElement(Animated.ScrollView, {
+    }, /*#__PURE__*/React.createElement(Animated.FlatList, {
+      data: routes,
+      keyExtractor: item => item.key,
       horizontal: true,
       accessibilityRole: "tablist",
       keyboardShouldPersistTaps: "handled",
@@ -237,12 +255,76 @@ export default class TabBar 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,
+      renderItem: _ref2 => {
+        let {
+          item: route,
+          index
+        } = _ref2;
+        const props = {
+          key: route.key,
+          position: position,
+          route: route,
+          navigationState: navigationState,
+          getAccessibilityLabel: getAccessibilityLabel,
+          getAccessible: getAccessible,
+          getLabelText: getLabelText,
+          getTestID: getTestID,
+          renderBadge: renderBadge,
+          renderIcon: renderIcon,
+          renderLabel: renderLabel,
+          activeColor: activeColor,
+          inactiveColor: inactiveColor,
+          pressColor: pressColor,
+          pressOpacity: pressOpacity,
+          onLayout: isWidthDynamic ? e => {
+            this.measuredTabWidths[route.key] = e.nativeEvent.layout.width; // When we have measured widths for all of the tabs, we should updates the state
+            // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
+
+            if (routes.every(r => typeof this.measuredTabWidths[r.key] === 'number')) {
+              this.setState({
+                tabWidths: { ...this.measuredTabWidths
+                }
+              });
+            }
+          } : undefined,
+          onPress: () => {
+            const event = {
+              route,
+              defaultPrevented: false,
+              preventDefault: () => {
+                event.defaultPrevented = true;
+              }
+            };
+            onTabPress === null || onTabPress === void 0 ? void 0 : onTabPress(event);
+
+            if (event.defaultPrevented) {
+              return;
+            }
+
+            this.props.jumpTo(route.key);
+          },
+          onLongPress: () => onTabLongPress === null || onTabLongPress === void 0 ? void 0 : onTabLongPress({
+            route
+          }),
+          labelStyle: labelStyle,
+          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 /*#__PURE__*/React.createElement(React.Fragment, {
+          key: route.key
+        }, gap > 0 && index > 0 ? /*#__PURE__*/React.createElement(Separator, {
+          width: gap
+        }) : null, renderTabBarItem ? renderTabBarItem(props) : /*#__PURE__*/React.createElement(TabBarItem, props));
+      },
       onScroll: Animated.event([{
         nativeEvent: {
           contentOffset: {
@@ -252,77 +334,39 @@ export default class TabBar extends React.Component {
       }], {
         useNativeDriver: true
       }),
-      ref: this.scrollViewRef
-    }, routes.map(route => {
-      const props = {
-        key: route.key,
-        position: position,
-        route: route,
-        navigationState: navigationState,
-        getAccessibilityLabel: getAccessibilityLabel,
-        getAccessible: getAccessible,
-        getLabelText: getLabelText,
-        getTestID: getTestID,
-        renderBadge: renderBadge,
-        renderIcon: renderIcon,
-        renderLabel: renderLabel,
-        activeColor: activeColor,
-        inactiveColor: inactiveColor,
-        pressColor: pressColor,
-        pressOpacity: pressOpacity,
-        onLayout: isWidthDynamic ? e => {
-          this.measuredTabWidths[route.key] = e.nativeEvent.layout.width; // When we have measured widths for all of the tabs, we should updates the state
-          // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
-
-          if (routes.every(r => typeof this.measuredTabWidths[r.key] === 'number')) {
-            this.setState({
-              tabWidths: { ...this.measuredTabWidths
-              }
-            });
-          }
-        } : undefined,
-        onPress: () => {
-          const event = {
-            route,
-            defaultPrevented: false,
-            preventDefault: () => {
-              event.defaultPrevented = true;
-            }
-          };
-          onTabPress === null || onTabPress === void 0 ? void 0 : onTabPress(event);
-
-          if (event.defaultPrevented) {
-            return;
-          }
-
-          this.props.jumpTo(route.key);
-        },
-        onLongPress: () => onTabLongPress === null || onTabLongPress === void 0 ? void 0 : onTabLongPress({
-          route
-        }),
-        labelStyle: labelStyle,
-        style: tabStyle
-      };
-      return renderTabBarItem ? renderTabBarItem(props) : /*#__PURE__*/React.createElement(TabBarItem, props);
-    }))));
+      ref: this.flatListRef
+    })));
   }
 
 }
 
 _defineProperty(TabBar, "defaultProps", {
-  getLabelText: ({
-    route
-  }) => route.title,
-  getAccessible: ({
-    route
-  }) => typeof route.accessible !== 'undefined' ? route.accessible : true,
-  getAccessibilityLabel: ({
-    route
-  }) => typeof route.accessibilityLabel === 'string' ? route.accessibilityLabel : typeof route.title === 'string' ? route.title : undefined,
-  getTestID: ({
-    route
-  }) => route.testID,
-  renderIndicator: props => /*#__PURE__*/React.createElement(TabBarIndicator, props)
+  getLabelText: _ref3 => {
+    let {
+      route
+    } = _ref3;
+    return route.title;
+  },
+  getAccessible: _ref4 => {
+    let {
+      route
+    } = _ref4;
+    return typeof route.accessible !== 'undefined' ? route.accessible : true;
+  },
+  getAccessibilityLabel: _ref5 => {
+    let {
+      route
+    } = _ref5;
+    return typeof route.accessibilityLabel === 'string' ? route.accessibilityLabel : typeof route.title === 'string' ? route.title : undefined;
+  },
+  getTestID: _ref6 => {
+    let {
+      route
+    } = _ref6;
+    return route.testID;
+  },
+  renderIndicator: props => /*#__PURE__*/React.createElement(TabBarIndicator, props),
+  gap: 0
 });
 
 const styles = StyleSheet.create({

package/lib/module/TabBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TabBar.tsx"],"names":["React","Animated","StyleSheet","View","I18nManager","Platform","TabBarItem","TabBarIndicator","TabBar","Component","layout","width","height","tabWidths","Value","createRef","style","tabStyle","flatten","undefined","index","routes","scrollEnabled","flattenedWidth","key","endsWith","parseFloat","Number","isFinite","length","tabBarWidth","layoutWidth","props","state","navigationState","reduce","acc","_","i","getComputedTabWidth","getFlattenedTabWidth","value","getTabBarWidth","maxDistance","getMaxScrollDistance","scrollValue","Math","max","min","OS","isRTL","centerDistance","Array","from","total","tabWidth","scrollAmount","normalizeScrollValue","scrollViewRef","current","scrollTo","x","getScrollAmount","animated","e","nativeEvent","setState","maxScrollDistance","multiply","add","componentDidUpdate","prevProps","prevState","every","r","resetScroll","render","position","jumpTo","bounces","getAccessibilityLabel","getAccessible","getLabelText","getTestID","renderBadge","renderIcon","renderLabel","renderTabBarItem","activeColor","inactiveColor","pressColor","pressOpacity","onTabPress","onTabLongPress","labelStyle","indicatorStyle","contentContainerStyle","indicatorContainerStyle","isWidthDynamic","tabBarWidthPercent","translateX","getTranslateX","handleLayout","styles","tabBar","indicatorContainer","transform","renderIndicator","getTabWidth","scroll","tabContent","container","event","contentOffset","useNativeDriver","map","route","onLayout","measuredTabWidths","onPress","defaultPrevented","preventDefault","onLongPress","title","accessible","accessibilityLabel","testID","create","flex","overflow","select","default","web","backgroundColor","elevation","shadowColor","shadowOpacity","shadowRadius","hairlineWidth","shadowOffset","zIndex","flexDirection","flexWrap","top","left","right","bottom"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  Animated,\n  StyleSheet,\n  View,\n  ScrollView,\n  StyleProp,\n  ViewStyle,\n  TextStyle,\n  LayoutChangeEvent,\n  I18nManager,\n  Platform,\n} from 'react-native';\nimport TabBarItem, { Props as TabBarItemProps } from './TabBarItem';\nimport TabBarIndicator, { Props as IndicatorProps } from './TabBarIndicator';\nimport type {\n  Route,\n  Scene,\n  SceneRendererProps,\n  NavigationState,\n  Layout,\n  Event,\n} from './types';\n\nexport type Props<T extends Route> = SceneRendererProps & {\n  navigationState: NavigationState<T>;\n  scrollEnabled?: boolean;\n  bounces?: boolean;\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?: (\n    scene: Scene<T> & {\n      focused: boolean;\n      color: string;\n    }\n  ) => React.ReactNode;\n  renderIcon?: (\n    scene: Scene<T> & {\n      focused: boolean;\n      color: string;\n    }\n  ) => React.ReactNode;\n  renderBadge?: (scene: Scene<T>) => React.ReactNode;\n  renderIndicator: (props: IndicatorProps<T>) => React.ReactNode;\n  renderTabBarItem?: (\n    props: TabBarItemProps<T> & { key: string }\n  ) => React.ReactElement;\n  onTabPress?: (scene: Scene<T> & Event) => void;\n  onTabLongPress?: (scene: Scene<T>) => void;\n  tabStyle?: StyleProp<ViewStyle>;\n  indicatorStyle?: StyleProp<ViewStyle>;\n  indicatorContainerStyle?: StyleProp<ViewStyle>;\n  labelStyle?: StyleProp<TextStyle>;\n  contentContainerStyle?: StyleProp<ViewStyle>;\n  style?: StyleProp<ViewStyle>;\n};\n\ntype State = {\n  layout: Layout;\n  tabWidths: { [key: string]: number };\n};\n\nexport default class TabBar<T extends Route> extends React.Component<\n  Props<T>,\n  State\n> {\n  static defaultProps = {\n    getLabelText: ({ route }: Scene<Route>) => route.title,\n    getAccessible: ({ route }: Scene<Route>) =>\n      typeof route.accessible !== 'undefined' ? route.accessible : true,\n    getAccessibilityLabel: ({ route }: Scene<Route>) =>\n      typeof route.accessibilityLabel === 'string'\n        ? route.accessibilityLabel\n        : typeof route.title === 'string'\n        ? route.title\n        : undefined,\n    getTestID: ({ route }: Scene<Route>) => route.testID,\n    renderIndicator: (props: IndicatorProps<Route>) => (\n      <TabBarIndicator {...props} />\n    ),\n  };\n\n  state: State = {\n    layout: { width: 0, height: 0 },\n    tabWidths: {},\n  };\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    const { navigationState } = this.props;\n    const { layout, tabWidths } = this.state;\n\n    if (\n      prevProps.navigationState.routes.length !==\n        navigationState.routes.length ||\n      prevProps.navigationState.index !== navigationState.index ||\n      prevState.layout.width !== layout.width ||\n      prevState.tabWidths !== tabWidths\n    ) {\n      if (\n        this.getFlattenedTabWidth(this.props.tabStyle) === 'auto' &&\n        !(\n          layout.width &&\n          navigationState.routes.every(\n            (r) => typeof tabWidths[r.key] === 'number'\n          )\n        )\n      ) {\n        // When tab width is dynamic, only adjust the scroll once we have all tab widths and layout\n        return;\n      }\n\n      this.resetScroll(navigationState.index);\n    }\n  }\n\n  // to store the layout.width of each tab\n  // when all onLayout's are fired, this would be set in state\n  private measuredTabWidths: { [key: string]: number } = {};\n\n  private scrollAmount = new Animated.Value(0);\n\n  private scrollViewRef = React.createRef<ScrollView>();\n\n  private getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {\n    const tabStyle = StyleSheet.flatten(style);\n\n    return tabStyle ? tabStyle.width : undefined;\n  };\n\n  private getComputedTabWidth = (\n    index: number,\n    layout: Layout,\n    routes: Route[],\n    scrollEnabled: boolean | undefined,\n    tabWidths: { [key: string]: number },\n    flattenedWidth: string | number | undefined\n  ) => {\n    if (flattenedWidth === 'auto') {\n      return tabWidths[routes[index].key] || 0;\n    }\n\n    switch (typeof flattenedWidth) {\n      case 'number':\n        return flattenedWidth;\n      case 'string':\n        if (flattenedWidth.endsWith('%')) {\n          const width = parseFloat(flattenedWidth);\n          if (Number.isFinite(width)) {\n            return layout.width * (width / 100);\n          }\n        }\n    }\n\n    if (scrollEnabled) {\n      return (layout.width / 5) * 2;\n    }\n\n    return layout.width / routes.length;\n  };\n\n  private getMaxScrollDistance = (tabBarWidth: number, layoutWidth: number) =>\n    tabBarWidth - layoutWidth;\n\n  private getTabBarWidth = (props: Props<T>, state: State) => {\n    const { layout, tabWidths } = state;\n    const { scrollEnabled, tabStyle } = props;\n    const { routes } = props.navigationState;\n\n    return routes.reduce<number>(\n      (acc, _, i) =>\n        acc +\n        this.getComputedTabWidth(\n          i,\n          layout,\n          routes,\n          scrollEnabled,\n          tabWidths,\n          this.getFlattenedTabWidth(tabStyle)\n        ),\n      0\n    );\n  };\n\n  private normalizeScrollValue = (\n    props: Props<T>,\n    state: State,\n    value: number\n  ) => {\n    const { layout } = state;\n    const tabBarWidth = this.getTabBarWidth(props, state);\n    const maxDistance = this.getMaxScrollDistance(tabBarWidth, layout.width);\n    const scrollValue = Math.max(Math.min(value, maxDistance), 0);\n\n    if (Platform.OS === 'android' && I18nManager.isRTL) {\n      // On Android, scroll value is not applied in reverse in RTL\n      // so we need to manually adjust it to apply correct value\n      return maxDistance - scrollValue;\n    }\n\n    return scrollValue;\n  };\n\n  private getScrollAmount = (props: Props<T>, state: State, index: number) => {\n    const { layout, tabWidths } = state;\n    const { scrollEnabled, tabStyle } = props;\n    const { routes } = props.navigationState;\n\n    const centerDistance = Array.from({ length: index + 1 }).reduce<number>(\n      (total, _, i) => {\n        const tabWidth = this.getComputedTabWidth(\n          i,\n          layout,\n          routes,\n          scrollEnabled,\n          tabWidths,\n          this.getFlattenedTabWidth(tabStyle)\n        );\n\n        // To get the current index centered we adjust scroll amount by width of indexes\n        // 0 through (i - 1) and add half the width of current index i\n        return total + (index === i ? tabWidth / 2 : tabWidth);\n      },\n      0\n    );\n\n    const scrollAmount = centerDistance - layout.width / 2;\n\n    return this.normalizeScrollValue(props, state, scrollAmount);\n  };\n\n  private resetScroll = (index: number) => {\n    if (this.props.scrollEnabled) {\n      this.scrollViewRef.current?.scrollTo({\n        x: this.getScrollAmount(this.props, this.state, index),\n        animated: true,\n      });\n    }\n  };\n\n  private handleLayout = (e: LayoutChangeEvent) => {\n    const { height, width } = e.nativeEvent.layout;\n\n    if (\n      this.state.layout.width === width &&\n      this.state.layout.height === height\n    ) {\n      return;\n    }\n\n    this.setState({\n      layout: {\n        height,\n        width,\n      },\n    });\n  };\n\n  private getTranslateX = (\n    scrollAmount: Animated.Value,\n    maxScrollDistance: number\n  ) =>\n    Animated.multiply(\n      Platform.OS === 'android' && I18nManager.isRTL\n        ? Animated.add(maxScrollDistance, Animated.multiply(scrollAmount, -1))\n        : scrollAmount,\n      I18nManager.isRTL ? 1 : -1\n    );\n\n  render() {\n    const {\n      position,\n      navigationState,\n      jumpTo,\n      scrollEnabled,\n      bounces,\n      getAccessibilityLabel,\n      getAccessible,\n      getLabelText,\n      getTestID,\n      renderBadge,\n      renderIcon,\n      renderLabel,\n      renderTabBarItem,\n      activeColor,\n      inactiveColor,\n      pressColor,\n      pressOpacity,\n      onTabPress,\n      onTabLongPress,\n      tabStyle,\n      labelStyle,\n      indicatorStyle,\n      contentContainerStyle,\n      style,\n      indicatorContainerStyle,\n    } = this.props;\n    const { layout, tabWidths } = this.state;\n    const { routes } = navigationState;\n\n    const isWidthDynamic = this.getFlattenedTabWidth(tabStyle) === 'auto';\n    const tabBarWidth = this.getTabBarWidth(this.props, this.state);\n    const tabBarWidthPercent = `${routes.length * 40}%`;\n    const translateX = this.getTranslateX(\n      this.scrollAmount,\n      this.getMaxScrollDistance(tabBarWidth, layout.width)\n    );\n\n    return (\n      <Animated.View\n        onLayout={this.handleLayout}\n        style={[styles.tabBar, style]}\n      >\n        <Animated.View\n          pointerEvents=\"none\"\n          style={[\n            styles.indicatorContainer,\n            scrollEnabled ? { transform: [{ translateX }] as any } : null,\n            tabBarWidth\n              ? { width: tabBarWidth }\n              : scrollEnabled\n              ? { width: tabBarWidthPercent }\n              : null,\n            indicatorContainerStyle,\n          ]}\n        >\n          {this.props.renderIndicator({\n            position,\n            layout,\n            navigationState,\n            jumpTo,\n            width: isWidthDynamic ? 'auto' : `${100 / routes.length}%`,\n            style: indicatorStyle,\n            getTabWidth: (i: number) =>\n              this.getComputedTabWidth(\n                i,\n                layout,\n                routes,\n                scrollEnabled,\n                tabWidths,\n                this.getFlattenedTabWidth(tabStyle)\n              ),\n          })}\n        </Animated.View>\n        <View style={styles.scroll}>\n          <Animated.ScrollView\n            horizontal\n            accessibilityRole=\"tablist\"\n            keyboardShouldPersistTaps=\"handled\"\n            scrollEnabled={scrollEnabled}\n            bounces={bounces}\n            alwaysBounceHorizontal={false}\n            scrollsToTop={false}\n            showsHorizontalScrollIndicator={false}\n            automaticallyAdjustContentInsets={false}\n            overScrollMode=\"never\"\n            contentContainerStyle={[\n              styles.tabContent,\n              scrollEnabled\n                ? { width: tabBarWidth || tabBarWidthPercent }\n                : styles.container,\n              contentContainerStyle,\n            ]}\n            scrollEventThrottle={16}\n            onScroll={Animated.event(\n              [\n                {\n                  nativeEvent: {\n                    contentOffset: { x: this.scrollAmount },\n                  },\n                },\n              ],\n              { useNativeDriver: true }\n            )}\n            ref={this.scrollViewRef}\n          >\n            {routes.map((route: T) => {\n              const props: TabBarItemProps<T> & { key: string } = {\n                key: route.key,\n                position: position,\n                route: route,\n                navigationState: navigationState,\n                getAccessibilityLabel: getAccessibilityLabel,\n                getAccessible: getAccessible,\n                getLabelText: getLabelText,\n                getTestID: getTestID,\n                renderBadge: renderBadge,\n                renderIcon: renderIcon,\n                renderLabel: renderLabel,\n                activeColor: activeColor,\n                inactiveColor: inactiveColor,\n                pressColor: pressColor,\n                pressOpacity: pressOpacity,\n                onLayout: isWidthDynamic\n                  ? (e) => {\n                      this.measuredTabWidths[route.key] =\n                        e.nativeEvent.layout.width;\n\n                      // When we have measured widths for all of the tabs, we should updates the state\n                      // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app\n                      if (\n                        routes.every(\n                          (r) =>\n                            typeof this.measuredTabWidths[r.key] === 'number'\n                        )\n                      ) {\n                        this.setState({\n                          tabWidths: { ...this.measuredTabWidths },\n                        });\n                      }\n                    }\n                  : undefined,\n                onPress: () => {\n                  const event: Scene<T> & Event = {\n                    route,\n                    defaultPrevented: false,\n                    preventDefault: () => {\n                      event.defaultPrevented = true;\n                    },\n                  };\n\n                  onTabPress?.(event);\n\n                  if (event.defaultPrevented) {\n                    return;\n                  }\n\n                  this.props.jumpTo(route.key);\n                },\n                onLongPress: () => onTabLongPress?.({ route }),\n                labelStyle: labelStyle,\n                style: tabStyle,\n              };\n\n              return renderTabBarItem ? (\n                renderTabBarItem(props)\n              ) : (\n                <TabBarItem {...props} />\n              );\n            })}\n          </Animated.ScrollView>\n        </View>\n      </Animated.View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  scroll: {\n    overflow: Platform.select({ default: 'scroll', web: undefined }),\n  },\n  tabBar: {\n    backgroundColor: '#2196f3',\n    elevation: 4,\n    shadowColor: 'black',\n    shadowOpacity: 0.1,\n    shadowRadius: StyleSheet.hairlineWidth,\n    shadowOffset: {\n      height: StyleSheet.hairlineWidth,\n      width: 0,\n    },\n    zIndex: 1,\n  },\n  tabContent: {\n    flexDirection: 'row',\n    flexWrap: 'nowrap',\n  },\n  indicatorContainer: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n});\n"]}
+{"version":3,"names":["React","Animated","StyleSheet","View","I18nManager","Platform","TabBarItem","TabBarIndicator","Separator","width","TabBar","Component","layout","height","tabWidths","Value","createRef","style","tabStyle","flatten","undefined","index","routes","scrollEnabled","flattenedWidth","key","endsWith","parseFloat","Number","isFinite","length","tabBarWidth","layoutWidth","props","state","navigationState","reduce","acc","_","i","gap","getComputedTabWidth","getFlattenedTabWidth","value","getTabBarWidth","maxDistance","getMaxScrollDistance","scrollValue","Math","max","min","OS","isRTL","centerDistance","Array","from","total","tabWidth","scrollAmount","normalizeScrollValue","flatListRef","current","scrollToOffset","offset","getScrollAmount","animated","e","nativeEvent","setState","maxScrollDistance","multiply","add","componentDidUpdate","prevProps","prevState","every","r","resetScroll","render","position","jumpTo","bounces","getAccessibilityLabel","getAccessible","getLabelText","getTestID","renderBadge","renderIcon","renderLabel","renderTabBarItem","activeColor","inactiveColor","pressColor","pressOpacity","onTabPress","onTabLongPress","labelStyle","indicatorStyle","contentContainerStyle","indicatorContainerStyle","isWidthDynamic","separatorsWidth","separatorPercent","tabBarWidthPercent","translateX","getTranslateX","handleLayout","styles","tabBar","indicatorContainer","transform","renderIndicator","getTabWidth","scroll","item","tabContent","container","route","onLayout","measuredTabWidths","onPress","event","defaultPrevented","preventDefault","onLongPress","contentOffset","x","useNativeDriver","title","accessible","accessibilityLabel","testID","create","flex","overflow","select","default","web","backgroundColor","elevation","shadowColor","shadowOpacity","shadowRadius","hairlineWidth","shadowOffset","zIndex","flexDirection","flexWrap","top","left","right","bottom"],"sources":["TabBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Animated,\n  StyleSheet,\n  View,\n  StyleProp,\n  ViewStyle,\n  TextStyle,\n  LayoutChangeEvent,\n  I18nManager,\n  Platform,\n  FlatList,\n  ListRenderItemInfo,\n} from 'react-native';\nimport TabBarItem, { Props as TabBarItemProps } from './TabBarItem';\nimport TabBarIndicator, { Props as IndicatorProps } from './TabBarIndicator';\nimport type {\n  Route,\n  Scene,\n  SceneRendererProps,\n  NavigationState,\n  Layout,\n  Event,\n} from './types';\n\nexport type Props<T extends Route> = SceneRendererProps & {\n  navigationState: NavigationState<T>;\n  scrollEnabled?: boolean;\n  bounces?: boolean;\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?: (\n    scene: Scene<T> & {\n      focused: boolean;\n      color: string;\n    }\n  ) => React.ReactNode;\n  renderIcon?: (\n    scene: Scene<T> & {\n      focused: boolean;\n      color: string;\n    }\n  ) => React.ReactNode;\n  renderBadge?: (scene: Scene<T>) => React.ReactNode;\n  renderIndicator: (props: IndicatorProps<T>) => React.ReactNode;\n  renderTabBarItem?: (\n    props: TabBarItemProps<T> & { key: string }\n  ) => React.ReactElement;\n  onTabPress?: (scene: Scene<T> & Event) => void;\n  onTabLongPress?: (scene: Scene<T>) => void;\n  tabStyle?: StyleProp<ViewStyle>;\n  indicatorStyle?: StyleProp<ViewStyle>;\n  indicatorContainerStyle?: StyleProp<ViewStyle>;\n  labelStyle?: StyleProp<TextStyle>;\n  contentContainerStyle?: StyleProp<ViewStyle>;\n  style?: StyleProp<ViewStyle>;\n  gap?: number;\n};\n\ntype State = {\n  layout: Layout;\n  tabWidths: { [key: string]: number };\n};\n\nconst Separator = ({ width }: { width: number }) => {\n  return <View style={{ width }} />;\n};\n\nexport default class TabBar<T extends Route> extends React.Component<\n  Props<T>,\n  State\n> {\n  static defaultProps = {\n    getLabelText: ({ route }: Scene<Route>) => route.title,\n    getAccessible: ({ route }: Scene<Route>) =>\n      typeof route.accessible !== 'undefined' ? route.accessible : true,\n    getAccessibilityLabel: ({ route }: Scene<Route>) =>\n      typeof route.accessibilityLabel === 'string'\n        ? route.accessibilityLabel\n        : typeof route.title === 'string'\n        ? route.title\n        : undefined,\n    getTestID: ({ route }: Scene<Route>) => route.testID,\n    renderIndicator: (props: IndicatorProps<Route>) => (\n      <TabBarIndicator {...props} />\n    ),\n    gap: 0,\n  };\n\n  state: State = {\n    layout: { width: 0, height: 0 },\n    tabWidths: {},\n  };\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    const { navigationState } = this.props;\n    const { layout, tabWidths } = this.state;\n\n    if (\n      prevProps.navigationState.routes.length !==\n        navigationState.routes.length ||\n      prevProps.navigationState.index !== navigationState.index ||\n      prevState.layout.width !== layout.width ||\n      prevState.tabWidths !== tabWidths\n    ) {\n      if (\n        this.getFlattenedTabWidth(this.props.tabStyle) === 'auto' &&\n        !(\n          layout.width &&\n          navigationState.routes.every(\n            (r) => typeof tabWidths[r.key] === 'number'\n          )\n        )\n      ) {\n        // When tab width is dynamic, only adjust the scroll once we have all tab widths and layout\n        return;\n      }\n\n      this.resetScroll(navigationState.index);\n    }\n  }\n\n  // to store the layout.width of each tab\n  // when all onLayout's are fired, this would be set in state\n  private measuredTabWidths: { [key: string]: number } = {};\n\n  private scrollAmount = new Animated.Value(0);\n\n  private flatListRef = React.createRef<FlatList>();\n\n  private getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {\n    const tabStyle = StyleSheet.flatten(style);\n\n    return tabStyle ? tabStyle.width : undefined;\n  };\n\n  private getComputedTabWidth = (\n    index: number,\n    layout: Layout,\n    routes: Route[],\n    scrollEnabled: boolean | undefined,\n    tabWidths: { [key: string]: number },\n    flattenedWidth: string | number | undefined\n  ) => {\n    if (flattenedWidth === 'auto') {\n      return tabWidths[routes[index].key] || 0;\n    }\n\n    switch (typeof flattenedWidth) {\n      case 'number':\n        return flattenedWidth;\n      case 'string':\n        if (flattenedWidth.endsWith('%')) {\n          const width = parseFloat(flattenedWidth);\n          if (Number.isFinite(width)) {\n            return layout.width * (width / 100);\n          }\n        }\n    }\n\n    if (scrollEnabled) {\n      return (layout.width / 5) * 2;\n    }\n    return layout.width / routes.length;\n  };\n\n  private getMaxScrollDistance = (tabBarWidth: number, layoutWidth: number) =>\n    tabBarWidth - layoutWidth;\n\n  private getTabBarWidth = (props: Props<T>, state: State) => {\n    const { layout, tabWidths } = state;\n    const { scrollEnabled, tabStyle } = props;\n    const { routes } = props.navigationState;\n\n    return routes.reduce<number>(\n      (acc, _, i) =>\n        acc +\n        (i > 0 ? props.gap ?? 0 : 0) +\n        this.getComputedTabWidth(\n          i,\n          layout,\n          routes,\n          scrollEnabled,\n          tabWidths,\n          this.getFlattenedTabWidth(tabStyle)\n        ),\n      0\n    );\n  };\n\n  private normalizeScrollValue = (\n    props: Props<T>,\n    state: State,\n    value: number\n  ) => {\n    const { layout } = state;\n    const tabBarWidth = this.getTabBarWidth(props, state);\n    const maxDistance = this.getMaxScrollDistance(tabBarWidth, layout.width);\n    const scrollValue = Math.max(Math.min(value, maxDistance), 0);\n\n    if (Platform.OS === 'android' && I18nManager.isRTL) {\n      // On Android, scroll value is not applied in reverse in RTL\n      // so we need to manually adjust it to apply correct value\n      return maxDistance - scrollValue;\n    }\n\n    return scrollValue;\n  };\n\n  private getScrollAmount = (props: Props<T>, state: State, index: number) => {\n    const { layout, tabWidths } = state;\n    const { scrollEnabled, tabStyle } = props;\n    const { routes } = props.navigationState;\n\n    const centerDistance = Array.from({ length: index + 1 }).reduce<number>(\n      (total, _, i) => {\n        const tabWidth = this.getComputedTabWidth(\n          i,\n          layout,\n          routes,\n          scrollEnabled,\n          tabWidths,\n          this.getFlattenedTabWidth(tabStyle)\n        );\n\n        // To get the current index centered we adjust scroll amount by width of indexes\n        // 0 through (i - 1) and add half the width of current index i\n        return (\n          total +\n          (index === i\n            ? (tabWidth + (props.gap ?? 0)) / 2\n            : tabWidth + (props.gap ?? 0))\n        );\n      },\n      0\n    );\n\n    const scrollAmount = centerDistance - layout.width / 2;\n\n    return this.normalizeScrollValue(props, state, scrollAmount);\n  };\n\n  private resetScroll = (index: number) => {\n    if (this.props.scrollEnabled) {\n      this.flatListRef.current?.scrollToOffset({\n        offset: this.getScrollAmount(this.props, this.state, index),\n        animated: true,\n      });\n    }\n  };\n\n  private handleLayout = (e: LayoutChangeEvent) => {\n    const { height, width } = e.nativeEvent.layout;\n\n    if (\n      this.state.layout.width === width &&\n      this.state.layout.height === height\n    ) {\n      return;\n    }\n\n    this.setState({\n      layout: {\n        height,\n        width,\n      },\n    });\n  };\n\n  private getTranslateX = (\n    scrollAmount: Animated.Value,\n    maxScrollDistance: number\n  ) =>\n    Animated.multiply(\n      Platform.OS === 'android' && I18nManager.isRTL\n        ? Animated.add(maxScrollDistance, Animated.multiply(scrollAmount, -1))\n        : scrollAmount,\n      I18nManager.isRTL ? 1 : -1\n    );\n\n  render() {\n    const {\n      position,\n      navigationState,\n      jumpTo,\n      scrollEnabled,\n      bounces,\n      getAccessibilityLabel,\n      getAccessible,\n      getLabelText,\n      getTestID,\n      renderBadge,\n      renderIcon,\n      renderLabel,\n      renderTabBarItem,\n      activeColor,\n      inactiveColor,\n      pressColor,\n      pressOpacity,\n      onTabPress,\n      onTabLongPress,\n      tabStyle,\n      labelStyle,\n      indicatorStyle,\n      contentContainerStyle,\n      style,\n      indicatorContainerStyle,\n      gap = 0,\n    } = this.props;\n    const { layout, tabWidths } = this.state;\n    const { routes } = navigationState;\n\n    const isWidthDynamic = this.getFlattenedTabWidth(tabStyle) === 'auto';\n    const tabBarWidth = this.getTabBarWidth(this.props, this.state);\n    const separatorsWidth = Math.max(0, routes.length - 1) * gap;\n    const separatorPercent = (separatorsWidth / tabBarWidth) * 100;\n\n    const tabBarWidthPercent = `${routes.length * 40}%`;\n    const translateX = this.getTranslateX(\n      this.scrollAmount,\n      this.getMaxScrollDistance(tabBarWidth, layout.width)\n    );\n\n    return (\n      <Animated.View\n        onLayout={this.handleLayout}\n        style={[styles.tabBar, style]}\n      >\n        <Animated.View\n          pointerEvents=\"none\"\n          style={[\n            styles.indicatorContainer,\n            scrollEnabled ? { transform: [{ translateX }] as any } : null,\n            tabBarWidth > separatorsWidth\n              ? { width: tabBarWidth - separatorsWidth }\n              : scrollEnabled\n              ? { width: tabBarWidthPercent }\n              : null,\n            indicatorContainerStyle,\n          ]}\n        >\n          {this.props.renderIndicator({\n            position,\n            layout,\n            navigationState,\n            jumpTo,\n            width: isWidthDynamic\n              ? 'auto'\n              : `${(100 - separatorPercent) / routes.length}%`,\n            style: indicatorStyle,\n            getTabWidth: (i: number) =>\n              this.getComputedTabWidth(\n                i,\n                layout,\n                routes,\n                scrollEnabled,\n                tabWidths,\n                this.getFlattenedTabWidth(tabStyle)\n              ),\n            gap,\n          })}\n        </Animated.View>\n        <View style={styles.scroll}>\n          <Animated.FlatList\n            data={routes as Animated.WithAnimatedValue<T>[]}\n            keyExtractor={(item) => item.key}\n            horizontal\n            accessibilityRole=\"tablist\"\n            keyboardShouldPersistTaps=\"handled\"\n            scrollEnabled={scrollEnabled}\n            bounces={bounces}\n            alwaysBounceHorizontal={false}\n            scrollsToTop={false}\n            showsHorizontalScrollIndicator={false}\n            showsVerticalScrollIndicator={false}\n            automaticallyAdjustContentInsets={false}\n            overScrollMode=\"never\"\n            contentContainerStyle={[\n              styles.tabContent,\n              scrollEnabled\n                ? {\n                    width:\n                      tabBarWidth > separatorsWidth\n                        ? tabBarWidth\n                        : tabBarWidthPercent,\n                  }\n                : styles.container,\n              contentContainerStyle,\n            ]}\n            scrollEventThrottle={16}\n            renderItem={({ item: route, index }: ListRenderItemInfo<T>) => {\n              const props: TabBarItemProps<T> & { key: string } = {\n                key: route.key,\n                position: position,\n                route: route,\n                navigationState: navigationState,\n                getAccessibilityLabel: getAccessibilityLabel,\n                getAccessible: getAccessible,\n                getLabelText: getLabelText,\n                getTestID: getTestID,\n                renderBadge: renderBadge,\n                renderIcon: renderIcon,\n                renderLabel: renderLabel,\n                activeColor: activeColor,\n                inactiveColor: inactiveColor,\n                pressColor: pressColor,\n                pressOpacity: pressOpacity,\n                onLayout: isWidthDynamic\n                  ? (e) => {\n                      this.measuredTabWidths[route.key] =\n                        e.nativeEvent.layout.width;\n\n                      // When we have measured widths for all of the tabs, we should updates the state\n                      // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app\n                      if (\n                        routes.every(\n                          (r) =>\n                            typeof this.measuredTabWidths[r.key] === 'number'\n                        )\n                      ) {\n                        this.setState({\n                          tabWidths: { ...this.measuredTabWidths },\n                        });\n                      }\n                    }\n                  : undefined,\n                onPress: () => {\n                  const event: Scene<T> & Event = {\n                    route,\n                    defaultPrevented: false,\n                    preventDefault: () => {\n                      event.defaultPrevented = true;\n                    },\n                  };\n\n                  onTabPress?.(event);\n\n                  if (event.defaultPrevented) {\n                    return;\n                  }\n\n                  this.props.jumpTo(route.key);\n                },\n                onLongPress: () => onTabLongPress?.({ route }),\n                labelStyle: labelStyle,\n                style: [\n                  tabStyle,\n                  // Calculate the deafult width for tab for FlatList to work.\n                  this.getFlattenedTabWidth(tabStyle) === undefined && {\n                    width: this.getComputedTabWidth(\n                      index,\n                      layout,\n                      routes,\n                      scrollEnabled,\n                      tabWidths,\n                      this.getFlattenedTabWidth(tabStyle)\n                    ),\n                  },\n                ],\n              };\n\n              return (\n                <React.Fragment key={route.key}>\n                  {gap > 0 && index > 0 ? <Separator width={gap} /> : null}\n                  {renderTabBarItem ? (\n                    renderTabBarItem(props)\n                  ) : (\n                    <TabBarItem {...props} />\n                  )}\n                </React.Fragment>\n              );\n            }}\n            onScroll={Animated.event(\n              [\n                {\n                  nativeEvent: {\n                    contentOffset: { x: this.scrollAmount },\n                  },\n                },\n              ],\n              { useNativeDriver: true }\n            )}\n            ref={this.flatListRef}\n          />\n        </View>\n      </Animated.View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  scroll: {\n    overflow: Platform.select({ default: 'scroll', web: undefined }),\n  },\n  tabBar: {\n    backgroundColor: '#2196f3',\n    elevation: 4,\n    shadowColor: 'black',\n    shadowOpacity: 0.1,\n    shadowRadius: StyleSheet.hairlineWidth,\n    shadowOffset: {\n      height: StyleSheet.hairlineWidth,\n      width: 0,\n    },\n    zIndex: 1,\n  },\n  tabContent: {\n    flexDirection: 'row',\n    flexWrap: 'nowrap',\n  },\n  indicatorContainer: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n});\n"],"mappings":"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"}

package/lib/module/TabBarIndicator.js

@@ -3,8 +3,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import * as React from 'react';
 import { Animated, Easing, StyleSheet, I18nManager, Platform } from 'react-native';
 export default class TabBarIndicator extends React.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "fadeInIndicator", () => {
       const {
@@ -30,12 +30,12 @@ export default class TabBarIndicator extends React.Component {
 
     _defineProperty(this, "opacity", new Animated.Value(this.props.width === 'auto' ? 0 : 1));
 
-    _defineProperty(this, "getTranslateX", (position, routes, getTabWidth) => {
+    _defineProperty(this, "getTranslateX", (position, routes, getTabWidth, gap) => {
       const inputRange = routes.map((_, i) => i); // every index contains widths at all previous indices
 
       const outputRange = routes.reduce((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({
         inputRange,
@@ -61,7 +61,8 @@ export default class TabBarIndicator extends React.Component {
       getTabWidth,
       width,
       style,
-      layout
+      layout,
+      gap
     } = this.props;
     const {
       routes
@@ -69,7 +70,7 @@ export default class TabBarIndicator extends React.Component {
     const transform = [];
 
     if (layout.width) {
-      const translateX = routes.length > 1 ? this.getTranslateX(position, routes, getTabWidth) : 0;
+      const translateX = routes.length > 1 ? this.getTranslateX(position, routes, getTabWidth, gap) : 0;
       transform.push({
         translateX
       });

package/lib/module/TabBarIndicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TabBarIndicator.tsx"],"names":["React","Animated","Easing","StyleSheet","I18nManager","Platform","TabBarIndicator","Component","navigationState","layout","width","getTabWidth","props","isIndicatorShown","routes","every","_","i","timing","opacity","toValue","duration","easing","in","linear","useNativeDriver","start","Value","position","inputRange","map","outputRange","reduce","acc","translateX","interpolate","extrapolate","multiply","isRTL","componentDidMount","fadeInIndicator","componentDidUpdate","render","style","transform","length","getTranslateX","push","scaleX","styles","indicator","OS","left","index","create","backgroundColor","bottom","right","height"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  Animated,\n  Easing,\n  StyleSheet,\n  I18nManager,\n  StyleProp,\n  ViewStyle,\n  Platform,\n} from 'react-native';\n\nimport type { Route, SceneRendererProps, NavigationState } from './types';\n\nexport type GetTabWidth = (index: number) => number;\n\nexport type Props<T extends Route> = SceneRendererProps & {\n  navigationState: NavigationState<T>;\n  width: string | number;\n  style?: StyleProp<ViewStyle>;\n  getTabWidth: GetTabWidth;\n};\n\nexport default class TabBarIndicator<T extends Route> extends React.Component<\n  Props<T>\n> {\n  componentDidMount() {\n    this.fadeInIndicator();\n  }\n\n  componentDidUpdate() {\n    this.fadeInIndicator();\n  }\n\n  private fadeInIndicator = () => {\n    const { navigationState, layout, width, getTabWidth } = this.props;\n\n    if (\n      !this.isIndicatorShown &&\n      width === 'auto' &&\n      layout.width &&\n      // We should fade-in the indicator when we have widths for all the tab items\n      navigationState.routes.every((_, i) => getTabWidth(i))\n    ) {\n      this.isIndicatorShown = true;\n\n      Animated.timing(this.opacity, {\n        toValue: 1,\n        duration: 150,\n        easing: Easing.in(Easing.linear),\n        useNativeDriver: true,\n      }).start();\n    }\n  };\n\n  private isIndicatorShown = false;\n\n  private opacity = new Animated.Value(this.props.width === 'auto' ? 0 : 1);\n\n  private getTranslateX = (\n    position: Animated.AnimatedInterpolation,\n    routes: Route[],\n    getTabWidth: GetTabWidth\n  ) => {\n    const inputRange = routes.map((_, i) => i);\n\n    // every index contains widths at all previous indices\n    const outputRange = routes.reduce<number[]>((acc, _, i) => {\n      if (i === 0) return [0];\n      return [...acc, acc[i - 1] + getTabWidth(i - 1)];\n    }, []);\n\n    const translateX = position.interpolate({\n      inputRange,\n      outputRange,\n      extrapolate: 'clamp',\n    });\n\n    return Animated.multiply(translateX, I18nManager.isRTL ? -1 : 1);\n  };\n\n  render() {\n    const { position, navigationState, getTabWidth, width, style, layout } =\n      this.props;\n    const { routes } = navigationState;\n\n    const transform = [];\n\n    if (layout.width) {\n      const translateX =\n        routes.length > 1\n          ? this.getTranslateX(position, routes, getTabWidth)\n          : 0;\n\n      transform.push({ translateX });\n    }\n\n    if (width === 'auto') {\n      const inputRange = routes.map((_, i) => i);\n      const outputRange = inputRange.map(getTabWidth);\n\n      transform.push(\n        {\n          scaleX:\n            routes.length > 1\n              ? position.interpolate({\n                  inputRange,\n                  outputRange,\n                  extrapolate: 'clamp',\n                })\n              : outputRange[0],\n        },\n        { translateX: 0.5 }\n      );\n    }\n\n    return (\n      <Animated.View\n        style={[\n          styles.indicator,\n          { width: width === 'auto' ? 1 : width },\n          // If layout is not available, use `left` property for positioning the indicator\n          // This avoids rendering delay until we are able to calculate translateX\n          // If platform is macos use `left` property as `transform` is broken at the moment.\n          // See: https://github.com/microsoft/react-native-macos/issues/280\n          layout.width && Platform.OS !== 'macos'\n            ? { left: 0 }\n            : { left: `${(100 / routes.length) * navigationState.index}%` },\n          { transform },\n          width === 'auto' ? { opacity: this.opacity } : null,\n          style,\n        ]}\n      />\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  indicator: {\n    backgroundColor: '#ffeb3b',\n    position: 'absolute',\n    left: 0,\n    bottom: 0,\n    right: 0,\n    height: 2,\n  },\n});\n"]}
+{"version":3,"names":["React","Animated","Easing","StyleSheet","I18nManager","Platform","TabBarIndicator","Component","navigationState","layout","width","getTabWidth","props","isIndicatorShown","routes","every","_","i","timing","opacity","toValue","duration","easing","in","linear","useNativeDriver","start","Value","position","gap","inputRange","map","outputRange","reduce","acc","translateX","interpolate","extrapolate","multiply","isRTL","componentDidMount","fadeInIndicator","componentDidUpdate","render","style","transform","length","getTranslateX","push","scaleX","styles","indicator","OS","left","index","create","backgroundColor","bottom","right","height"],"sources":["TabBarIndicator.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Animated,\n  Easing,\n  StyleSheet,\n  I18nManager,\n  StyleProp,\n  ViewStyle,\n  Platform,\n} from 'react-native';\n\nimport type { Route, SceneRendererProps, NavigationState } from './types';\n\nexport type GetTabWidth = (index: number) => number;\n\nexport type Props<T extends Route> = SceneRendererProps & {\n  navigationState: NavigationState<T>;\n  width: string | number;\n  style?: StyleProp<ViewStyle>;\n  getTabWidth: GetTabWidth;\n  gap?: number;\n};\n\nexport default class TabBarIndicator<T extends Route> extends React.Component<\n  Props<T>\n> {\n  componentDidMount() {\n    this.fadeInIndicator();\n  }\n\n  componentDidUpdate() {\n    this.fadeInIndicator();\n  }\n\n  private fadeInIndicator = () => {\n    const { navigationState, layout, width, getTabWidth } = this.props;\n\n    if (\n      !this.isIndicatorShown &&\n      width === 'auto' &&\n      layout.width &&\n      // We should fade-in the indicator when we have widths for all the tab items\n      navigationState.routes.every((_, i) => getTabWidth(i))\n    ) {\n      this.isIndicatorShown = true;\n\n      Animated.timing(this.opacity, {\n        toValue: 1,\n        duration: 150,\n        easing: Easing.in(Easing.linear),\n        useNativeDriver: true,\n      }).start();\n    }\n  };\n\n  private isIndicatorShown = false;\n\n  private opacity = new Animated.Value(this.props.width === 'auto' ? 0 : 1);\n\n  private getTranslateX = (\n    position: Animated.AnimatedInterpolation,\n    routes: Route[],\n    getTabWidth: GetTabWidth,\n    gap?: number\n  ) => {\n    const inputRange = routes.map((_, i) => i);\n\n    // every index contains widths at all previous indices\n    const outputRange = routes.reduce<number[]>((acc, _, i) => {\n      if (i === 0) return [0];\n      return [...acc, acc[i - 1] + getTabWidth(i - 1) + (gap ?? 0)];\n    }, []);\n\n    const translateX = position.interpolate({\n      inputRange,\n      outputRange,\n      extrapolate: 'clamp',\n    });\n\n    return Animated.multiply(translateX, I18nManager.isRTL ? -1 : 1);\n  };\n\n  render() {\n    const {\n      position,\n      navigationState,\n      getTabWidth,\n      width,\n      style,\n      layout,\n      gap,\n    } = this.props;\n    const { routes } = navigationState;\n\n    const transform = [];\n\n    if (layout.width) {\n      const translateX =\n        routes.length > 1\n          ? this.getTranslateX(position, routes, getTabWidth, gap)\n          : 0;\n\n      transform.push({ translateX });\n    }\n\n    if (width === 'auto') {\n      const inputRange = routes.map((_, i) => i);\n      const outputRange = inputRange.map(getTabWidth);\n\n      transform.push(\n        {\n          scaleX:\n            routes.length > 1\n              ? position.interpolate({\n                  inputRange,\n                  outputRange,\n                  extrapolate: 'clamp',\n                })\n              : outputRange[0],\n        },\n        { translateX: 0.5 }\n      );\n    }\n\n    return (\n      <Animated.View\n        style={[\n          styles.indicator,\n          { width: width === 'auto' ? 1 : width },\n          // If layout is not available, use `left` property for positioning the indicator\n          // This avoids rendering delay until we are able to calculate translateX\n          // If platform is macos use `left` property as `transform` is broken at the moment.\n          // See: https://github.com/microsoft/react-native-macos/issues/280\n          layout.width && Platform.OS !== 'macos'\n            ? { left: 0 }\n            : { left: `${(100 / routes.length) * navigationState.index}%` },\n          { transform },\n          width === 'auto' ? { opacity: this.opacity } : null,\n          style,\n        ]}\n      />\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  indicator: {\n    backgroundColor: '#ffeb3b',\n    position: 'absolute',\n    left: 0,\n    bottom: 0,\n    right: 0,\n    height: 2,\n  },\n});\n"],"mappings":"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"}

package/lib/module/TabBarItem.js

@@ -6,8 +6,8 @@ import PlatformPressable from './PlatformPressable';
 const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
 const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
 export default class TabBarItem extends React.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "getActiveOpacity", (position, routes, tabIndex) => {
       if (routes.length > 1) {
@@ -93,10 +93,11 @@ export default class TabBarItem extends React.Component {
       }
     }
 
-    const renderLabel = renderLabelCustom !== undefined ? renderLabelCustom : ({
-      route,
-      color
-    }) => {
+    const renderLabel = renderLabelCustom !== undefined ? renderLabelCustom : _ref => {
+      let {
+        route,
+        color
+      } = _ref;
       const labelText = getLabelText({
         route
       });