react-native-tab-view 3.2.1 → 3.3.2

package/src/TabBar.tsx

@@ -1,27 +1,31 @@
 import * as React from 'react';
 import {
   Animated,
+  FlatList,
+  I18nManager,
+  LayoutChangeEvent,
+  ListRenderItemInfo,
+  Platform,
+  StyleProp,
   StyleSheet,
+  TextStyle,
   View,
-  StyleProp,
   ViewStyle,
-  TextStyle,
-  LayoutChangeEvent,
-  I18nManager,
-  Platform,
-  FlatList,
-  ListRenderItemInfo,
+  ViewToken,
 } from 'react-native';
-import TabBarItem, { Props as TabBarItemProps } from './TabBarItem';
+import useLatestCallback from 'use-latest-callback';
+
 import TabBarIndicator, { Props as IndicatorProps } from './TabBarIndicator';
+import TabBarItem, { Props as TabBarItemProps } from './TabBarItem';
 import type {
+  Event,
+  Layout,
+  NavigationState,
   Route,
   Scene,
   SceneRendererProps,
-  NavigationState,
-  Layout,
-  Event,
 } from './types';
+import useAnimatedValue from './useAnimatedValue';
 
 export type Props<T extends Route> = SceneRendererProps & {
   navigationState: NavigationState<T>;
@@ -31,10 +35,10 @@ export type Props<T extends Route> = SceneRendererProps & {
   inactiveColor?: string;
   pressColor?: string;
   pressOpacity?: number;
-  getLabelText: (scene: Scene<T>) => string | undefined;
-  getAccessible: (scene: Scene<T>) => boolean | undefined;
-  getAccessibilityLabel: (scene: Scene<T>) => string | undefined;
-  getTestID: (scene: Scene<T>) => string | undefined;
+  getLabelText?: (scene: Scene<T>) => string | undefined;
+  getAccessible?: (scene: Scene<T>) => boolean | undefined;
+  getAccessibilityLabel?: (scene: Scene<T>) => string | undefined;
+  getTestID?: (scene: Scene<T>) => string | undefined;
   renderLabel?: (
     scene: Scene<T> & {
       focused: boolean;
@@ -48,7 +52,7 @@ export type Props<T extends Route> = SceneRendererProps & {
     }
   ) => React.ReactNode;
   renderBadge?: (scene: Scene<T>) => React.ReactNode;
-  renderIndicator: (props: IndicatorProps<T>) => React.ReactNode;
+  renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;
   renderTabBarItem?: (
     props: TabBarItemProps<T> & { key: string }
   ) => React.ReactElement;
@@ -61,437 +65,538 @@ export type Props<T extends Route> = SceneRendererProps & {
   contentContainerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
   gap?: number;
+  testID?: string;
 };
 
-type State = {
-  layout: Layout;
-  tabWidths: { [key: string]: number };
-};
+type FlattenedTabWidth = string | number | undefined;
 
 const Separator = ({ width }: { width: number }) => {
   return <View style={{ width }} />;
 };
 
-export default class TabBar<T extends Route> extends React.Component<
-  Props<T>,
-  State
-> {
-  static defaultProps = {
-    getLabelText: ({ route }: Scene<Route>) => route.title,
-    getAccessible: ({ route }: Scene<Route>) =>
-      typeof route.accessible !== 'undefined' ? route.accessible : true,
-    getAccessibilityLabel: ({ route }: Scene<Route>) =>
-      typeof route.accessibilityLabel === 'string'
-        ? route.accessibilityLabel
-        : typeof route.title === 'string'
-        ? route.title
-        : undefined,
-    getTestID: ({ route }: Scene<Route>) => route.testID,
-    renderIndicator: (props: IndicatorProps<Route>) => (
-      <TabBarIndicator {...props} />
-    ),
-    gap: 0,
-  };
+const getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {
+  const tabStyle = StyleSheet.flatten(style);
 
-  state: State = {
-    layout: { width: 0, height: 0 },
-    tabWidths: {},
-  };
+  return tabStyle?.width;
+};
 
-  componentDidUpdate(prevProps: Props<T>, prevState: State) {
-    const { navigationState } = this.props;
-    const { layout, tabWidths } = this.state;
-
-    if (
-      prevProps.navigationState.routes.length !==
-        navigationState.routes.length ||
-      prevProps.navigationState.index !== navigationState.index ||
-      prevState.layout.width !== layout.width ||
-      prevState.tabWidths !== tabWidths
-    ) {
-      if (
-        this.getFlattenedTabWidth(this.props.tabStyle) === 'auto' &&
-        !(
-          layout.width &&
-          navigationState.routes.every(
-            (r) => typeof tabWidths[r.key] === 'number'
-          )
-        )
-      ) {
-        // When tab width is dynamic, only adjust the scroll once we have all tab widths and layout
-        return;
+const getComputedTabWidth = (
+  index: number,
+  layout: Layout,
+  routes: Route[],
+  scrollEnabled: boolean | undefined,
+  tabWidths: { [key: string]: number },
+  flattenedWidth: FlattenedTabWidth
+) => {
+  if (flattenedWidth === 'auto') {
+    return tabWidths[routes[index].key] || 0;
+  }
+
+  switch (typeof flattenedWidth) {
+    case 'number':
+      return flattenedWidth;
+    case 'string':
+      if (flattenedWidth.endsWith('%')) {
+        const width = parseFloat(flattenedWidth);
+        if (Number.isFinite(width)) {
+          return layout.width * (width / 100);
+        }
       }
+  }
 
-      this.resetScroll(navigationState.index);
-    }
+  if (scrollEnabled) {
+    return (layout.width / 5) * 2;
   }
+  return layout.width / routes.length;
+};
 
-  // to store the layout.width of each tab
-  // when all onLayout's are fired, this would be set in state
-  private measuredTabWidths: { [key: string]: number } = {};
+const getMaxScrollDistance = (tabBarWidth: number, layoutWidth: number) =>
+  tabBarWidth - layoutWidth;
+
+const getTranslateX = (
+  scrollAmount: Animated.Value,
+  maxScrollDistance: number
+) =>
+  Animated.multiply(
+    Platform.OS === 'android' && I18nManager.isRTL
+      ? Animated.add(maxScrollDistance, Animated.multiply(scrollAmount, -1))
+      : scrollAmount,
+    I18nManager.isRTL ? 1 : -1
+  );
+
+const getTabBarWidth = <T extends Route>({
+  navigationState,
+  layout,
+  gap,
+  scrollEnabled,
+  flattenedTabWidth,
+  tabWidths,
+}: Pick<Props<T>, 'navigationState' | 'gap' | 'layout' | 'scrollEnabled'> & {
+  tabWidths: Record<string, number>;
+  flattenedTabWidth: FlattenedTabWidth;
+}) => {
+  const { routes } = navigationState;
+
+  return routes.reduce<number>(
+    (acc, _, i) =>
+      acc +
+      (i > 0 ? gap ?? 0 : 0) +
+      getComputedTabWidth(
+        i,
+        layout,
+        routes,
+        scrollEnabled,
+        tabWidths,
+        flattenedTabWidth
+      ),
+    0
+  );
+};
 
-  private scrollAmount = new Animated.Value(0);
+const normalizeScrollValue = <T extends Route>({
+  layout,
+  navigationState,
+  gap,
+  scrollEnabled,
+  tabWidths,
+  value,
+  flattenedTabWidth,
+}: Pick<Props<T>, 'layout' | 'navigationState' | 'gap' | 'scrollEnabled'> & {
+  tabWidths: Record<string, number>;
+  value: number;
+  flattenedTabWidth: FlattenedTabWidth;
+}) => {
+  const tabBarWidth = getTabBarWidth({
+    layout,
+    navigationState,
+    tabWidths,
+    gap,
+    scrollEnabled,
+    flattenedTabWidth,
+  });
+  const maxDistance = getMaxScrollDistance(tabBarWidth, layout.width);
+  const scrollValue = Math.max(Math.min(value, maxDistance), 0);
+
+  if (Platform.OS === 'android' && I18nManager.isRTL) {
+    // On Android, scroll value is not applied in reverse in RTL
+    // so we need to manually adjust it to apply correct value
+    return maxDistance - scrollValue;
+  }
 
-  private flatListRef = React.createRef<FlatList>();
+  return scrollValue;
+};
 
-  private getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {
-    const tabStyle = StyleSheet.flatten(style);
+const getScrollAmount = <T extends Route>({
+  layout,
+  navigationState,
+  gap,
+  scrollEnabled,
+  flattenedTabWidth,
+  tabWidths,
+}: Pick<Props<T>, 'layout' | 'navigationState' | 'scrollEnabled' | 'gap'> & {
+  tabWidths: Record<string, number>;
+  flattenedTabWidth: FlattenedTabWidth;
+}) => {
+  const centerDistance = Array.from({
+    length: navigationState.index + 1,
+  }).reduce<number>((total, _, i) => {
+    const tabWidth = getComputedTabWidth(
+      i,
+      layout,
+      navigationState.routes,
+      scrollEnabled,
+      tabWidths,
+      flattenedTabWidth
+    );
 
-    return tabStyle ? tabStyle.width : undefined;
-  };
+    // 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 +
+      (navigationState.index === i
+        ? (tabWidth + (gap ?? 0)) / 2
+        : tabWidth + (gap ?? 0))
+    );
+  }, 0);
+
+  const scrollAmount = centerDistance - layout.width / 2;
+
+  return normalizeScrollValue({
+    layout,
+    navigationState,
+    tabWidths,
+    value: scrollAmount,
+    gap,
+    scrollEnabled,
+    flattenedTabWidth,
+  });
+};
 
-  private getComputedTabWidth = (
-    index: number,
-    layout: Layout,
-    routes: Route[],
-    scrollEnabled: boolean | undefined,
-    tabWidths: { [key: string]: number },
-    flattenedWidth: string | number | undefined
-  ) => {
-    if (flattenedWidth === 'auto') {
-      return tabWidths[routes[index].key] || 0;
+const getLabelTextDefault = ({ route }: Scene<Route>) => route.title;
+
+const getAccessibleDefault = ({ route }: Scene<Route>) =>
+  typeof route.accessible !== 'undefined' ? route.accessible : true;
+
+const getAccessibilityLabelDefault = ({ route }: Scene<Route>) =>
+  typeof route.accessibilityLabel === 'string'
+    ? route.accessibilityLabel
+    : typeof route.title === 'string'
+    ? route.title
+    : undefined;
+
+const renderIndicatorDefault = (props: IndicatorProps<Route>) => (
+  <TabBarIndicator {...props} />
+);
+
+const getTestIdDefault = ({ route }: Scene<Route>) => route.testID;
+
+// How many items measurements should we update per batch.
+// Defaults to 10, since that's whats FlatList is using in initialNumToRender.
+const MEASURE_PER_BATCH = 10;
+
+export default function TabBar<T extends Route>({
+  getLabelText = getLabelTextDefault,
+  getAccessible = getAccessibleDefault,
+  getAccessibilityLabel = getAccessibilityLabelDefault,
+  getTestID = getTestIdDefault,
+  renderIndicator = renderIndicatorDefault,
+  gap = 0,
+  scrollEnabled,
+  jumpTo,
+  navigationState,
+  position,
+  activeColor,
+  bounces,
+  contentContainerStyle,
+  inactiveColor,
+  indicatorContainerStyle,
+  indicatorStyle,
+  labelStyle,
+  onTabLongPress,
+  onTabPress,
+  pressColor,
+  pressOpacity,
+  renderBadge,
+  renderIcon,
+  renderLabel,
+  renderTabBarItem,
+  style,
+  tabStyle,
+  testID,
+}: Props<T>) {
+  const [layout, setLayout] = React.useState<Layout>({ width: 0, height: 0 });
+  const [tabWidths, setTabWidths] = React.useState<Record<string, number>>({});
+  const flatListRef = React.useRef<FlatList | null>(null);
+  const isFirst = React.useRef(true);
+  const scrollAmount = useAnimatedValue(0);
+  const measuredTabWidths = React.useRef<Record<string, number>>({});
+
+  const { routes } = navigationState;
+  const flattenedTabWidth = getFlattenedTabWidth(tabStyle);
+  const isWidthDynamic = flattenedTabWidth === 'auto';
+  const scrollOffset = getScrollAmount({
+    layout,
+    navigationState,
+    tabWidths,
+    gap,
+    scrollEnabled,
+    flattenedTabWidth,
+  });
+
+  const hasMeasuredTabWidths =
+    Boolean(layout.width) &&
+    routes
+      .slice(0, navigationState.index)
+      .every((r) => typeof tabWidths[r.key] === 'number');
+
+  React.useEffect(() => {
+    if (isFirst.current) {
+      isFirst.current = false;
+      return;
     }
 
-    switch (typeof flattenedWidth) {
-      case 'number':
-        return flattenedWidth;
-      case 'string':
-        if (flattenedWidth.endsWith('%')) {
-          const width = parseFloat(flattenedWidth);
-          if (Number.isFinite(width)) {
-            return layout.width * (width / 100);
-          }
-        }
+    if (isWidthDynamic && !hasMeasuredTabWidths) {
+      return;
     }
 
     if (scrollEnabled) {
-      return (layout.width / 5) * 2;
-    }
-    return layout.width / routes.length;
-  };
-
-  private getMaxScrollDistance = (tabBarWidth: number, layoutWidth: number) =>
-    tabBarWidth - layoutWidth;
-
-  private getTabBarWidth = (props: Props<T>, state: State) => {
-    const { layout, tabWidths } = state;
-    const { scrollEnabled, tabStyle } = props;
-    const { routes } = props.navigationState;
-
-    return routes.reduce<number>(
-      (acc, _, i) =>
-        acc +
-        (i > 0 ? props.gap ?? 0 : 0) +
-        this.getComputedTabWidth(
-          i,
-          layout,
-          routes,
-          scrollEnabled,
-          tabWidths,
-          this.getFlattenedTabWidth(tabStyle)
-        ),
-      0
-    );
-  };
-
-  private normalizeScrollValue = (
-    props: Props<T>,
-    state: State,
-    value: number
-  ) => {
-    const { layout } = state;
-    const tabBarWidth = this.getTabBarWidth(props, state);
-    const maxDistance = this.getMaxScrollDistance(tabBarWidth, layout.width);
-    const scrollValue = Math.max(Math.min(value, maxDistance), 0);
-
-    if (Platform.OS === 'android' && I18nManager.isRTL) {
-      // On Android, scroll value is not applied in reverse in RTL
-      // so we need to manually adjust it to apply correct value
-      return maxDistance - scrollValue;
-    }
-
-    return scrollValue;
-  };
-
-  private getScrollAmount = (props: Props<T>, state: State, index: number) => {
-    const { layout, tabWidths } = state;
-    const { scrollEnabled, tabStyle } = props;
-    const { routes } = props.navigationState;
-
-    const centerDistance = Array.from({ length: index + 1 }).reduce<number>(
-      (total, _, i) => {
-        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 + (props.gap ?? 0)) / 2
-            : tabWidth + (props.gap ?? 0))
-        );
-      },
-      0
-    );
-
-    const scrollAmount = centerDistance - layout.width / 2;
-
-    return this.normalizeScrollValue(props, state, scrollAmount);
-  };
-
-  private resetScroll = (index: number) => {
-    if (this.props.scrollEnabled) {
-      this.flatListRef.current?.scrollToOffset({
-        offset: this.getScrollAmount(this.props, this.state, index),
+      flatListRef.current?.scrollToOffset({
+        offset: scrollOffset,
         animated: true,
       });
     }
-  };
+  }, [hasMeasuredTabWidths, isWidthDynamic, scrollEnabled, scrollOffset]);
 
-  private handleLayout = (e: LayoutChangeEvent) => {
+  const handleLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
 
-    if (
-      this.state.layout.width === width &&
-      this.state.layout.height === height
-    ) {
-      return;
-    }
-
-    this.setState({
-      layout: {
-        height,
-        width,
-      },
-    });
+    setLayout((layout) =>
+      layout.width === width && layout.height === height
+        ? layout
+        : { width, height }
+    );
   };
 
-  private getTranslateX = (
-    scrollAmount: Animated.Value,
-    maxScrollDistance: number
-  ) =>
-    Animated.multiply(
-      Platform.OS === 'android' && I18nManager.isRTL
-        ? Animated.add(maxScrollDistance, Animated.multiply(scrollAmount, -1))
-        : scrollAmount,
-      I18nManager.isRTL ? 1 : -1
-    );
+  const tabBarWidth = getTabBarWidth({
+    layout,
+    navigationState,
+    tabWidths,
+    gap,
+    scrollEnabled,
+    flattenedTabWidth,
+  });
+
+  const separatorsWidth = Math.max(0, routes.length - 1) * gap;
+  const separatorPercent = (separatorsWidth / tabBarWidth) * 100;
+  const tabBarWidthPercent = `${routes.length * 40}%`;
+
+  const translateX = React.useMemo(
+    () =>
+      getTranslateX(
+        scrollAmount,
+        getMaxScrollDistance(tabBarWidth, layout.width)
+      ),
+    [layout.width, scrollAmount, tabBarWidth]
+  );
+
+  const renderItem = React.useCallback(
+    ({ item: route, index }: ListRenderItemInfo<T>) => {
+      const props: TabBarItemProps<T> & { key: string } = {
+        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: LayoutChangeEvent) => {
+              measuredTabWidths.current[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 we have more than 10 routes divide updating tabWidths into multiple batches. Here we update only first batch of 10 items.
+              if (
+                routes.length > MEASURE_PER_BATCH &&
+                index === MEASURE_PER_BATCH &&
+                routes
+                  .slice(0, MEASURE_PER_BATCH)
+                  .every(
+                    (r) => typeof measuredTabWidths.current[r.key] === 'number'
+                  )
+              ) {
+                setTabWidths({ ...measuredTabWidths.current });
+              } else if (
+                routes.every(
+                  (r) => typeof measuredTabWidths.current[r.key] === 'number'
+                )
+              ) {
+                // 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
+                setTabWidths({ ...measuredTabWidths.current });
+              }
+            }
+          : undefined,
+        onPress: () => {
+          const event: Scene<T> & Event = {
+            route,
+            defaultPrevented: false,
+            preventDefault: () => {
+              event.defaultPrevented = true;
+            },
+          };
+
+          onTabPress?.(event);
+
+          if (event.defaultPrevented) {
+            return;
+          }
 
-  render() {
-    const {
-      position,
-      navigationState,
-      jumpTo,
-      scrollEnabled,
-      bounces,
+          jumpTo(route.key);
+        },
+        onLongPress: () => onTabLongPress?.({ route }),
+        labelStyle: labelStyle,
+        style: tabStyle,
+        // Calculate the deafult width for tab for FlatList to work
+        defaultTabWidth: !isWidthDynamic
+          ? getComputedTabWidth(
+              index,
+              layout,
+              routes,
+              scrollEnabled,
+              tabWidths,
+              getFlattenedTabWidth(tabStyle)
+            )
+          : undefined,
+      };
+
+      return (
+        <>
+          {gap > 0 && index > 0 ? <Separator width={gap} /> : null}
+          {renderTabBarItem ? (
+            renderTabBarItem(props)
+          ) : (
+            <TabBarItem {...props} />
+          )}
+        </>
+      );
+    },
+    [
+      activeColor,
+      gap,
       getAccessibilityLabel,
       getAccessible,
       getLabelText,
       getTestID,
+      inactiveColor,
+      isWidthDynamic,
+      jumpTo,
+      labelStyle,
+      layout,
+      navigationState,
+      onTabLongPress,
+      onTabPress,
+      position,
+      pressColor,
+      pressOpacity,
       renderBadge,
       renderIcon,
       renderLabel,
       renderTabBarItem,
-      activeColor,
-      inactiveColor,
-      pressColor,
-      pressOpacity,
-      onTabPress,
-      onTabLongPress,
+      routes,
+      scrollEnabled,
       tabStyle,
-      labelStyle,
-      indicatorStyle,
+      tabWidths,
+    ]
+  );
+
+  const keyExtractor = React.useCallback((item: T) => item.key, []);
+
+  const contentContainerStyleMemoized = React.useMemo(
+    () => [
+      styles.tabContent,
+      scrollEnabled
+        ? {
+            width:
+              tabBarWidth > separatorsWidth ? tabBarWidth : tabBarWidthPercent,
+          }
+        : styles.container,
       contentContainerStyle,
-      style,
-      indicatorContainerStyle,
-      gap = 0,
-    } = this.props;
-    const { layout, tabWidths } = this.state;
-    const { routes } = navigationState;
-
-    const isWidthDynamic = this.getFlattenedTabWidth(tabStyle) === 'auto';
-    const tabBarWidth = this.getTabBarWidth(this.props, this.state);
-    const separatorsWidth = Math.max(0, routes.length - 1) * gap;
-    const separatorPercent = (separatorsWidth / tabBarWidth) * 100;
-
-    const tabBarWidthPercent = `${routes.length * 40}%`;
-    const translateX = this.getTranslateX(
-      this.scrollAmount,
-      this.getMaxScrollDistance(tabBarWidth, layout.width)
-    );
+    ],
+    [
+      contentContainerStyle,
+      scrollEnabled,
+      separatorsWidth,
+      tabBarWidth,
+      tabBarWidthPercent,
+    ]
+  );
+
+  const handleScroll = React.useMemo(
+    () =>
+      Animated.event(
+        [
+          {
+            nativeEvent: {
+              contentOffset: { x: scrollAmount },
+            },
+          },
+        ],
+        { useNativeDriver: true }
+      ),
+    [scrollAmount]
+  );
+
+  const handleViewableItemsChanged = useLatestCallback(
+    ({ changed }: { changed: ViewToken[] }) => {
+      if (routes.length <= MEASURE_PER_BATCH) {
+        return;
+      }
+      // Get next vievable item
+      const item = changed[changed.length - 1];
+      const index = item?.index || 0;
+      if (
+        item.isViewable &&
+        (index % 10 === 0 ||
+          index === navigationState.index ||
+          index === routes.length - 1)
+      ) {
+        setTabWidths({ ...measuredTabWidths.current });
+      }
+    }
+  );
 
-    return (
+  return (
+    <Animated.View onLayout={handleLayout} style={[styles.tabBar, style]}>
       <Animated.View
-        onLayout={this.handleLayout}
-        style={[styles.tabBar, style]}
+        pointerEvents="none"
+        style={[
+          styles.indicatorContainer,
+          scrollEnabled ? { transform: [{ translateX }] as any } : null,
+          tabBarWidth > separatorsWidth
+            ? { width: tabBarWidth - separatorsWidth }
+            : scrollEnabled
+            ? { width: tabBarWidthPercent }
+            : null,
+          indicatorContainerStyle,
+        ]}
       >
-        <Animated.View
-          pointerEvents="none"
-          style={[
-            styles.indicatorContainer,
-            scrollEnabled ? { transform: [{ translateX }] as any } : null,
-            tabBarWidth > separatorsWidth
-              ? { width: tabBarWidth - separatorsWidth }
-              : scrollEnabled
-              ? { width: tabBarWidthPercent }
-              : null,
-            indicatorContainerStyle,
-          ]}
-        >
-          {this.props.renderIndicator({
-            position,
-            layout,
-            navigationState,
-            jumpTo,
-            width: isWidthDynamic
-              ? 'auto'
-              : `${(100 - separatorPercent) / routes.length}%`,
-            style: indicatorStyle,
-            getTabWidth: (i: number) =>
-              this.getComputedTabWidth(
-                i,
-                layout,
-                routes,
-                scrollEnabled,
-                tabWidths,
-                this.getFlattenedTabWidth(tabStyle)
-              ),
-            gap,
-          })}
-        </Animated.View>
-        <View style={styles.scroll}>
-          <Animated.FlatList
-            data={routes as Animated.WithAnimatedValue<T>[]}
-            keyExtractor={(item) => item.key}
-            horizontal
-            accessibilityRole="tablist"
-            keyboardShouldPersistTaps="handled"
-            scrollEnabled={scrollEnabled}
-            bounces={bounces}
-            alwaysBounceHorizontal={false}
-            scrollsToTop={false}
-            showsHorizontalScrollIndicator={false}
-            showsVerticalScrollIndicator={false}
-            automaticallyAdjustContentInsets={false}
-            overScrollMode="never"
-            contentContainerStyle={[
-              styles.tabContent,
-              scrollEnabled
-                ? {
-                    width:
-                      tabBarWidth > separatorsWidth
-                        ? tabBarWidth
-                        : tabBarWidthPercent,
-                  }
-                : styles.container,
-              contentContainerStyle,
-            ]}
-            scrollEventThrottle={16}
-            renderItem={({ item: route, index }: ListRenderItemInfo<T>) => {
-              const props: TabBarItemProps<T> & { key: string } = {
-                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: Scene<T> & Event = {
-                    route,
-                    defaultPrevented: false,
-                    preventDefault: () => {
-                      event.defaultPrevented = true;
-                    },
-                  };
-
-                  onTabPress?.(event);
-
-                  if (event.defaultPrevented) {
-                    return;
-                  }
-
-                  this.props.jumpTo(route.key);
-                },
-                onLongPress: () => 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 (
-                <React.Fragment key={route.key}>
-                  {gap > 0 && index > 0 ? <Separator width={gap} /> : null}
-                  {renderTabBarItem ? (
-                    renderTabBarItem(props)
-                  ) : (
-                    <TabBarItem {...props} />
-                  )}
-                </React.Fragment>
-              );
-            }}
-            onScroll={Animated.event(
-              [
-                {
-                  nativeEvent: {
-                    contentOffset: { x: this.scrollAmount },
-                  },
-                },
-              ],
-              { useNativeDriver: true }
-            )}
-            ref={this.flatListRef}
-          />
-        </View>
+        {renderIndicator({
+          position,
+          layout,
+          navigationState,
+          jumpTo,
+          width: isWidthDynamic
+            ? 'auto'
+            : `${(100 - separatorPercent) / routes.length}%`,
+          style: indicatorStyle,
+          getTabWidth: (i: number) =>
+            getComputedTabWidth(
+              i,
+              layout,
+              routes,
+              scrollEnabled,
+              tabWidths,
+              flattenedTabWidth
+            ),
+          gap,
+        })}
       </Animated.View>
-    );
-  }
+      <View style={styles.scroll}>
+        <Animated.FlatList
+          data={routes as Animated.WithAnimatedValue<T>[]}
+          keyExtractor={keyExtractor}
+          horizontal
+          accessibilityRole="tablist"
+          keyboardShouldPersistTaps="handled"
+          scrollEnabled={scrollEnabled}
+          bounces={bounces}
+          initialNumToRender={MEASURE_PER_BATCH}
+          onViewableItemsChanged={handleViewableItemsChanged}
+          alwaysBounceHorizontal={false}
+          scrollsToTop={false}
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          automaticallyAdjustContentInsets={false}
+          overScrollMode="never"
+          contentContainerStyle={contentContainerStyleMemoized}
+          scrollEventThrottle={16}
+          renderItem={renderItem}
+          onScroll={handleScroll}
+          ref={flatListRef}
+          testID={testID}
+        />
+      </View>
+    </Animated.View>
+  );
 }
 
 const styles = StyleSheet.create({