@amazon-devices/react-navigation__react-native-tab-view 7.0.1759135970 → 8.0.9000000000

package/src/TabView.tsx

@@ -1,42 +1,55 @@
 import * as React from 'react';
 import {
-  LayoutChangeEvent,
-  StyleProp,
+  I18nManager,
+  type LayoutChangeEvent,
+  Platform,
+  type StyleProp,
   StyleSheet,
   View,
-  ViewStyle,
+  type 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,
+  LocaleDirection,
   NavigationState,
   PagerProps,
   Route,
   SceneRendererProps,
+  TabDescriptor,
 } from './types';
 
-export type Props<T extends Route> = PagerProps & {
+export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
   onIndexChange: (index: number) => void;
+  onTabSelect?: (props: { 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> }
+    props: SceneRendererProps & {
+      navigationState: NavigationState<T>;
+      options: Record<string, TabDescriptor<T>> | undefined;
+    }
   ) => React.ReactNode;
   tabBarPosition?: 'top' | 'bottom';
   initialLayout?: Partial<Layout>;
   lazy?: ((props: { route: T }) => boolean) | boolean;
   lazyPreloadDistance?: number;
-  sceneContainerStyle?: StyleProp<ViewStyle>;
+  direction?: LocaleDirection;
   pagerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
+  renderScene: (props: SceneRendererProps & { route: T }) => React.ReactNode;
+  options?: Record<string, TabDescriptor<T>>;
+  commonOptions?: TabDescriptor<T>;
 };
 
-export default function TabView<T extends Route>({
+const renderLazyPlaceholderDefault = () => null;
+
+export function TabView<T extends Route>({
   onIndexChange,
+  onTabSelect,
   navigationState,
   renderScene,
   initialLayout,
@@ -45,16 +58,30 @@ export default function TabView<T extends Route>({
   lazyPreloadDistance = 0,
   onSwipeStart,
   onSwipeEnd,
-  renderLazyPlaceholder = () => null,
+  renderLazyPlaceholder = renderLazyPlaceholderDefault,
+  // eslint-disable-next-line @eslint-react/no-unstable-default-props
   renderTabBar = (props) => <TabBar {...props} />,
-  sceneContainerStyle,
   pagerStyle,
   style,
+  direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
   swipeEnabled = true,
   tabBarPosition = 'top',
   animationEnabled = true,
   overScrollMode,
+  options: sceneOptions,
+  commonOptions,
 }: Props<T>) {
+  if (
+    Platform.OS !== 'web' &&
+    direction !== (I18nManager.getConstants().isRTL ? 'rtl' : 'ltr')
+  ) {
+    console.warn(
+      `The 'direction' prop is set to '${direction}' but the effective value is '${
+        I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
+      }'. This is not supported. Make sure to match the 'direction' prop with the writing direction of the app.`
+    );
+  }
+
   const [layout, setLayout] = React.useState({
     width: 0,
     height: 0,
@@ -79,6 +106,16 @@ export default function TabView<T extends Route>({
     });
   };
 
+  const options = Object.fromEntries(
+    navigationState.routes.map((route) => [
+      route.key,
+      {
+        ...commonOptions,
+        ...sceneOptions?.[route.key],
+      },
+    ])
+  );
+
   return (
     <View onLayout={handleLayout} style={[styles.pager, style]}>
       <Pager
@@ -89,12 +126,14 @@ export default function TabView<T extends Route>({
         onSwipeStart={onSwipeStart}
         onSwipeEnd={onSwipeEnd}
         onIndexChange={jumpToIndex}
+        onTabSelect={onTabSelect}
         animationEnabled={animationEnabled}
         overScrollMode={overScrollMode}
         style={pagerStyle}
+        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,
@@ -107,20 +146,23 @@ export default function TabView<T extends Route>({
               {tabBarPosition === 'top' &&
                 renderTabBar({
                   ...sceneRendererProps,
+                  options,
                   navigationState,
                 })}
               {render(
                 navigationState.routes.map((route, i) => {
+                  const { sceneStyle } = options?.[route.key] ?? {};
+
                   return (
                     <SceneView
+                      key={route.key}
                       {...sceneRendererProps}
                       addEnterListener={addEnterListener}
-                      key={route.key}
                       index={i}
                       lazy={typeof lazy === 'function' ? lazy({ route }) : lazy}
                       lazyPreloadDistance={lazyPreloadDistance}
                       navigationState={navigationState}
-                      style={sceneContainerStyle}
+                      style={sceneStyle}
                     >
                       {({ loading }) =>
                         loading
@@ -137,6 +179,7 @@ export default function TabView<T extends Route>({
               {tabBarPosition === 'bottom' &&
                 renderTabBar({
                   ...sceneRendererProps,
+                  options,
                   navigationState,
                 })}
             </React.Fragment>

package/src/index.tsx

@@ -1,10 +1,15 @@
-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 type { NavigationState, Route, SceneRendererProps } from './types';
+export { TabView } from './TabView';
+export type {
+  NavigationState,
+  Route,
+  SceneRendererProps,
+  TabDescriptor,
+} from './types';

package/src/types.tsx

@@ -1,6 +1,34 @@
-import type { Animated } from 'react-native';
+import type { Animated, StyleProp, TextStyle, ViewStyle } 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: {
+    route: T;
+    labelText?: string;
+    focused: boolean;
+    color: string;
+    allowFontScaling?: boolean;
+    style?: StyleProp<TextStyle>;
+  }) => React.ReactNode;
+  labelStyle?: StyleProp<TextStyle>;
+  icon?: (props: {
+    route: T;
+    focused: boolean;
+    color: string;
+    size: number;
+  }) => React.ReactNode;
+  badge?: (props: { route: T }) => React.ReactElement;
+  sceneStyle?: StyleProp<ViewStyle>;
+};
+
+export type LocaleDirection = 'ltr' | 'rtl';
+
 export type Route = {
   key: string;
   icon?: string;

package/src/useAnimatedValue.tsx

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