react-native-tab-view 4.0.0-alpha.1 → 4.0.0-alpha.10

package/src/TabBarItem.tsx

@@ -13,9 +13,9 @@ import useLatestCallback from 'use-latest-callback';
 
 import { PlatformPressable } from './PlatformPressable';
 import { TabBarItemLabel } from './TabBarItemLabel';
-import type { NavigationState, Route, Scene } from './types';
+import type { NavigationState, Route, TabDescriptor } from './types';
 
-export type Props<T extends Route> = {
+export type Props<T extends Route> = TabDescriptor<T> & {
   position: Animated.AnimatedInterpolation<number>;
   route: T;
   navigationState: NavigationState<T>;
@@ -23,21 +23,6 @@ export type Props<T extends Route> = {
   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;
@@ -49,6 +34,7 @@ export type Props<T extends Route> = {
 
 const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
 const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
+const ICON_SIZE = 24;
 
 const getActiveOpacity = (
   position: Animated.AnimatedInterpolation<number>,
@@ -91,26 +77,22 @@ type TabBarItemInternalProps<T extends Route> = Omit<
   | 'getLabelText'
   | 'getTestID'
   | 'getAccessible'
+  | 'options'
 > & {
   isFocused: boolean;
   index: number;
   routesLength: number;
-  accessibilityLabel?: string;
-  label?: string;
-  testID?: string;
-  accessible?: boolean;
-};
+} & TabDescriptor<T>;
 
 const TabBarItemInternal = <T extends Route>({
   accessibilityLabel,
   accessible,
-  label: labelText,
+  label: customlabel,
   testID,
   onLongPress,
   onPress,
   isFocused,
   position,
-  route,
   style,
   inactiveColor: inactiveColorCustom,
   activeColor: activeColorCustom,
@@ -119,12 +101,15 @@ const TabBarItemInternal = <T extends Route>({
   index: tabIndex,
   pressColor,
   pressOpacity,
-  renderBadge,
-  renderIcon,
   defaultTabWidth,
+  icon: customIcon,
+  badge: customBadge,
+  href,
+  labelText,
   routesLength,
-  renderLabel: renderLabelCustom,
   android_ripple = { borderless: true },
+  labelAllowFontScaling,
+  route,
 }: TabBarItemInternalProps<T>) => {
   const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
 
@@ -132,85 +117,88 @@ const TabBarItemInternal = <T extends Route>({
     activeColorCustom !== undefined
       ? activeColorCustom
       : typeof labelColorFromStyle === 'string'
-      ? labelColorFromStyle
-      : DEFAULT_ACTIVE_COLOR;
+        ? labelColorFromStyle
+        : DEFAULT_ACTIVE_COLOR;
   const inactiveColor =
     inactiveColorCustom !== undefined
       ? inactiveColorCustom
       : typeof labelColorFromStyle === 'string'
-      ? labelColorFromStyle
-      : DEFAULT_INACTIVE_COLOR;
+        ? 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;
+  const icon = React.useMemo(() => {
+    if (!customIcon) {
+      return null;
+    }
 
-  if (renderIcon) {
-    const activeIcon = renderIcon({
-      route,
-      focused: true,
-      color: activeColor,
-    });
-    const inactiveIcon = renderIcon({
-      route,
+    const inactiveIcon = customIcon({
       focused: false,
       color: inactiveColor,
+      size: ICON_SIZE,
+      route,
     });
 
-    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
-    ? renderLabelCustom
-    : (labelProps: { color: string }) => (
-        <TabBarItemLabel
-          {...labelProps}
-          icon={icon}
-          label={labelText}
-          labelStyle={labelStyle}
-        />
-      );
-
-  if (renderLabel) {
-    const activeLabel = renderLabel({
-      route,
+    const activeIcon = customIcon({
       focused: true,
       color: activeColor,
-    });
-    const inactiveLabel = renderLabel({
+      size: ICON_SIZE,
       route,
-      focused: false,
-      color: inactiveColor,
     });
 
-    label = (
-      <View>
+    return (
+      <View style={styles.icon}>
         <Animated.View style={{ opacity: inactiveOpacity }}>
-          {inactiveLabel}
+          {inactiveIcon}
         </Animated.View>
         <Animated.View
           style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}
         >
-          {activeLabel}
+          {activeIcon}
         </Animated.View>
       </View>
     );
-  }
+  }, [
+    activeColor,
+    activeOpacity,
+    customIcon,
+    inactiveColor,
+    inactiveOpacity,
+    route,
+  ]);
+
+  const renderLabel = React.useCallback(
+    (focused: boolean) =>
+      customlabel ? (
+        customlabel({
+          focused,
+          color: focused ? activeColor : inactiveColor,
+          style: labelStyle,
+          label: labelText,
+          allowFontScaling: labelAllowFontScaling,
+          route,
+        })
+      ) : (
+        <TabBarItemLabel
+          color={focused ? activeColor : inactiveColor}
+          icon={icon}
+          label={labelText}
+          labelStyle={labelStyle}
+        />
+      ),
+    [
+      customlabel,
+      activeColor,
+      labelStyle,
+      labelText,
+      labelAllowFontScaling,
+      route,
+      inactiveColor,
+      icon,
+    ]
+  );
 
   const tabStyle = StyleSheet.flatten(style);
   const isWidthSet = tabStyle?.width !== undefined;
@@ -219,13 +207,9 @@ const TabBarItemInternal = <T extends Route>({
     ? null
     : { width: defaultTabWidth };
 
-  const scene = { route };
-
   accessibilityLabel =
     typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : labelText;
 
-  const badge = renderBadge ? renderBadge(scene) : null;
-
   return (
     <PlatformPressable
       android_ripple={android_ripple}
@@ -240,12 +224,24 @@ const TabBarItemInternal = <T extends Route>({
       onLayout={onLayout}
       onPress={onPress}
       onLongPress={onLongPress}
+      href={href}
       style={[styles.pressable, tabContainerStyle]}
     >
       <View pointerEvents="none" style={[styles.item, tabStyle]}>
         {icon}
-        {label}
-        {badge != null ? <View style={styles.badge}>{badge}</View> : null}
+        <View>
+          <Animated.View style={{ opacity: inactiveOpacity }}>
+            {renderLabel(false)}
+          </Animated.View>
+          <Animated.View
+            style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}
+          >
+            {renderLabel(true)}
+          </Animated.View>
+        </View>
+        {customBadge != null ? (
+          <View style={styles.badge}>{customBadge()}</View>
+        ) : null}
       </View>
     </PlatformPressable>
   );
@@ -256,31 +252,15 @@ const MemoizedTabBarItemInternal = React.memo(
 ) as typeof TabBarItemInternal;
 
 export function TabBarItem<T extends Route>(props: Props<T>) {
-  const {
-    onPress,
-    onLongPress,
-    onLayout,
-    navigationState,
-    route,
-    getAccessibilityLabel,
-    getLabelText,
-    getTestID,
-    getAccessible,
-    ...rest
-  } = props;
+  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);
 
-  const scene = { route };
-
-  const accessibilityLabel = getAccessibilityLabel(scene);
-  const label = getLabelText(scene);
-  const testID = getTestID(scene);
-  const accessible = getAccessible(scene);
-
   return (
     <MemoizedTabBarItemInternal
       {...rest}
@@ -291,10 +271,6 @@ export function TabBarItem<T extends Route>(props: Props<T>) {
       route={route}
       index={tabIndex}
       routesLength={navigationState.routes.length}
-      accessibilityLabel={accessibilityLabel}
-      label={label}
-      testID={testID}
-      accessible={accessible}
     />
   );
 }
@@ -313,7 +289,7 @@ const styles = StyleSheet.create({
   badge: {
     position: 'absolute',
     top: 0,
-    right: 0,
+    end: 0,
   },
   pressable: {
     // The label is not pressable on Windows

package/src/TabBarItemLabel.tsx

@@ -33,7 +33,8 @@ export const TabBarItemLabel = React.memo(
 const styles = StyleSheet.create({
   label: {
     margin: 4,
+    fontSize: 14,
+    fontWeight: '500',
     backgroundColor: 'transparent',
-    textTransform: 'uppercase',
   },
 });

package/src/TabView.tsx

@@ -24,7 +24,6 @@ import type {
 export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
   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> }
@@ -37,6 +36,7 @@ export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
   direction?: LocaleDirection;
   pagerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
+  renderScene: (props: SceneRendererProps & { route: T }) => React.ReactNode;
 };
 
 export function TabView<T extends Route>({
@@ -111,7 +111,7 @@ export function TabView<T extends Route>({
         layoutDirection={direction}
       >
         {({ position, render, addEnterListener, jumpTo }) => {
-          // All of the props here must not change between re-renders
+          // All the props here must not change between re-renders
           // This is crucial to optimizing the routes with PureComponent
           const sceneRendererProps = {
             position,

package/src/index.tsx

@@ -7,4 +7,9 @@ export type { Props as TabBarItemProps } from './TabBarItem';
 export { TabBarItem } from './TabBarItem';
 export type { Props as TabViewProps } from './TabView';
 export { TabView } from './TabView';
-export type { NavigationState, Route, SceneRendererProps } from './types';
+export type {
+  NavigationState,
+  Route,
+  SceneRendererProps,
+  TabDescriptor,
+} from './types';

package/src/types.tsx

@@ -1,6 +1,30 @@
-import type { Animated } from 'react-native';
+import type { Animated, StyleProp, TextStyle } from 'react-native';
 import type { PagerViewProps } from 'react-native-pager-view';
 
+export type TabDescriptor<T extends Route> = {
+  accessibilityLabel?: string;
+  accessible?: boolean;
+  testID?: string;
+  labelText?: string;
+  labelAllowFontScaling?: boolean;
+  href?: string;
+  label?: (props: {
+    focused: boolean;
+    color: string;
+    style?: StyleProp<TextStyle>;
+    allowFontScaling?: boolean;
+    label?: string;
+    route: T;
+  }) => React.ReactElement;
+  icon?: (props: {
+    focused: boolean;
+    color: string;
+    size: number;
+    route: T;
+  }) => React.ReactElement;
+  badge?: () => React.ReactElement;
+};
+
 export type LocaleDirection = 'ltr' | 'rtl';
 
 export type Route = {