@amazon-devices/react-navigation__react-native-tab-view 2.0.1758683737

package/src/TabBar.tsx

@@ -0,0 +1,639 @@
+import * as React from 'react';
+import {
+  Animated,
+  DimensionValue,
+  FlatList,
+  I18nManager,
+  LayoutChangeEvent,
+  ListRenderItemInfo,
+  Platform,
+  PressableAndroidRippleConfig,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+  ViewToken,
+} from 'react-native';
+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,
+} from './types';
+import useAnimatedValue from './useAnimatedValue';
+
+export type Props<T extends Route> = SceneRendererProps & {
+  navigationState: NavigationState<T>;
+  scrollEnabled?: boolean;
+  bounces?: boolean;
+  activeColor?: string;
+  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;
+  renderLabel?: (
+    scene: Scene<T> & {
+      focused: boolean;
+      color: string;
+    }
+  ) => React.ReactNode;
+  renderIcon?: (
+    scene: Scene<T> & {
+      focused: boolean;
+      color: string;
+    }
+  ) => React.ReactNode;
+  renderBadge?: (scene: Scene<T>) => React.ReactNode;
+  renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;
+  renderTabBarItem?: (
+    props: TabBarItemProps<T> & { key: string }
+  ) => React.ReactElement;
+  onTabPress?: (scene: Scene<T> & Event) => void;
+  onTabLongPress?: (scene: Scene<T>) => void;
+  tabStyle?: StyleProp<ViewStyle>;
+  indicatorStyle?: StyleProp<ViewStyle>;
+  indicatorContainerStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  gap?: number;
+  testID?: string;
+  android_ripple?: PressableAndroidRippleConfig;
+};
+
+type FlattenedTabWidth = DimensionValue | undefined;
+
+const Separator = ({ width }: { width: number }) => {
+  return <View style={{ width }} />;
+};
+
+const getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {
+  const tabStyle = StyleSheet.flatten(style);
+
+  return tabStyle?.width;
+};
+
+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);
+        }
+      }
+  }
+
+  if (scrollEnabled) {
+    return (layout.width / 5) * 2;
+  }
+  return layout.width / routes.length;
+};
+
+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
+  );
+};
+
+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;
+  }
+
+  return scrollValue;
+};
+
+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
+    );
+
+    // 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,
+  });
+};
+
+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,
+  android_ripple,
+}: 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;
+    }
+
+    if (isWidthDynamic && !hasMeasuredTabWidths) {
+      return;
+    }
+
+    if (scrollEnabled) {
+      flatListRef.current?.scrollToOffset({
+        offset: scrollOffset,
+        animated: true,
+      });
+    }
+  }, [hasMeasuredTabWidths, isWidthDynamic, scrollEnabled, scrollOffset]);
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    const { height, width } = e.nativeEvent.layout;
+
+    setLayout((layout) =>
+      layout.width === width && layout.height === height
+        ? layout
+        : { width, height }
+    );
+  };
+
+  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;
+          }
+
+          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,
+        android_ripple,
+      };
+
+      return (
+        <>
+          {gap > 0 && index > 0 ? <Separator width={gap} /> : null}
+          {renderTabBarItem ? (
+            renderTabBarItem(props)
+          ) : (
+            <TabBarItem {...props} />
+          )}
+        </>
+      );
+    },
+    [
+      activeColor,
+      android_ripple,
+      gap,
+      getAccessibilityLabel,
+      getAccessible,
+      getLabelText,
+      getTestID,
+      inactiveColor,
+      isWidthDynamic,
+      jumpTo,
+      labelStyle,
+      layout,
+      navigationState,
+      onTabLongPress,
+      onTabPress,
+      position,
+      pressColor,
+      pressOpacity,
+      renderBadge,
+      renderIcon,
+      renderLabel,
+      renderTabBarItem,
+      routes,
+      scrollEnabled,
+      tabStyle,
+      tabWidths,
+    ]
+  );
+
+  const keyExtractor = React.useCallback((item: T) => item.key, []);
+
+  const contentContainerStyleMemoized = React.useMemo(
+    () => [
+      styles.tabContent,
+      scrollEnabled
+        ? {
+            width:
+              tabBarWidth > separatorsWidth ? tabBarWidth : tabBarWidthPercent,
+          }
+        : styles.container,
+      contentContainerStyle,
+    ],
+    [
+      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 });
+      }
+    }
+  );
+
+  // FIXME: Not sure why i have to as-any here (x3) ..
+  return (
+    <Animated.View onLayout={handleLayout} style={[styles.tabBar, style]}>
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          styles.indicatorContainer,
+          scrollEnabled ? { transform: [{ translateX }] as any } : null,
+          tabBarWidth > separatorsWidth
+            ? { width: tabBarWidth - separatorsWidth as any }
+            : scrollEnabled
+            ? { width: tabBarWidthPercent as any }
+            : null,
+          indicatorContainerStyle,
+        ]}
+      >
+        {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 as any}
+          scrollEventThrottle={16}
+          renderItem={renderItem}
+          onScroll={handleScroll}
+          ref={flatListRef}
+          testID={testID}
+        />
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scroll: {
+    overflow: Platform.select({ default: 'scroll', web: undefined }),
+  },
+  tabBar: {
+    backgroundColor: '#2196f3',
+    elevation: 4,
+    shadowColor: 'black',
+    shadowOpacity: 0.1,
+    shadowRadius: StyleSheet.hairlineWidth,
+    shadowOffset: {
+      height: StyleSheet.hairlineWidth,
+      width: 0,
+    },
+    zIndex: 1,
+  },
+  tabContent: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+  },
+  indicatorContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});