react-native-tab-view 4.0.0-rc.8 → 4.0.0

package/src/PlatformPressable.tsx

@@ -18,11 +18,7 @@ const ANDROID_SUPPORTS_RIPPLE =
   Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
 
 /**
- * PlatformPressable provides an abstraction on top of TouchableNativeFeedback and
- * TouchableOpacity to handle platform differences.
- *
- * On Android, you can pass the props of TouchableNativeFeedback.
- * On other platforms, you can pass the props of TouchableOpacity.
+ * PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
  */
 export function PlatformPressable({
   disabled,
@@ -34,16 +30,16 @@ export function PlatformPressable({
   ...rest
 }: Props) {
   const handlePress = (e: GestureResponderEvent) => {
-    // @ts-expect-error: these properties exist on web, but not in React Native
-    const hasModifierKey = e.metaKey || e.altKey || e.ctrlKey || e.shiftKey; // ignore clicks with modifier keys
-    // @ts-expect-error: these properties exist on web, but not in React Native
-    const isLeftClick = e.button == null || e.button === 0; // only handle left clicks
-    const isSelfTarget = [undefined, null, '', 'self'].includes(
+    if (Platform.OS === 'web' && rest.href !== null) {
       // @ts-expect-error: these properties exist on web, but not in React Native
-      e.currentTarget?.target
-    ); // let browser handle "target=_blank" etc.
+      const hasModifierKey = e.metaKey || e.altKey || e.ctrlKey || e.shiftKey; // ignore clicks with modifier keys
+      // @ts-expect-error: these properties exist on web, but not in React Native
+      const isLeftClick = e.button === null || e.button === 0; // only handle left clicks
+      const isSelfTarget = [undefined, null, '', 'self'].includes(
+        // @ts-expect-error: these properties exist on web, but not in React Native
+        e.currentTarget?.target
+      ); // let browser handle "target=_blank" etc.
 
-    if (Platform.OS === 'web' && rest.href != null) {
       if (!hasModifierKey && isLeftClick && isSelfTarget) {
         e.preventDefault();
         onPress?.(e);
@@ -62,7 +58,12 @@ export function PlatformPressable({
       }
       style={({ pressed }) => [
         {
-          cursor: 'pointer', // Add hover effect on iPad and VisionOS,
+          cursor:
+            Platform.OS === 'web' || Platform.OS === 'ios'
+              ? // Pointer cursor on web
+                // Hover effect on iPad and visionOS
+                'pointer'
+              : 'auto',
           opacity: pressed && !ANDROID_SUPPORTS_RIPPLE ? pressOpacity : 1,
         },
         typeof style === 'function' ? style({ pressed }) : style,

package/src/SceneView.tsx

@@ -54,7 +54,7 @@ export function SceneView<T extends Route>({
     };
 
     let unsubscribe: (() => void) | undefined;
-    let timer: NodeJS.Timeout | undefined;
+    let timer: ReturnType<typeof setTimeout> | undefined;
 
     if (lazy && isLoading) {
       // If lazy mode is enabled, listen to when we enter screens

package/src/TabBar.tsx

@@ -43,7 +43,6 @@ export type Props<T extends Route> = SceneRendererProps & {
   pressColor?: string;
   pressOpacity?: number;
   options?: Record<string, TabDescriptor<T>>;
-  commonOptions?: TabDescriptor<T>;
   renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;
   renderTabBarItem?: (
     props: TabBarItemProps<T> & { key: string }
@@ -358,7 +357,6 @@ export function TabBar<T extends Route>({
   testID,
   android_ripple,
   options,
-  commonOptions,
 }: Props<T>) {
   const [layout, setLayout] = React.useState<Layout>(
     propLayout ?? { width: 0, height: 0 }
@@ -455,10 +453,7 @@ export function TabBar<T extends Route>({
         accessible = getAccessibleDefault({ route }),
         accessibilityLabel = getAccessibilityLabelDefault({ route }),
         ...rest
-      } = {
-        ...commonOptions,
-        ...options?.[route.key],
-      };
+      } = options?.[route.key] ?? {};
 
       const onLayout = isWidthDynamic
         ? (e: LayoutChangeEvent) => {
@@ -553,7 +548,7 @@ export function TabBar<T extends Route>({
           {renderTabBarItem ? (
             renderTabBarItem(props)
           ) : (
-            <TabBarItem {...props} />
+            <TabBarItem {...props} key={props.key} />
           )}
         </>
       );
@@ -561,7 +556,6 @@ export function TabBar<T extends Route>({
     [
       position,
       navigationState,
-      commonOptions,
       options,
       activeColor,
       inactiveColor,

package/src/TabView.tsx

@@ -19,6 +19,7 @@ import type {
   PagerProps,
   Route,
   SceneRendererProps,
+  TabDescriptor,
 } from './types';
 
 export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
@@ -26,17 +27,21 @@ export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
   navigationState: NavigationState<T>;
   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>;
 };
 
 const renderLazyPlaceholderDefault = () => null;
@@ -54,7 +59,6 @@ export function TabView<T extends Route>({
   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',
@@ -62,6 +66,8 @@ export function TabView<T extends Route>({
   tabBarPosition = 'top',
   animationEnabled = true,
   overScrollMode,
+  options: sceneOptions,
+  commonOptions,
 }: Props<T>) {
   if (
     Platform.OS !== 'web' &&
@@ -98,6 +104,16 @@ export 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
@@ -127,10 +143,13 @@ export function TabView<T extends Route>({
               {tabBarPosition === 'top' &&
                 renderTabBar({
                   ...sceneRendererProps,
+                  options,
                   navigationState,
                 })}
               {render(
                 navigationState.routes.map((route, i) => {
+                  const { sceneStyle } = options?.[route.key] ?? {};
+
                   return (
                     <SceneView
                       {...sceneRendererProps}
@@ -140,7 +159,7 @@ export function TabView<T extends Route>({
                       lazy={typeof lazy === 'function' ? lazy({ route }) : lazy}
                       lazyPreloadDistance={lazyPreloadDistance}
                       navigationState={navigationState}
-                      style={sceneContainerStyle}
+                      style={sceneStyle}
                     >
                       {({ loading }) =>
                         loading
@@ -157,6 +176,7 @@ export function TabView<T extends Route>({
               {tabBarPosition === 'bottom' &&
                 renderTabBar({
                   ...sceneRendererProps,
+                  options,
                   navigationState,
                 })}
             </React.Fragment>

package/src/types.tsx

@@ -1,4 +1,4 @@
-import type { Animated, StyleProp, TextStyle } 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> = {
@@ -23,6 +23,7 @@ export type TabDescriptor<T extends Route> = {
     size: number;
   }) => React.ReactElement;
   badge?: (props: { route: T }) => React.ReactElement;
+  sceneStyle?: StyleProp<ViewStyle>;
 };
 
 export type LocaleDirection = 'ltr' | 'rtl';