react-native-tab-view 3.5.0 → 3.5.2

package/src/TabBarItem.tsx

@@ -11,7 +11,8 @@ import {
 } from 'react-native';
 import useLatestCallback from 'use-latest-callback';
 
-import PlatformPressable from './PlatformPressable';
+import { PlatformPressable } from './PlatformPressable';
+import { TabBarItemLabel } from './TabBarItemLabel';
 import type { NavigationState, Route, Scene } from './types';
 
 export type Props<T extends Route> = {
@@ -85,18 +86,26 @@ const getInactiveOpacity = (
 
 type TabBarItemInternalProps<T extends Route> = Omit<
   Props<T>,
-  'navigationState'
+  | 'navigationState'
+  | 'getAccessibilityLabel'
+  | 'getLabelText'
+  | 'getTestID'
+  | 'getAccessible'
 > & {
   isFocused: boolean;
   index: number;
   routesLength: number;
+  accessibilityLabel?: string;
+  label?: string;
+  testID?: string;
+  accessible?: boolean;
 };
 
 const TabBarItemInternal = <T extends Route>({
-  getAccessibilityLabel,
-  getAccessible,
-  getLabelText,
-  getTestID,
+  accessibilityLabel,
+  accessible,
+  label: labelText,
+  testID,
   onLongPress,
   onPress,
   isFocused,
@@ -166,29 +175,16 @@ const TabBarItemInternal = <T extends Route>({
     }
   }
 
-  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;
-        };
+  const renderLabel = renderLabelCustom
+    ? renderLabelCustom
+    : (labelProps: { color: string }) => (
+        <TabBarItemLabel
+          {...labelProps}
+          icon={icon}
+          label={labelText}
+          labelStyle={labelStyle}
+        />
+      );
 
   if (renderLabel) {
     const activeLabel = renderLabel({
@@ -225,20 +221,16 @@ const TabBarItemInternal = <T extends Route>({
 
   const scene = { route };
 
-  let accessibilityLabel = getAccessibilityLabel(scene);
-
   accessibilityLabel =
-    typeof accessibilityLabel !== 'undefined'
-      ? accessibilityLabel
-      : getLabelText(scene);
+    typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : labelText;
 
   const badge = renderBadge ? renderBadge(scene) : null;
 
   return (
     <PlatformPressable
       android_ripple={android_ripple}
-      testID={getTestID(scene)}
-      accessible={getAccessible(scene)}
+      testID={testID}
+      accessible={accessible}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="tab"
       accessibilityState={{ selected: isFocused }}
@@ -265,15 +257,32 @@ const MemoizedTabBarItemInternal = React.memo(
   TabBarItemInternal
 ) as typeof TabBarItemInternal;
 
-function TabBarItem<T extends Route>(props: Props<T>) {
-  const { onPress, onLongPress, onLayout, navigationState, route, ...rest } =
-    props;
+export function TabBarItem<T extends Route>(props: Props<T>) {
+  const {
+    onPress,
+    onLongPress,
+    onLayout,
+    navigationState,
+    route,
+    getAccessibilityLabel,
+    getLabelText,
+    getTestID,
+    getAccessible,
+    ...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}
@@ -284,18 +293,15 @@ function TabBarItem<T extends Route>(props: Props<T>) {
       route={route}
       index={tabIndex}
       routesLength={navigationState.routes.length}
+      accessibilityLabel={accessibilityLabel}
+      label={label}
+      testID={testID}
+      accessible={accessible}
     />
   );
 }
 
-export default TabBarItem;
-
 const styles = StyleSheet.create({
-  label: {
-    margin: 4,
-    backgroundColor: 'transparent',
-    textTransform: 'uppercase',
-  },
   icon: {
     margin: 2,
   },

package/src/TabBarItemLabel.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
+
+interface TabBarItemLabelProps {
+  color: string;
+  label?: string;
+  labelStyle: StyleProp<ViewStyle>;
+  icon: React.ReactNode;
+}
+
+export const TabBarItemLabel = React.memo(
+  ({ color, label, labelStyle, icon }: TabBarItemLabelProps) => {
+    if (!label) {
+      return null;
+    }
+
+    return (
+      <Animated.Text
+        style={[
+          styles.label,
+          icon ? { marginTop: 0 } : null,
+          labelStyle,
+          { color: color },
+        ]}
+      >
+        {label}
+      </Animated.Text>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  label: {
+    margin: 4,
+    backgroundColor: 'transparent',
+    textTransform: 'uppercase',
+  },
+});

package/src/TabView.tsx

@@ -7,9 +7,9 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import Pager from './Pager';
-import SceneView from './SceneView';
-import TabBar from './TabBar';
+import { Pager } from './Pager';
+import { SceneView } from './SceneView';
+import { TabBar } from './TabBar';
 import type {
   Layout,
   NavigationState,
@@ -35,7 +35,7 @@ export type Props<T extends Route> = PagerProps & {
   style?: StyleProp<ViewStyle>;
 };
 
-export default function TabView<T extends Route>({
+export function TabView<T extends Route>({
   onIndexChange,
   navigationState,
   renderScene,

package/src/index.tsx

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

package/src/useAnimatedValue.tsx

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