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

package/src/TabBarIndicator.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import {
+  Animated,
+  DimensionValue,
+  Easing,
+  I18nManager,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+
+import type { NavigationState, Route, SceneRendererProps } from './types';
+import useAnimatedValue from './useAnimatedValue';
+
+export type GetTabWidth = (index: number) => number;
+
+export type Props<T extends Route> = SceneRendererProps & {
+  navigationState: NavigationState<T>;
+  width: string | number;
+  style?: StyleProp<ViewStyle>;
+  getTabWidth: GetTabWidth;
+  gap?: number;
+};
+
+const getTranslateX = (
+  position: Animated.AnimatedInterpolation<number>,
+  routes: Route[],
+  getTabWidth: GetTabWidth,
+  gap?: number
+) => {
+  const inputRange = routes.map((_, i) => i);
+
+  // every index contains widths at all previous indices
+  const outputRange = routes.reduce<number[]>((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 Animated.multiply(translateX, I18nManager.isRTL ? -1 : 1);
+};
+
+export default function TabBarIndicator<T extends Route>({
+  getTabWidth,
+  layout,
+  navigationState,
+  position,
+  width,
+  gap,
+  style,
+}: Props<T>) {
+  const isIndicatorShown = React.useRef(false);
+  const isWidthDynamic = width === 'auto';
+
+  const opacity = useAnimatedValue(isWidthDynamic ? 0 : 1);
+
+  const indicatorVisible = isWidthDynamic
+    ? layout.width &&
+      navigationState.routes
+        .slice(0, navigationState.index)
+        .every((_, r) => getTabWidth(r))
+    : true;
+
+  React.useEffect(() => {
+    const fadeInIndicator = () => {
+      if (
+        !isIndicatorShown.current &&
+        isWidthDynamic &&
+        // We should fade-in the indicator when we have widths for all the tab items
+        indicatorVisible
+      ) {
+        isIndicatorShown.current = true;
+
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 150,
+          easing: Easing.in(Easing.linear),
+          useNativeDriver: true,
+        }).start();
+      }
+    };
+
+    fadeInIndicator();
+
+    return () => opacity.stopAnimation();
+  }, [indicatorVisible, isWidthDynamic, opacity]);
+
+  const { routes } = navigationState;
+
+  const transform = [];
+
+  if (layout.width) {
+    const translateX =
+      routes.length > 1 ? 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 (
+    <Animated.View
+      style={[
+        styles.indicator,
+        { width: (width === 'auto' ? 1 : width) as DimensionValue | undefined },
+        // 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 && Platform.OS !== 'macos'
+          ? { left: 0 }
+          : { left: `${(100 / routes.length) * navigationState.index}%` },
+        { transform },
+        width === 'auto' ? { opacity: opacity } : null,
+        style,
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  indicator: {
+    backgroundColor: '#ffeb3b',
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    right: 0,
+    height: 2,
+  },
+});

package/src/TabBarItem.tsx

@@ -0,0 +1,319 @@
+import * as React from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  PressableAndroidRippleConfig,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+import useLatestCallback from 'use-latest-callback';
+
+import PlatformPressable from './PlatformPressable';
+import type { NavigationState, Route, Scene } from './types';
+
+export type Props<T extends Route> = {
+  position: Animated.AnimatedInterpolation<number>;
+  route: T;
+  navigationState: NavigationState<T>;
+  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: {
+    route: T;
+    focused: boolean;
+    color: string;
+  }) => React.ReactNode;
+  renderIcon?: (scene: {
+    route: T;
+    focused: boolean;
+    color: string;
+  }) => React.ReactNode;
+  renderBadge?: (scene: Scene<T>) => React.ReactNode;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  onPress: () => void;
+  onLongPress: () => void;
+  defaultTabWidth?: number;
+  labelStyle?: StyleProp<TextStyle>;
+  style: StyleProp<ViewStyle>;
+  android_ripple?: PressableAndroidRippleConfig;
+};
+
+const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
+const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
+
+const getActiveOpacity = (
+  position: Animated.AnimatedInterpolation<number>,
+  routesLength: number,
+  tabIndex: number
+) => {
+  if (routesLength > 1) {
+    const inputRange = Array.from({ length: routesLength }, (_, i) => i);
+
+    return position.interpolate({
+      inputRange,
+      outputRange: inputRange.map((i) => (i === tabIndex ? 1 : 0)),
+    });
+  } else {
+    return 1;
+  }
+};
+
+const getInactiveOpacity = (
+  position: Animated.AnimatedInterpolation<number>,
+  routesLength: number,
+  tabIndex: number
+) => {
+  if (routesLength > 1) {
+    const inputRange = Array.from({ length: routesLength }, (_, i) => i);
+
+    return position.interpolate({
+      inputRange,
+      outputRange: inputRange.map((i: number) => (i === tabIndex ? 0 : 1)),
+    });
+  } else {
+    return 0;
+  }
+};
+
+type TabBarItemInternalProps<T extends Route> = Omit<
+  Props<T>,
+  'navigationState'
+> & {
+  isFocused: boolean;
+  index: number;
+  routesLength: number;
+};
+
+const TabBarItemInternal = <T extends Route>({
+  getAccessibilityLabel,
+  getAccessible,
+  getLabelText,
+  getTestID,
+  onLongPress,
+  onPress,
+  isFocused,
+  position,
+  route,
+  style,
+  inactiveColor: inactiveColorCustom,
+  activeColor: activeColorCustom,
+  labelStyle,
+  onLayout,
+  index: tabIndex,
+  pressColor,
+  pressOpacity,
+  renderBadge,
+  renderIcon,
+  defaultTabWidth,
+  routesLength,
+  renderLabel: renderLabelCustom,
+  android_ripple = { borderless: true },
+}: TabBarItemInternalProps<T>) => {
+  const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
+
+  const activeColor =
+    activeColorCustom !== undefined
+      ? activeColorCustom
+      : typeof labelColorFromStyle === 'string'
+      ? labelColorFromStyle
+      : DEFAULT_ACTIVE_COLOR;
+  const inactiveColor =
+    inactiveColorCustom !== undefined
+      ? inactiveColorCustom
+      : typeof labelColorFromStyle === 'string'
+      ? labelColorFromStyle
+      : DEFAULT_INACTIVE_COLOR;
+
+  const activeOpacity = getActiveOpacity(position, routesLength, tabIndex);
+  const inactiveOpacity = getInactiveOpacity(position, routesLength, tabIndex);
+
+  let icon: React.ReactNode | null = null;
+  let label: React.ReactNode | null = null;
+
+  if (renderIcon) {
+    const activeIcon = renderIcon({
+      route,
+      focused: true,
+      color: activeColor,
+    });
+    const inactiveIcon = renderIcon({
+      route,
+      focused: false,
+      color: inactiveColor,
+    });
+
+    if (inactiveIcon != null && activeIcon != null) {
+      icon = (
+        <View style={styles.icon}>
+          <Animated.View style={{ opacity: inactiveOpacity }}>
+            {inactiveIcon}
+          </Animated.View>
+          <Animated.View
+            style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}
+          >
+            {activeIcon}
+          </Animated.View>
+        </View>
+      );
+    }
+  }
+
+  const renderLabel =
+    renderLabelCustom !== undefined
+      ? renderLabelCustom
+      : (labelProps: { route: T; color: string }) => {
+          const labelText = getLabelText({ route: labelProps.route });
+
+          if (typeof labelText === 'string') {
+            return (
+              <Animated.Text
+                style={[
+                  styles.label,
+                  icon ? { marginTop: 0 } : null,
+                  labelStyle,
+                  { color: labelProps.color },
+                ]}
+              >
+                {labelText}
+              </Animated.Text>
+            );
+          }
+
+          return labelText;
+        };
+
+  if (renderLabel) {
+    const activeLabel = renderLabel({
+      route,
+      focused: true,
+      color: activeColor,
+    });
+    const inactiveLabel = renderLabel({
+      route,
+      focused: false,
+      color: inactiveColor,
+    });
+
+    label = (
+      <View>
+        <Animated.View style={{ opacity: inactiveOpacity }}>
+          {inactiveLabel}
+        </Animated.View>
+        <Animated.View
+          style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}
+        >
+          {activeLabel}
+        </Animated.View>
+      </View>
+    );
+  }
+
+  const tabStyle = StyleSheet.flatten(style);
+  const isWidthSet = tabStyle?.width !== undefined;
+
+  const tabContainerStyle: ViewStyle | null = isWidthSet
+    ? null
+    : { width: defaultTabWidth };
+
+  const scene = { route };
+
+  let accessibilityLabel = getAccessibilityLabel(scene);
+
+  accessibilityLabel =
+    typeof accessibilityLabel !== 'undefined'
+      ? accessibilityLabel
+      : getLabelText(scene);
+
+  const badge = renderBadge ? renderBadge(scene) : null;
+
+  return (
+    <PlatformPressable
+      android_ripple={android_ripple}
+      testID={getTestID(scene)}
+      accessible={getAccessible(scene)}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: isFocused }}
+      // @ts-ignore: this is to support older React Native versions
+      accessibilityStates={isFocused ? ['selected'] : []}
+      pressColor={pressColor}
+      pressOpacity={pressOpacity}
+      delayPressIn={0}
+      onLayout={onLayout}
+      onPress={onPress}
+      onLongPress={onLongPress}
+      style={[styles.pressable, tabContainerStyle]}
+    >
+      <View pointerEvents="none" style={[styles.item, tabStyle]}>
+        {icon}
+        {label}
+        {badge != null ? <View style={styles.badge}>{badge}</View> : null}
+      </View>
+    </PlatformPressable>
+  );
+};
+
+const MemoizedTabBarItemInternal = React.memo(
+  TabBarItemInternal
+) as typeof TabBarItemInternal;
+
+function TabBarItem<T extends Route>(props: Props<T>) {
+  const { onPress, onLongPress, onLayout, navigationState, route, ...rest } =
+    props;
+  const onPressLatest = useLatestCallback(onPress);
+  const onLongPressLatest = useLatestCallback(onLongPress);
+  const onLayoutLatest = useLatestCallback(onLayout ? onLayout : () => {});
+
+  const tabIndex = navigationState.routes.indexOf(route);
+
+  return (
+    <MemoizedTabBarItemInternal
+      {...rest}
+      onPress={onPressLatest}
+      onLayout={onLayoutLatest}
+      onLongPress={onLongPressLatest}
+      isFocused={navigationState.index === tabIndex}
+      route={route}
+      index={tabIndex}
+      routesLength={navigationState.routes.length}
+    />
+  );
+}
+
+export default TabBarItem;
+
+const styles = StyleSheet.create({
+  label: {
+    margin: 4,
+    backgroundColor: 'transparent',
+    textTransform: 'uppercase',
+  },
+  icon: {
+    margin: 2,
+  },
+  item: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 10,
+    minHeight: 48,
+  },
+  badge: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+  pressable: {
+    // The label is not pressable on Windows
+    // Adding backgroundColor: 'transparent' seems to fix it
+    backgroundColor: 'transparent',
+  },
+});

package/src/TabView.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import {
+  LayoutChangeEvent,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import Pager from './Pager';
+import SceneView from './SceneView';
+import TabBar from './TabBar';
+import type {
+  Layout,
+  NavigationState,
+  PagerProps,
+  Route,
+  SceneRendererProps,
+} from './types';
+
+export type Props<T extends Route> = PagerProps & {
+  onIndexChange: (index: number) => void;
+  navigationState: NavigationState<T>;
+  renderScene: (props: SceneRendererProps & { route: T }) => React.ReactNode;
+  renderLazyPlaceholder?: (props: { route: T }) => React.ReactNode;
+  renderTabBar?: (
+    props: SceneRendererProps & { navigationState: NavigationState<T> }
+  ) => React.ReactNode;
+  tabBarPosition?: 'top' | 'bottom';
+  initialLayout?: Partial<Layout>;
+  lazy?: ((props: { route: T }) => boolean) | boolean;
+  lazyPreloadDistance?: number;
+  sceneContainerStyle?: StyleProp<ViewStyle>;
+  pagerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+};
+
+export default function TabView<T extends Route>({
+  onIndexChange,
+  navigationState,
+  renderScene,
+  initialLayout,
+  keyboardDismissMode = 'auto',
+  lazy = false,
+  lazyPreloadDistance = 0,
+  onSwipeStart,
+  onSwipeEnd,
+  renderLazyPlaceholder = () => null,
+  renderTabBar = (props) => <TabBar {...props} />,
+  sceneContainerStyle,
+  pagerStyle,
+  style,
+  swipeEnabled = true,
+  tabBarPosition = 'top',
+  animationEnabled = true,
+  overScrollMode,
+}: Props<T>) {
+  const [layout, setLayout] = React.useState({
+    width: 0,
+    height: 0,
+    ...initialLayout,
+  });
+
+  const jumpToIndex = (index: number) => {
+    if (index !== navigationState.index) {
+      onIndexChange(index);
+    }
+  };
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    const { height, width } = e.nativeEvent.layout;
+
+    setLayout((prevLayout) => {
+      if (prevLayout.width === width && prevLayout.height === height) {
+        return prevLayout;
+      }
+
+      return { height, width };
+    });
+  };
+
+  return (
+    <View onLayout={handleLayout} style={[styles.pager, style]}>
+      <Pager
+        layout={layout}
+        navigationState={navigationState}
+        keyboardDismissMode={keyboardDismissMode}
+        swipeEnabled={swipeEnabled}
+        onSwipeStart={onSwipeStart}
+        onSwipeEnd={onSwipeEnd}
+        onIndexChange={jumpToIndex}
+        animationEnabled={animationEnabled}
+        overScrollMode={overScrollMode}
+        style={pagerStyle}
+      >
+        {({ position, render, addEnterListener, jumpTo }) => {
+          // All of the props here must not change between re-renders
+          // This is crucial to optimizing the routes with PureComponent
+          const sceneRendererProps = {
+            position,
+            layout,
+            jumpTo,
+          };
+
+          return (
+            <React.Fragment>
+              {tabBarPosition === 'top' &&
+                renderTabBar({
+                  ...sceneRendererProps,
+                  navigationState,
+                })}
+              {render(
+                navigationState.routes.map((route, i) => {
+                  return (
+                    <SceneView
+                      {...sceneRendererProps}
+                      addEnterListener={addEnterListener}
+                      key={route.key}
+                      index={i}
+                      lazy={typeof lazy === 'function' ? lazy({ route }) : lazy}
+                      lazyPreloadDistance={lazyPreloadDistance}
+                      navigationState={navigationState}
+                      style={sceneContainerStyle}
+                    >
+                      {({ loading }) =>
+                        loading
+                          ? renderLazyPlaceholder({ route })
+                          : renderScene({
+                              ...sceneRendererProps,
+                              route,
+                            })
+                      }
+                    </SceneView>
+                  );
+                })
+              )}
+              {tabBarPosition === 'bottom' &&
+                renderTabBar({
+                  ...sceneRendererProps,
+                  navigationState,
+                })}
+            </React.Fragment>
+          );
+        }}
+      </Pager>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  pager: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+});

package/src/index.tsx

@@ -0,0 +1,10 @@
+export { default as SceneMap } from './SceneMap';
+export type { Props as TabBarProps } from './TabBar';
+export { default as TabBar } from './TabBar';
+export type { Props as TabBarIndicatorProps } from './TabBarIndicator';
+export { default as TabBarIndicator } from './TabBarIndicator';
+export type { Props as TabBarItemProps } from './TabBarItem';
+export { default as TabBarItem } from './TabBarItem';
+export type { Props as TabViewProps } from './TabView';
+export { default as TabView } from './TabView';
+export type { NavigationState, Route, SceneRendererProps } from './types';

package/src/types.tsx

@@ -0,0 +1,59 @@
+import type { Animated } from 'react-native';
+import type { PagerViewProps } from 'react-native-pager-view';
+
+export type Route = {
+  key: string;
+  icon?: string;
+  title?: string;
+  accessible?: boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+};
+
+export type Event = {
+  defaultPrevented: boolean;
+  preventDefault(): void;
+};
+
+export type Scene<T extends Route> = {
+  route: T;
+};
+
+export type NavigationState<T extends Route> = {
+  index: number;
+  routes: T[];
+};
+
+export type Layout = {
+  width: number;
+  height: number;
+};
+
+export type Listener = (value: number) => void;
+
+export type SceneRendererProps = {
+  layout: Layout;
+  position: Animated.AnimatedInterpolation<number>;
+  jumpTo: (key: string) => void;
+};
+
+export type EventEmitterProps = {
+  addEnterListener: (listener: Listener) => () => void;
+};
+
+export type PagerProps = Omit<
+  PagerViewProps,
+  | 'initialPage'
+  | 'scrollEnabled'
+  | 'onPageScroll'
+  | 'onPageSelected'
+  | 'onPageScrollStateChanged'
+  | 'keyboardDismissMode'
+  | 'children'
+> & {
+  keyboardDismissMode?: 'none' | 'on-drag' | 'auto';
+  swipeEnabled?: boolean;
+  animationEnabled?: boolean;
+  onSwipeStart?: () => void;
+  onSwipeEnd?: () => void;
+};

package/src/useAnimatedValue.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Animated } from 'react-native';
+
+export default function useAnimatedValue(initialValue: number) {
+  const lazyRef = React.useRef<Animated.Value>();
+
+  if (lazyRef.current === undefined) {
+    lazyRef.current = new Animated.Value(initialValue);
+  }
+
+  return lazyRef.current as Animated.Value;
+}