@react-native-ohos/react-native-tab-view 4.0.11-rc.1

package/src/TabBar.tsx

@@ -0,0 +1,729 @@
+import * as React from 'react';
+import {
+  Animated,
+  type DimensionValue,
+  FlatList,
+  I18nManager,
+  type LayoutChangeEvent,
+  type ListRenderItemInfo,
+  Platform,
+  type PressableAndroidRippleConfig,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+  type ViewToken,
+} from 'react-native';
+import useLatestCallback from 'use-latest-callback';
+
+import {
+  type Props as IndicatorProps,
+  TabBarIndicator,
+} from './TabBarIndicator';
+import { type Props as TabBarItemProps, TabBarItem } from './TabBarItem';
+import type {
+  Event,
+  Layout,
+  LocaleDirection,
+  NavigationState,
+  Route,
+  Scene,
+  SceneRendererProps,
+  TabDescriptor,
+} 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;
+  options?: Record<string, TabDescriptor<T>>;
+  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>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  direction?: LocaleDirection;
+  gap?: number;
+  testID?: string;
+  android_ripple?: PressableAndroidRippleConfig;
+};
+
+const useNativeDriver = Platform.OS !== 'web';
+
+const Separator = ({ width }: { width: number }) => {
+  return <View style={{ width }} />;
+};
+
+const getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {
+  const tabStyle = StyleSheet.flatten(style);
+
+  return tabStyle?.width;
+};
+
+const getFlattenedPaddingStart = (style: StyleProp<ViewStyle>) => {
+  const flattenStyle = StyleSheet.flatten(style);
+
+  return flattenStyle
+    ? flattenStyle.paddingLeft ||
+        flattenStyle.paddingStart ||
+        flattenStyle.paddingHorizontal ||
+        0
+    : 0;
+};
+
+const getFlattenedPaddingEnd = (style: StyleProp<ViewStyle>) => {
+  const flattenStyle = StyleSheet.flatten(style);
+
+  return flattenStyle
+    ? flattenStyle.paddingRight ||
+        flattenStyle.paddingEnd ||
+        flattenStyle.paddingHorizontal ||
+        0
+    : 0;
+};
+
+const convertPaddingPercentToSize = (
+  value: DimensionValue | undefined,
+  layout: Layout
+): number => {
+  switch (typeof value) {
+    case 'number':
+      return value;
+    case 'string':
+      if (value.endsWith('%')) {
+        const width = parseFloat(value);
+        if (Number.isFinite(width)) {
+          return layout.width * (width / 100);
+        }
+      }
+  }
+  return 0;
+};
+
+const getComputedTabWidth = (
+  index: number,
+  layout: Layout,
+  routes: Route[],
+  scrollEnabled: boolean | undefined,
+  tabWidths: { [key: string]: number },
+  flattenedWidth: DimensionValue | undefined,
+  flattenedPaddingStart: DimensionValue | undefined,
+  flattenedPaddingEnd: DimensionValue | undefined,
+  gap?: number
+) => {
+  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;
+  }
+
+  const gapTotalWidth = (gap ?? 0) * (routes.length - 1);
+  const paddingTotalWidth =
+    convertPaddingPercentToSize(flattenedPaddingStart, layout) +
+    convertPaddingPercentToSize(flattenedPaddingEnd, layout);
+
+  return (layout.width - gapTotalWidth - paddingTotalWidth) / routes.length;
+};
+
+const getMaxScrollDistance = (tabBarWidth: number, layoutWidth: number) =>
+  tabBarWidth - layoutWidth;
+
+const getTranslateX = (
+  scrollAmount: Animated.Value,
+  maxScrollDistance: number,
+  direction: LocaleDirection
+) =>
+  Animated.multiply(
+    Platform.OS === 'android' && direction === 'rtl'
+      ? Animated.add(maxScrollDistance, Animated.multiply(scrollAmount, -1))
+      : scrollAmount,
+    direction === 'rtl' ? 1 : -1
+  );
+
+const getTabBarWidth = <T extends Route>({
+  navigationState,
+  layout,
+  gap,
+  scrollEnabled,
+  flattenedTabWidth,
+  flattenedPaddingStart,
+  flattenedPaddingEnd,
+  tabWidths,
+}: Pick<Props<T>, 'navigationState' | 'gap' | 'layout' | 'scrollEnabled'> & {
+  tabWidths: Record<string, number>;
+  flattenedPaddingStart: DimensionValue | undefined;
+  flattenedPaddingEnd: DimensionValue | undefined;
+  flattenedTabWidth: DimensionValue | undefined;
+}) => {
+  const { routes } = navigationState;
+
+  const paddingsWidth = Math.max(
+    0,
+    convertPaddingPercentToSize(flattenedPaddingStart, layout) +
+      convertPaddingPercentToSize(flattenedPaddingEnd, layout)
+  );
+
+  return routes.reduce<number>(
+    (acc, _, i) =>
+      acc +
+      (i > 0 ? gap ?? 0 : 0) +
+      getComputedTabWidth(
+        i,
+        layout,
+        routes,
+        scrollEnabled,
+        tabWidths,
+        flattenedTabWidth,
+        flattenedPaddingStart,
+        flattenedPaddingEnd,
+        gap
+      ),
+    paddingsWidth
+  );
+};
+
+const normalizeScrollValue = <T extends Route>({
+  layout,
+  navigationState,
+  gap,
+  scrollEnabled,
+  tabWidths,
+  value,
+  flattenedTabWidth,
+  flattenedPaddingStart,
+  flattenedPaddingEnd,
+  direction,
+}: Pick<Props<T>, 'layout' | 'navigationState' | 'gap' | 'scrollEnabled'> & {
+  tabWidths: Record<string, number>;
+  value: number;
+  flattenedTabWidth: DimensionValue | undefined;
+  flattenedPaddingStart: DimensionValue | undefined;
+  flattenedPaddingEnd: DimensionValue | undefined;
+  direction: LocaleDirection;
+}) => {
+  const tabBarWidth = getTabBarWidth({
+    layout,
+    navigationState,
+    tabWidths,
+    gap,
+    scrollEnabled,
+    flattenedTabWidth,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
+  });
+  const maxDistance = getMaxScrollDistance(tabBarWidth, layout.width);
+  const scrollValue = Math.max(Math.min(value, maxDistance), 0);
+
+  if (Platform.OS === 'android' && direction === 'rtl') {
+    // 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,
+  flattenedPaddingStart,
+  flattenedPaddingEnd,
+  direction,
+}: Pick<Props<T>, 'layout' | 'navigationState' | 'scrollEnabled' | 'gap'> & {
+  tabWidths: Record<string, number>;
+  flattenedTabWidth: DimensionValue | undefined;
+  flattenedPaddingStart: DimensionValue | undefined;
+  flattenedPaddingEnd: DimensionValue | undefined;
+  direction: LocaleDirection;
+}) => {
+  const paddingInitial =
+    direction === 'rtl'
+      ? convertPaddingPercentToSize(flattenedPaddingEnd, layout)
+      : convertPaddingPercentToSize(flattenedPaddingStart, layout);
+
+  const centerDistance = Array.from({
+    length: navigationState.index + 1,
+  }).reduce<number>((total, _, i) => {
+    const tabWidth = getComputedTabWidth(
+      i,
+      layout,
+      navigationState.routes,
+      scrollEnabled,
+      tabWidths,
+      flattenedTabWidth,
+      flattenedPaddingStart,
+      flattenedPaddingEnd,
+      gap
+    );
+
+    // 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 +
+      (i > 0 ? gap ?? 0 : 0) +
+      (navigationState.index === i ? tabWidth / 2 : tabWidth)
+    );
+  }, paddingInitial);
+
+  const scrollAmount = centerDistance - layout.width / 2;
+
+  return normalizeScrollValue({
+    layout,
+    navigationState,
+    tabWidths,
+    value: scrollAmount,
+    gap,
+    scrollEnabled,
+    flattenedTabWidth,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
+    direction,
+  });
+};
+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 function TabBar<T extends Route>({
+  renderIndicator = renderIndicatorDefault,
+  gap = 0,
+  scrollEnabled,
+  jumpTo,
+  navigationState,
+  position,
+  activeColor,
+  bounces,
+  contentContainerStyle,
+  inactiveColor,
+  indicatorContainerStyle,
+  indicatorStyle,
+  onTabLongPress,
+  onTabPress,
+  pressColor,
+  pressOpacity,
+  direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
+  renderTabBarItem,
+  style,
+  tabStyle,
+  layout: propLayout,
+  testID,
+  android_ripple,
+  options,
+}: Props<T>) {
+  const [layout, setLayout] = React.useState<Layout>(
+    propLayout ?? { 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 flattenedPaddingEnd = getFlattenedPaddingEnd(contentContainerStyle);
+  const flattenedPaddingStart = getFlattenedPaddingStart(contentContainerStyle);
+  const scrollOffset = getScrollAmount({
+    layout,
+    navigationState,
+    tabWidths,
+    gap,
+    scrollEnabled,
+    flattenedTabWidth,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
+    direction,
+  });
+
+  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,
+    flattenedPaddingStart,
+    flattenedPaddingEnd,
+  });
+
+  const separatorsWidth = Math.max(0, routes.length - 1) * gap;
+  const paddingsWidth = Math.max(
+    0,
+    convertPaddingPercentToSize(flattenedPaddingStart, layout) +
+      convertPaddingPercentToSize(flattenedPaddingEnd, layout)
+  );
+
+  const translateX = React.useMemo(
+    () =>
+      getTranslateX(
+        scrollAmount,
+        getMaxScrollDistance(tabBarWidth, layout.width),
+        direction
+      ),
+    [direction, layout.width, scrollAmount, tabBarWidth]
+  );
+
+  const renderItem = React.useCallback(
+    ({ item: route, index }: ListRenderItemInfo<T>) => {
+      const {
+        testID = getTestIdDefault({ route }),
+        labelText = getLabelTextDefault({ route }),
+        accessible = getAccessibleDefault({ route }),
+        accessibilityLabel = getAccessibilityLabelDefault({ route }),
+        ...rest
+      } = options?.[route.key] ?? {};
+
+      const 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;
+
+      const onPress = () => {
+        const event: Scene<T> & Event = {
+          route,
+          defaultPrevented: false,
+          preventDefault: () => {
+            event.defaultPrevented = true;
+          },
+        };
+
+        onTabPress?.(event);
+
+        if (event.defaultPrevented) {
+          return;
+        }
+
+        jumpTo(route.key);
+      };
+
+      const onLongPress = () => onTabLongPress?.({ route });
+
+      // Calculate the default width for tab for FlatList to work
+      const defaultTabWidth = !isWidthDynamic
+        ? getComputedTabWidth(
+            index,
+            layout,
+            routes,
+            scrollEnabled,
+            tabWidths,
+            getFlattenedTabWidth(tabStyle),
+            getFlattenedPaddingEnd(contentContainerStyle),
+            getFlattenedPaddingStart(contentContainerStyle),
+            gap
+          )
+        : undefined;
+
+      const props = {
+        ...rest,
+        key: route.key,
+        position,
+        route,
+        navigationState,
+        testID,
+        labelText,
+        accessible,
+        accessibilityLabel,
+        activeColor,
+        inactiveColor,
+        pressColor,
+        pressOpacity,
+        onLayout,
+        onPress,
+        onLongPress,
+        style: tabStyle,
+        defaultTabWidth,
+        android_ripple,
+      } satisfies TabBarItemProps<T> & { key: string };
+
+      return (
+        <>
+          {gap > 0 && index > 0 ? <Separator width={gap} /> : null}
+          {renderTabBarItem ? (
+            renderTabBarItem(props)
+          ) : (
+            <TabBarItem {...props} key={props.key} />
+          )}
+        </>
+      );
+    },
+    [
+      position,
+      navigationState,
+      options,
+      activeColor,
+      inactiveColor,
+      pressColor,
+      pressOpacity,
+      isWidthDynamic,
+      tabStyle,
+      layout,
+      routes,
+      scrollEnabled,
+      tabWidths,
+      contentContainerStyle,
+      gap,
+      android_ripple,
+      renderTabBarItem,
+      onTabPress,
+      jumpTo,
+      onTabLongPress,
+    ]
+  );
+
+  const keyExtractor = React.useCallback((item: T) => item.key, []);
+
+  const contentContainerStyleMemoized = React.useMemo(
+    () => [
+      styles.tabContent,
+      scrollEnabled ? { width: tabBarWidth } : null,
+      contentContainerStyle,
+    ],
+    [contentContainerStyle, scrollEnabled, tabBarWidth]
+  );
+
+  const handleScroll = React.useMemo(
+    () =>
+      Animated.event(
+        [
+          {
+            nativeEvent: {
+              contentOffset: { x: scrollAmount },
+            },
+          },
+        ],
+        { useNativeDriver }
+      ),
+    [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 (
+    <Animated.View onLayout={handleLayout} style={[styles.tabBar, style]}>
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          styles.indicatorContainer,
+          scrollEnabled ? { transform: [{ translateX }] as any } : null,
+          scrollEnabled ? { width: tabBarWidth } : null,
+          indicatorContainerStyle,
+        ]}
+      >
+        {renderIndicator({
+          position,
+          layout,
+          navigationState,
+          jumpTo,
+          direction,
+          width: isWidthDynamic
+            ? 'auto'
+            : Math.max(
+                0,
+                (tabBarWidth - separatorsWidth - paddingsWidth) / routes.length
+              ),
+          style: [
+            indicatorStyle,
+            { start: flattenedPaddingStart, end: flattenedPaddingEnd },
+          ],
+          getTabWidth: (i: number) =>
+            getComputedTabWidth(
+              i,
+              layout,
+              routes,
+              scrollEnabled,
+              tabWidths,
+              flattenedTabWidth,
+              flattenedPaddingEnd,
+              flattenedPaddingStart,
+              gap
+            ),
+          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({
+  scroll: {
+    overflow: Platform.select({ default: 'scroll', web: undefined }),
+  },
+  tabBar: {
+    zIndex: 1,
+    backgroundColor: '#2196f3',
+    elevation: 4,
+    ...Platform.select({
+      default: {
+        shadowColor: 'black',
+        shadowOpacity: 0.1,
+        shadowRadius: StyleSheet.hairlineWidth,
+        shadowOffset: {
+          height: StyleSheet.hairlineWidth,
+          width: 0,
+        },
+      },
+      web: {
+        boxShadow: '0 1px 1px rgba(0, 0, 0, 0.1)',
+      },
+    }),
+  },
+  tabContent: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+  },
+  indicatorContainer: {
+    position: 'absolute',
+    top: 0,
+    start: 0,
+    end: 0,
+    bottom: 0,
+  },
+});