react-native-tab-view 3.2.0 → 3.3.0

package/lib/commonjs/TabBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["Separator","width","TabBar","React","Component","layout","height","tabWidths","Animated","Value","createRef","style","tabStyle","StyleSheet","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","Platform","OS","I18nManager","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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"}
+{"version":3,"names":["Separator","width","getFlattenedTabWidth","style","tabStyle","StyleSheet","flatten","getComputedTabWidth","index","layout","routes","scrollEnabled","tabWidths","flattenedWidth","key","endsWith","parseFloat","Number","isFinite","length","getMaxScrollDistance","tabBarWidth","layoutWidth","getTranslateX","scrollAmount","maxScrollDistance","Animated","multiply","Platform","OS","I18nManager","isRTL","add","getTabBarWidth","navigationState","gap","flattenedTabWidth","reduce","acc","_","i","normalizeScrollValue","value","maxDistance","scrollValue","Math","max","min","getScrollAmount","centerDistance","Array","from","total","tabWidth","getLabelTextDefault","route","title","getAccessibleDefault","accessible","getAccessibilityLabelDefault","accessibilityLabel","undefined","renderIndicatorDefault","props","getTestIdDefault","testID","TabBar","getLabelText","getAccessible","getAccessibilityLabel","getTestID","renderIndicator","jumpTo","position","activeColor","bounces","contentContainerStyle","inactiveColor","indicatorContainerStyle","indicatorStyle","labelStyle","onTabLongPress","onTabPress","pressColor","pressOpacity","renderBadge","renderIcon","renderLabel","renderTabBarItem","setLayout","React","useState","height","setTabWidths","flatListRef","useRef","isFirst","useAnimatedValue","measuredTabWidths","isWidthDynamic","scrollOffset","hasMeasuredTabWidths","Boolean","every","r","useEffect","current","scrollToOffset","offset","animated","handleLayout","e","nativeEvent","separatorsWidth","separatorPercent","tabBarWidthPercent","translateX","useMemo","renderItem","useCallback","item","onLayout","onPress","event","defaultPrevented","preventDefault","onLongPress","defaultTabWidth","keyExtractor","contentContainerStyleMemoized","styles","tabContent","container","handleScroll","contentOffset","x","useNativeDriver","tabBar","indicatorContainer","transform","getTabWidth","scroll","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';\nimport useAnimatedValue from './useAnimatedValue';\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 FlattenedTabWidth = string | number | undefined;\n\nconst Separator = ({ width }: { width: number }) => {\n  return <View style={{ width }} />;\n};\n\nconst getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {\n  const tabStyle = StyleSheet.flatten(style);\n\n  return tabStyle?.width;\n};\n\nconst getComputedTabWidth = (\n  index: number,\n  layout: Layout,\n  routes: Route[],\n  scrollEnabled: boolean | undefined,\n  tabWidths: { [key: string]: number },\n  flattenedWidth: FlattenedTabWidth\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\nconst getMaxScrollDistance = (tabBarWidth: number, layoutWidth: number) =>\n  tabBarWidth - layoutWidth;\n\nconst 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\nconst getTabBarWidth = <T extends Route>({\n  navigationState,\n  layout,\n  gap,\n  scrollEnabled,\n  flattenedTabWidth,\n  tabWidths,\n}: Pick<Props<T>, 'navigationState' | 'gap' | 'layout' | 'scrollEnabled'> & {\n  tabWidths: Record<string, number>;\n  flattenedTabWidth: FlattenedTabWidth;\n}) => {\n  const { routes } = navigationState;\n\n  return routes.reduce<number>(\n    (acc, _, i) =>\n      acc +\n      (i > 0 ? gap ?? 0 : 0) +\n      getComputedTabWidth(\n        i,\n        layout,\n        routes,\n        scrollEnabled,\n        tabWidths,\n        flattenedTabWidth\n      ),\n    0\n  );\n};\n\nconst normalizeScrollValue = <T extends Route>({\n  layout,\n  navigationState,\n  gap,\n  scrollEnabled,\n  tabWidths,\n  value,\n  flattenedTabWidth,\n}: Pick<Props<T>, 'layout' | 'navigationState' | 'gap' | 'scrollEnabled'> & {\n  tabWidths: Record<string, number>;\n  value: number;\n  flattenedTabWidth: FlattenedTabWidth;\n}) => {\n  const tabBarWidth = getTabBarWidth({\n    layout,\n    navigationState,\n    tabWidths,\n    gap,\n    scrollEnabled,\n    flattenedTabWidth,\n  });\n  const maxDistance = 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\nconst getScrollAmount = <T extends Route>({\n  layout,\n  navigationState,\n  gap,\n  scrollEnabled,\n  flattenedTabWidth,\n  tabWidths,\n}: Pick<Props<T>, 'layout' | 'navigationState' | 'scrollEnabled' | 'gap'> & {\n  tabWidths: Record<string, number>;\n  flattenedTabWidth: FlattenedTabWidth;\n}) => {\n  const centerDistance = Array.from({\n    length: navigationState.index + 1,\n  }).reduce<number>((total, _, i) => {\n    const tabWidth = getComputedTabWidth(\n      i,\n      layout,\n      navigationState.routes,\n      scrollEnabled,\n      tabWidths,\n      flattenedTabWidth\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      (navigationState.index === i\n        ? (tabWidth + (gap ?? 0)) / 2\n        : tabWidth + (gap ?? 0))\n    );\n  }, 0);\n\n  const scrollAmount = centerDistance - layout.width / 2;\n\n  return normalizeScrollValue({\n    layout,\n    navigationState,\n    tabWidths,\n    value: scrollAmount,\n    gap,\n    scrollEnabled,\n    flattenedTabWidth,\n  });\n};\n\nconst getLabelTextDefault = ({ route }: Scene<Route>) => route.title;\n\nconst getAccessibleDefault = ({ route }: Scene<Route>) =>\n  typeof route.accessible !== 'undefined' ? route.accessible : true;\n\nconst getAccessibilityLabelDefault = ({ route }: Scene<Route>) =>\n  typeof route.accessibilityLabel === 'string'\n    ? route.accessibilityLabel\n    : typeof route.title === 'string'\n    ? route.title\n    : undefined;\n\nconst renderIndicatorDefault = (props: IndicatorProps<Route>) => (\n  <TabBarIndicator {...props} />\n);\n\nconst getTestIdDefault = ({ route }: Scene<Route>) => route.testID;\n\nexport default function TabBar<T extends Route>({\n  getLabelText = getLabelTextDefault,\n  getAccessible = getAccessibleDefault,\n  getAccessibilityLabel = getAccessibilityLabelDefault,\n  getTestID = getTestIdDefault,\n  renderIndicator = renderIndicatorDefault,\n  gap = 0,\n  scrollEnabled,\n  jumpTo,\n  navigationState,\n  position,\n  activeColor,\n  bounces,\n  contentContainerStyle,\n  inactiveColor,\n  indicatorContainerStyle,\n  indicatorStyle,\n  labelStyle,\n  onTabLongPress,\n  onTabPress,\n  pressColor,\n  pressOpacity,\n  renderBadge,\n  renderIcon,\n  renderLabel,\n  renderTabBarItem,\n  style,\n  tabStyle,\n}: Props<T>) {\n  const [layout, setLayout] = React.useState<Layout>({ width: 0, height: 0 });\n  const [tabWidths, setTabWidths] = React.useState<Record<string, number>>({});\n  const flatListRef = React.useRef<FlatList>(null);\n  const isFirst = React.useRef(true);\n  const scrollAmount = useAnimatedValue(0);\n  const measuredTabWidths = React.useRef<Record<string, number>>({});\n\n  const { routes } = navigationState;\n  const flattenedTabWidth = getFlattenedTabWidth(tabStyle);\n  const isWidthDynamic = flattenedTabWidth === 'auto';\n  const scrollOffset = getScrollAmount({\n    layout,\n    navigationState,\n    tabWidths,\n    gap,\n    scrollEnabled,\n    flattenedTabWidth,\n  });\n\n  const hasMeasuredTabWidths =\n    Boolean(layout.width) &&\n    routes.every((r) => typeof tabWidths[r.key] === 'number');\n\n  React.useEffect(() => {\n    if (isFirst.current) {\n      isFirst.current = false;\n      return;\n    }\n\n    if (isWidthDynamic && !hasMeasuredTabWidths) {\n      // When tab width is dynamic, only adjust the scroll once we have all tab widths and layout\n      return;\n    }\n\n    if (scrollEnabled) {\n      flatListRef.current?.scrollToOffset({\n        offset: scrollOffset,\n        animated: true,\n      });\n    }\n  }, [hasMeasuredTabWidths, isWidthDynamic, scrollEnabled, scrollOffset]);\n\n  const handleLayout = (e: LayoutChangeEvent) => {\n    const { height, width } = e.nativeEvent.layout;\n\n    setLayout((layout) =>\n      layout.width === width && layout.height === height\n        ? layout\n        : { width, height }\n    );\n  };\n\n  const tabBarWidth = getTabBarWidth({\n    layout,\n    navigationState,\n    tabWidths,\n    gap,\n    scrollEnabled,\n    flattenedTabWidth,\n  });\n\n  const separatorsWidth = Math.max(0, routes.length - 1) * gap;\n  const separatorPercent = (separatorsWidth / tabBarWidth) * 100;\n  const tabBarWidthPercent = `${routes.length * 40}%`;\n\n  const translateX = React.useMemo(\n    () =>\n      getTranslateX(\n        scrollAmount,\n        getMaxScrollDistance(tabBarWidth, layout.width)\n      ),\n    [layout.width, scrollAmount, tabBarWidth]\n  );\n\n  const renderItem = React.useCallback(\n    ({ 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: LayoutChangeEvent) => {\n              measuredTabWidths.current[route.key] = 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) => typeof measuredTabWidths.current[r.key] === 'number'\n                )\n              ) {\n                setTabWidths({ ...measuredTabWidths.current });\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          jumpTo(route.key);\n        },\n        onLongPress: () => onTabLongPress?.({ route }),\n        labelStyle: labelStyle,\n        style: tabStyle,\n        // Calculate the deafult width for tab for FlatList to work\n        defaultTabWidth: !isWidthDynamic\n          ? getComputedTabWidth(\n              index,\n              layout,\n              routes,\n              scrollEnabled,\n              tabWidths,\n              getFlattenedTabWidth(tabStyle)\n            )\n          : undefined,\n      };\n\n      return (\n        <>\n          {gap > 0 && index > 0 ? <Separator width={gap} /> : null}\n          {renderTabBarItem ? (\n            renderTabBarItem(props)\n          ) : (\n            <TabBarItem {...props} />\n          )}\n        </>\n      );\n    },\n    [\n      activeColor,\n      gap,\n      getAccessibilityLabel,\n      getAccessible,\n      getLabelText,\n      getTestID,\n      inactiveColor,\n      isWidthDynamic,\n      jumpTo,\n      labelStyle,\n      layout,\n      navigationState,\n      onTabLongPress,\n      onTabPress,\n      position,\n      pressColor,\n      pressOpacity,\n      renderBadge,\n      renderIcon,\n      renderLabel,\n      renderTabBarItem,\n      routes,\n      scrollEnabled,\n      tabStyle,\n      tabWidths,\n    ]\n  );\n\n  const keyExtractor = React.useCallback((item: T) => item.key, []);\n\n  const contentContainerStyleMemoized = React.useMemo(\n    () => [\n      styles.tabContent,\n      scrollEnabled\n        ? {\n            width:\n              tabBarWidth > separatorsWidth ? tabBarWidth : tabBarWidthPercent,\n          }\n        : styles.container,\n      contentContainerStyle,\n    ],\n    [\n      contentContainerStyle,\n      scrollEnabled,\n      separatorsWidth,\n      tabBarWidth,\n      tabBarWidthPercent,\n    ]\n  );\n\n  const handleScroll = React.useMemo(\n    () =>\n      Animated.event(\n        [\n          {\n            nativeEvent: {\n              contentOffset: { x: scrollAmount },\n            },\n          },\n        ],\n        { useNativeDriver: true }\n      ),\n    [scrollAmount]\n  );\n\n  return (\n    <Animated.View onLayout={handleLayout} style={[styles.tabBar, style]}>\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        {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            getComputedTabWidth(\n              i,\n              layout,\n              routes,\n              scrollEnabled,\n              tabWidths,\n              flattenedTabWidth\n            ),\n          gap,\n        })}\n      </Animated.View>\n      <View style={styles.scroll}>\n        <Animated.FlatList\n          data={routes as Animated.WithAnimatedValue<T>[]}\n          keyExtractor={keyExtractor}\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={contentContainerStyleMemoized}\n          scrollEventThrottle={16}\n          renderItem={renderItem}\n          onScroll={handleScroll}\n          ref={flatListRef}\n        />\n      </View>\n    </Animated.View>\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/commonjs/TabBarIndicator.js

@@ -3,130 +3,112 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = TabBarIndicator;
 
 var React = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var _useAnimatedValue = _interopRequireDefault(require("./useAnimatedValue"));
 
-class TabBarIndicator extends React.Component {
-  constructor() {
-    super(...arguments);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-    _defineProperty(this, "fadeInIndicator", () => {
-      const {
-        navigationState,
-        layout,
-        width,
-        getTabWidth
-      } = this.props;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-      if (!this.isIndicatorShown && width === 'auto' && layout.width && // We should fade-in the indicator when we have widths for all the tab items
-      navigationState.routes.every((_, i) => getTabWidth(i))) {
-        this.isIndicatorShown = true;
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-        _reactNative.Animated.timing(this.opacity, {
+const 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) + (gap ?? 0)];
+  }, []);
+  const translateX = position.interpolate({
+    inputRange,
+    outputRange,
+    extrapolate: 'clamp'
+  });
+  return _reactNative.Animated.multiply(translateX, _reactNative.I18nManager.isRTL ? -1 : 1);
+};
+
+function TabBarIndicator(_ref) {
+  let {
+    getTabWidth,
+    layout,
+    navigationState,
+    position,
+    width,
+    gap,
+    style
+  } = _ref;
+  const isIndicatorShown = React.useRef(false);
+  const isWidthDynamic = width === 'auto';
+  const opacity = (0, _useAnimatedValue.default)(isWidthDynamic ? 0 : 1);
+  const hasMeasuredTabWidths = Boolean(layout.width) && navigationState.routes.every((_, i) => getTabWidth(i));
+  React.useEffect(() => {
+    const fadeInIndicator = () => {
+      if (!isIndicatorShown.current && isWidthDynamic && // We should fade-in the indicator when we have widths for all the tab items
+      hasMeasuredTabWidths) {
+        isIndicatorShown.current = true;
+
+        _reactNative.Animated.timing(opacity, {
           toValue: 1,
           duration: 150,
           easing: _reactNative.Easing.in(_reactNative.Easing.linear),
           useNativeDriver: true
         }).start();
       }
+    };
+
+    fadeInIndicator();
+    return () => opacity.stopAnimation();
+  }, [hasMeasuredTabWidths, isWidthDynamic, opacity]);
+  const {
+    routes
+  } = navigationState;
+  const transform = [];
+
+  if (layout.width) {
+    const translateX = routes.length > 1 ? getTranslateX(position, routes, getTabWidth, gap) : 0;
+    transform.push({
+      translateX
     });
+  }
 
-    _defineProperty(this, "isIndicatorShown", false);
-
-    _defineProperty(this, "opacity", new _reactNative.Animated.Value(this.props.width === 'auto' ? 0 : 1));
-
-    _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) + (gap ?? 0)];
-      }, []);
-      const translateX = position.interpolate({
+  if (width === 'auto') {
+    const inputRange = routes.map((_, i) => i);
+    const outputRange = inputRange.map(getTabWidth);
+    transform.push({
+      scaleX: routes.length > 1 ? position.interpolate({
         inputRange,
         outputRange,
         extrapolate: 'clamp'
-      });
-      return _reactNative.Animated.multiply(translateX, _reactNative.I18nManager.isRTL ? -1 : 1);
-    });
-  }
-
-  componentDidMount() {
-    this.fadeInIndicator();
-  }
-
-  componentDidUpdate() {
-    this.fadeInIndicator();
-  }
-
-  render() {
-    const {
-      position,
-      navigationState,
-      getTabWidth,
-      width,
-      style,
-      layout,
-      gap
-    } = this.props;
-    const {
-      routes
-    } = navigationState;
-    const transform = [];
-
-    if (layout.width) {
-      const translateX = routes.length > 1 ? this.getTranslateX(position, routes, getTabWidth, gap) : 0;
-      transform.push({
-        translateX
-      });
-    }
-
-    if (width === 'auto') {
-      const inputRange = routes.map((_, i) => i);
-      const outputRange = inputRange.map(getTabWidth);
-      transform.push({
-        scaleX: routes.length > 1 ? position.interpolate({
-          inputRange,
-          outputRange,
-          extrapolate: 'clamp'
-        }) : outputRange[0]
-      }, {
-        translateX: 0.5
-      });
-    }
-
-    return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
-      style: [styles.indicator, {
-        width: width === 'auto' ? 1 : width
-      }, // If layout is not available, use `left` property for positioning the indicator
-      // This avoids rendering delay until we are able to calculate translateX
-      // If platform is macos use `left` property as `transform` is broken at the moment.
-      // See: https://github.com/microsoft/react-native-macos/issues/280
-      layout.width && _reactNative.Platform.OS !== 'macos' ? {
-        left: 0
-      } : {
-        left: `${100 / routes.length * navigationState.index}%`
-      }, {
-        transform
-      }, width === 'auto' ? {
-        opacity: this.opacity
-      } : null, style]
+      }) : outputRange[0]
+    }, {
+      translateX: 0.5
     });
   }
 
+  return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
+    style: [styles.indicator, {
+      width: width === 'auto' ? 1 : width
+    }, // If layout is not available, use `left` property for positioning the indicator
+    // This avoids rendering delay until we are able to calculate translateX
+    // If platform is macos use `left` property as `transform` is broken at the moment.
+    // See: https://github.com/microsoft/react-native-macos/issues/280
+    layout.width && _reactNative.Platform.OS !== 'macos' ? {
+      left: 0
+    } : {
+      left: `${100 / routes.length * navigationState.index}%`
+    }, {
+      transform
+    }, width === 'auto' ? {
+      opacity: opacity
+    } : null, style]
+  });
 }
 
-exports.default = TabBarIndicator;
-
 const styles = _reactNative.StyleSheet.create({
   indicator: {
     backgroundColor: '#ffeb3b',

package/lib/commonjs/TabBarIndicator.js.map

@@ -1 +1 @@
-{"version":3,"names":["TabBarIndicator","React","Component","navigationState","layout","width","getTabWidth","props","isIndicatorShown","routes","every","_","i","Animated","timing","opacity","toValue","duration","easing","Easing","in","linear","useNativeDriver","start","Value","position","gap","inputRange","map","outputRange","reduce","acc","translateX","interpolate","extrapolate","multiply","I18nManager","isRTL","componentDidMount","fadeInIndicator","componentDidUpdate","render","style","transform","length","getTranslateX","push","scaleX","styles","indicator","Platform","OS","left","index","StyleSheet","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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"}
+{"version":3,"names":["getTranslateX","position","routes","getTabWidth","gap","inputRange","map","_","i","outputRange","reduce","acc","translateX","interpolate","extrapolate","Animated","multiply","I18nManager","isRTL","TabBarIndicator","layout","navigationState","width","style","isIndicatorShown","React","useRef","isWidthDynamic","opacity","useAnimatedValue","hasMeasuredTabWidths","Boolean","every","useEffect","fadeInIndicator","current","timing","toValue","duration","easing","Easing","in","linear","useNativeDriver","start","stopAnimation","transform","length","push","scaleX","styles","indicator","Platform","OS","left","index","StyleSheet","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';\nimport useAnimatedValue from './useAnimatedValue';\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\nconst 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\nexport default function TabBarIndicator<T extends Route>({\n  getTabWidth,\n  layout,\n  navigationState,\n  position,\n  width,\n  gap,\n  style,\n}: Props<T>) {\n  const isIndicatorShown = React.useRef(false);\n  const isWidthDynamic = width === 'auto';\n\n  const opacity = useAnimatedValue(isWidthDynamic ? 0 : 1);\n\n  const hasMeasuredTabWidths =\n    Boolean(layout.width) &&\n    navigationState.routes.every((_, i) => getTabWidth(i));\n\n  React.useEffect(() => {\n    const fadeInIndicator = () => {\n      if (\n        !isIndicatorShown.current &&\n        isWidthDynamic &&\n        // We should fade-in the indicator when we have widths for all the tab items\n        hasMeasuredTabWidths\n      ) {\n        isIndicatorShown.current = true;\n\n        Animated.timing(opacity, {\n          toValue: 1,\n          duration: 150,\n          easing: Easing.in(Easing.linear),\n          useNativeDriver: true,\n        }).start();\n      }\n    };\n\n    fadeInIndicator();\n\n    return () => opacity.stopAnimation();\n  }, [hasMeasuredTabWidths, isWidthDynamic, opacity]);\n\n  const { routes } = navigationState;\n\n  const transform = [];\n\n  if (layout.width) {\n    const translateX =\n      routes.length > 1 ? getTranslateX(position, routes, getTabWidth, gap) : 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: opacity } : null,\n        style,\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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"}