@zoverdoser/react-native-tab-view 1.0.0

package/src/TabBarIndicator.tsx

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import {
+  Animated,
+  Easing,
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native';
+
+import type {
+  LocaleDirection,
+  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: 'auto' | `${number}%` | number;
+  getTabWidth: GetTabWidth;
+  direction: LocaleDirection;
+  style?: StyleProp<ViewStyle>;
+  gap?: number;
+  children?: React.ReactNode;
+};
+
+const useNativeDriver = Platform.OS !== 'web';
+
+const getTranslateX = (
+  position: Animated.AnimatedInterpolation<number>,
+  routes: Route[],
+  getTabWidth: GetTabWidth,
+  direction: LocaleDirection,
+  gap?: number,
+  width?: number | string
+) => {
+  const inputRange = routes.map((_, i) => i);
+
+  // every index contains widths at all previous indices
+  const outputRange = routes.reduce<number[]>((acc, _, i) => {
+    if (typeof width === 'number') {
+      if (i === 0) return [getTabWidth(i) / 2 - width / 2];
+
+      let sumTabWidth = 0;
+      for (let j = 0; j < i; j++) {
+        sumTabWidth += getTabWidth(j);
+      }
+
+      return [
+        ...acc,
+        sumTabWidth + getTabWidth(i) / 2 + (gap ? gap * i : 0) - width / 2,
+      ];
+    } else {
+      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, direction === 'rtl' ? -1 : 1);
+};
+
+export function TabBarIndicator<T extends Route>({
+  getTabWidth,
+  layout,
+  navigationState,
+  position,
+  width,
+  direction,
+  gap,
+  style,
+  children,
+}: 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,
+        }).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, direction, gap, width)
+        : 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: direction === 'rtl' ? -0.5 : 0.5 }
+    );
+  }
+
+  const styleList: StyleProp<ViewStyle> = [];
+
+  // scaleX doesn't work properly on chrome and opera for linux and android
+  if (Platform.OS === 'web' && width === 'auto') {
+    styleList.push(
+      { width: transform[1].scaleX },
+      { left: transform[0].translateX }
+    );
+  } else {
+    styleList.push(
+      { width: width === 'auto' ? 1 : width },
+      { start: `${(100 / routes.length) * navigationState.index}%` },
+      { transform }
+    );
+  }
+
+  return (
+    <Animated.View
+      style={[
+        styles.indicator,
+        styleList,
+        width === 'auto' ? { opacity: opacity } : null,
+        style,
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  indicator: {
+    backgroundColor: '#ffeb3b',
+    position: 'absolute',
+    start: 0,
+    bottom: 0,
+    end: 0,
+    height: 2,
+  },
+});

package/src/TabBarItem.tsx

@@ -0,0 +1,301 @@
+import * as React from 'react';
+import {
+  Animated,
+  type LayoutChangeEvent,
+  Platform,
+  type PressableAndroidRippleConfig,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+import useLatestCallback from 'use-latest-callback';
+
+import { PlatformPressable } from './PlatformPressable';
+import { TabBarItemLabel } from './TabBarItemLabel';
+import type {
+  AnimatedStyles,
+  NavigationState,
+  Route,
+  TabDescriptor,
+} from './types';
+
+export type Props<T extends Route> = TabDescriptor<T> & {
+  position: Animated.AnimatedInterpolation<number>;
+  route: T;
+  navigationState: NavigationState<T>;
+  pressColor?: string;
+  pressOpacity?: number;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  onPress: () => void;
+  onLongPress: () => void;
+  defaultTabWidth?: number;
+  style: StyleProp<ViewStyle>;
+  android_ripple?: PressableAndroidRippleConfig;
+  animatedStyles?: AnimatedStyles;
+};
+
+const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
+const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
+const ICON_SIZE = 24;
+
+type TabBarItemInternalProps<T extends Route> = Omit<
+  Props<T>,
+  | 'navigationState'
+  | 'getAccessibilityLabel'
+  | 'getLabelText'
+  | 'getTestID'
+  | 'getAccessible'
+  | 'options'
+> & {
+  isFocused: boolean;
+  index: number;
+  routesLength: number;
+} & TabDescriptor<T>;
+
+const ANDROID_RIPPLE_DEFAULT = { borderless: true };
+
+const TabBarItemInternal = <T extends Route>({
+  accessibilityLabel,
+  accessible,
+  label: customlabel,
+  testID,
+  onLongPress,
+  onPress,
+  isFocused,
+  position,
+  style,
+  labelStyle,
+  onLayout,
+  index: tabIndex,
+  pressColor,
+  pressOpacity,
+  defaultTabWidth,
+  icon: customIcon,
+  badge: customBadge,
+  href,
+  labelText,
+  routesLength,
+  android_ripple = ANDROID_RIPPLE_DEFAULT,
+  labelAllowFontScaling,
+  route,
+  animatedStyles,
+}: TabBarItemInternalProps<T>) => {
+  const inputRange = React.useMemo(
+    () => Array.from({ length: routesLength }, (_, i) => i),
+    [routesLength]
+  );
+  const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
+
+  const activeColor = animatedStyles?.color
+    ? animatedStyles?.color[1]
+    : typeof labelColorFromStyle === 'string'
+      ? labelColorFromStyle
+      : DEFAULT_ACTIVE_COLOR;
+  const inactiveColor = animatedStyles?.color
+    ? animatedStyles?.color[0]
+    : typeof labelColorFromStyle === 'string'
+      ? labelColorFromStyle
+      : DEFAULT_INACTIVE_COLOR;
+
+  const ReAnimatedProgress = useSharedValue(isFocused ? 1 : 0);
+
+  React.useEffect(() => {
+    const listenerId = position.addListener(({ value }) => {
+      const progress =
+        Math.abs(tabIndex - value) > 1 ? 0 : 1 - Math.abs(tabIndex - value);
+      ReAnimatedProgress.value = progress;
+    });
+    return () => {
+      position.removeListener(listenerId);
+    };
+  }, [position, ReAnimatedProgress, tabIndex, route.key]);
+
+  const ReAnimatedStyleRef = React.useRef(
+    useAnimatedStyle(() => {
+      const color = interpolateColor(
+        ReAnimatedProgress.value,
+        [0, 1],
+        [inactiveColor, activeColor]
+      );
+      return { color };
+    }, [ReAnimatedProgress, activeColor, inactiveColor])
+  );
+
+  const opacity = animatedStyles?.opacity
+    ? position.interpolate({
+        inputRange: Array.from({ length: routesLength }, (_, i) => i),
+        outputRange: inputRange.map((i) =>
+          i === tabIndex
+            ? animatedStyles.opacity![1]
+            : animatedStyles.opacity![0]
+        ),
+        extrapolate: 'clamp',
+      })
+    : 1;
+
+  const scale = animatedStyles?.scale
+    ? position.interpolate({
+        inputRange: Array.from({ length: routesLength }, (_, i) => i),
+        outputRange: inputRange.map((i) =>
+          i === tabIndex ? animatedStyles.scale![1] : animatedStyles.scale![0]
+        ),
+        extrapolate: 'clamp',
+      })
+    : 1;
+
+  const icon = React.useMemo(() => {
+    if (!customIcon) {
+      return null;
+    }
+
+    const iconEle = customIcon({
+      focused: isFocused,
+      color: ReAnimatedStyleRef.current.color,
+      size: ICON_SIZE,
+      route,
+    });
+
+    return (
+      <View style={styles.icon}>
+        <Animated.View style={{ opacity }}>{iconEle}</Animated.View>
+      </View>
+    );
+  }, [customIcon, route, isFocused, ReAnimatedStyleRef, opacity]);
+
+  const renderLabel = React.useCallback(
+    () =>
+      customlabel ? (
+        customlabel({
+          focused: isFocused,
+          style: labelStyle,
+          animatedStyles: ReAnimatedStyleRef.current,
+          labelText,
+          allowFontScaling: labelAllowFontScaling,
+          route,
+        })
+      ) : (
+        <TabBarItemLabel
+          icon={icon}
+          label={labelText}
+          style={labelStyle}
+          animatedStyles={ReAnimatedStyleRef.current}
+          labelAllowFontScaling={labelAllowFontScaling}
+        />
+      ),
+    [
+      customlabel,
+      labelStyle,
+      labelText,
+      labelAllowFontScaling,
+      route,
+      icon,
+      isFocused,
+      ReAnimatedStyleRef,
+    ]
+  );
+
+  const tabStyle = StyleSheet.flatten(style);
+  const isWidthSet = tabStyle?.width !== undefined;
+
+  const tabContainerStyle: ViewStyle | null = isWidthSet
+    ? null
+    : { width: defaultTabWidth };
+
+  const ariaLabel =
+    typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : labelText;
+
+  return (
+    <PlatformPressable
+      android_ripple={android_ripple}
+      testID={testID}
+      accessible={accessible}
+      role="tab"
+      aria-label={ariaLabel}
+      aria-selected={isFocused}
+      pressColor={pressColor}
+      pressOpacity={pressOpacity}
+      unstable_pressDelay={0}
+      onLayout={onLayout}
+      onPress={onPress}
+      onLongPress={onLongPress}
+      href={href}
+      style={[styles.pressable, tabContainerStyle]}
+    >
+      <Animated.View
+        pointerEvents="none"
+        style={[styles.item, tabStyle, { opacity, transform: [{ scale }] }]}
+      >
+        {icon}
+        <View>{renderLabel()}</View>
+        {customBadge != null ? (
+          <View style={styles.badge}>{customBadge({ route })}</View>
+        ) : null}
+      </Animated.View>
+    </PlatformPressable>
+  );
+};
+
+const MemoizedTabBarItemInternal = React.memo(
+  TabBarItemInternal
+) as typeof TabBarItemInternal;
+
+export 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}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    margin: 2,
+  },
+  item: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 10,
+    minHeight: 48,
+  },
+  badge: {
+    position: 'absolute',
+    top: 0,
+    end: 0,
+  },
+  pressable: {
+    // The label is not pressable on Windows
+    // Adding backgroundColor: 'transparent' seems to fix it
+    backgroundColor: 'transparent',
+    ...Platform.select({
+      // Roundness for iPad hover effect
+      ios: {
+        borderRadius: 10,
+        borderCurve: 'continuous',
+      },
+      default: null,
+    }),
+  },
+});

package/src/TabBarItemLabel.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import Animated, { type AnimatedStyle } from 'react-native-reanimated';
+interface TabBarItemLabelProps {
+  label?: string;
+  style: StyleProp<TextStyle>;
+  animatedStyles: AnimatedStyle<TextStyle>;
+  icon: React.ReactNode;
+  labelAllowFontScaling?: boolean;
+}
+
+export const TabBarItemLabel = React.memo(
+  ({
+    label,
+    style,
+    animatedStyles,
+    icon,
+    labelAllowFontScaling,
+  }: TabBarItemLabelProps) => {
+    if (!label) {
+      return null;
+    }
+
+    return (
+      <Animated.Text
+        style={[
+          styles.label,
+          icon ? { marginTop: 0 } : undefined,
+          style,
+          animatedStyles,
+        ]}
+        allowFontScaling={labelAllowFontScaling}
+      >
+        {label}
+      </Animated.Text>
+    );
+  }
+);
+
+TabBarItemLabel.displayName = 'TabBarItemLabel';
+
+const styles = StyleSheet.create({
+  label: {
+    margin: 4,
+    fontSize: 14,
+    fontWeight: '500',
+    backgroundColor: 'transparent',
+  },
+});