react-native-tab-view 5.0.0-alpha.0 → 5.0.0-alpha.10

package/src/PagerViewAdapter.native.tsx

@@ -36,9 +36,19 @@ export function PagerViewAdapter({
   children,
   style,
   animationEnabled,
+  layoutDirection = 'ltr',
   ...rest
 }: PagerViewAdapterProps) {
-  const { index } = navigationState;
+  const { index, routes } = navigationState;
+
+  const isRTL = layoutDirection === 'rtl';
+
+  // iOS reports RTL pager offsets from the opposite end
+  // So we need to invert them to get the logical route index
+  const shouldInvertOffset = Platform.OS === 'ios' && isRTL;
+  const initialPosition = shouldInvertOffset
+    ? routes.length - 1 - index
+    : index;
 
   const listeners = React.useRef<Set<Listener>>(new Set()).current;
 
@@ -46,25 +56,33 @@ export function PagerViewAdapter({
   const indexRef = React.useRef<number>(index);
   const navigationStateRef = React.useRef(navigationState);
 
-  const position = useAnimatedValue(index);
+  const position = useAnimatedValue(initialPosition);
   const offset = useAnimatedValue(0);
 
   React.useEffect(() => {
     navigationStateRef.current = navigationState;
   });
 
-  const jumpTo = useLatestCallback((key: string) => {
-    const index = navigationStateRef.current.routes.findIndex(
-      (route: { key: string }) => route.key === key
-    );
+  const setReportedOffset = useLatestCallback((index: number) => {
+    position.setValue(shouldInvertOffset ? routes.length - 1 - index : index);
+    offset.setValue(0);
+  });
 
+  const setPage = useLatestCallback((index: number) => {
     if (animationEnabled) {
       pagerRef.current?.setPage(index);
     } else {
       pagerRef.current?.setPageWithoutAnimation(index);
-      position.setValue(index);
+      setReportedOffset(index);
     }
+  });
 
+  const jumpTo = useLatestCallback((key: string) => {
+    const index = navigationStateRef.current.routes.findIndex(
+      (route: { key: string }) => route.key === key
+    );
+
+    setPage(index);
     onIndexChange(index);
   });
 
@@ -74,14 +92,9 @@ export function PagerViewAdapter({
     }
 
     if (indexRef.current !== index) {
-      if (animationEnabled) {
-        pagerRef.current?.setPage(index);
-      } else {
-        pagerRef.current?.setPageWithoutAnimation(index);
-        position.setValue(index);
-      }
+      setPage(index);
     }
-  }, [keyboardDismissMode, index, animationEnabled, position]);
+  }, [keyboardDismissMode, index, setPage]);
 
   const onPageScrollStateChanged = (
     state: PageScrollStateChangedNativeEvent
@@ -123,10 +136,14 @@ export function PagerViewAdapter({
     };
   });
 
-  const memoizedPosition = React.useMemo(
-    () => Animated.add(position, offset),
-    [offset, position]
-  );
+  const memoizedPosition = React.useMemo(() => {
+    const value = Animated.add(position, offset);
+
+    // Convert the native RTL offset back to the logical route index
+    return shouldInvertOffset
+      ? Animated.subtract(routes.length - 1, value)
+      : value;
+  }, [offset, position, routes.length, shouldInvertOffset]);
 
   return children({
     position: memoizedPosition,
@@ -138,6 +155,7 @@ export function PagerViewAdapter({
         ref={pagerRef}
         style={[styles.container, style]}
         initialPage={index}
+        layoutDirection={layoutDirection}
         keyboardDismissMode={
           keyboardDismissMode === 'auto' ? 'on-drag' : keyboardDismissMode
         }

package/src/PanResponderAdapter.tsx

@@ -293,6 +293,10 @@ export function PanResponderAdapter({
             const route = routes[i];
             const focused = i === index;
 
+            if (route == null) {
+              throw new Error(`Couldn't find a route at index ${i}.`);
+            }
+
             if (!layout.width && !focused) {
               return null;
             }

package/src/PlatformPressable.tsx

@@ -8,12 +8,16 @@ import {
 } from 'react-native';
 
 export type Props = Omit<PressableProps, 'onPress'> & {
-  href?: string;
-  pressColor?: ColorValue;
-  pressOpacity?: number;
-  onPress?: (
-    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
-  ) => void;
+  href?: string | undefined;
+  pressColor?: ColorValue | undefined;
+  pressOpacity?: number | undefined;
+  onPress?:
+    | ((
+        e:
+          | React.MouseEvent<HTMLAnchorElement, MouseEvent>
+          | GestureResponderEvent
+      ) => void)
+    | undefined;
   children: React.ReactNode;
 };
 
@@ -27,7 +31,7 @@ const ANDROID_SUPPORTS_RIPPLE =
 export function PlatformPressable({
   disabled,
   android_ripple,
-  pressColor = 'rgba(0, 0, 0, .32)',
+  pressColor = 'rgba(0, 0, 0, .10)',
   pressOpacity,
   style,
   onPress,

package/src/SceneMap.tsx

@@ -18,13 +18,21 @@ const SceneComponent = React.memo(
 SceneComponent.displayName = 'SceneComponent';
 
 export function SceneMap<T>(scenes: { [key: string]: React.ComponentType<T> }) {
-  return ({ route, jumpTo, position }: SceneProps) => (
-    <SceneComponent
-      key={route.key}
-      component={scenes[route.key]}
-      route={route}
-      jumpTo={jumpTo}
-      position={position}
-    />
-  );
+  return ({ route, jumpTo, position }: SceneProps) => {
+    const component = scenes[route.key];
+
+    if (component == null) {
+      throw new Error(`Couldn't find a scene for route '${route.key}'.`);
+    }
+
+    return (
+      <SceneComponent
+        key={route.key}
+        component={component}
+        route={route}
+        jumpTo={jumpTo}
+        position={position}
+      />
+    );
+  };
 }

package/src/SceneView.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
 
 import type {
   EventEmitterProps,
@@ -69,8 +75,41 @@ export function SceneView<T extends Route>({
     };
   }, [subscribe, index, isLoading, lazy]);
 
+  const ref = React.useRef<View>(null);
+
+  React.useLayoutEffect(() => {
+    let unsubscribe: (() => void) | undefined;
+
+    const element = ref.current;
+
+    if (
+      Platform.OS === 'web' &&
+      typeof HTMLElement !== 'undefined' &&
+      element &&
+      element instanceof HTMLElement
+    ) {
+      if (isFocused) {
+        element.removeAttribute('inert');
+      } else {
+        element.setAttribute('inert', '');
+      }
+
+      // Remove inert as soon as the view is in viewport
+      // This will allow quick interaction after swiping
+      unsubscribe = subscribe((event) => {
+        if (event.type === 'enter' && event.index === index) {
+          element.removeAttribute('inert');
+        }
+      });
+    }
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [index, isFocused, subscribe]);
+
   return (
-    <View aria-hidden={!isFocused} style={[styles.route, style]}>
+    <View ref={ref} aria-hidden={!isFocused} style={[styles.route, style]}>
       {children({ loading: isLoading })}
     </View>
   );

package/src/ScrollViewAdapter.tsx

@@ -36,7 +36,7 @@ export function ScrollViewAdapter({
   children,
   style,
   animationEnabled = true,
-  layoutDirection: _, // Not supported in ScrollViewAdapter
+  layoutDirection = 'ltr',
   decelerationRate = 'fast',
   bounces = false,
   overScrollMode = 'never',
@@ -45,6 +45,16 @@ export function ScrollViewAdapter({
 }: ScrollViewAdapterProps) {
   const { index, routes } = navigationState;
 
+  const isRTL = layoutDirection === 'rtl';
+
+  // Android reports RTL scroll offsets from the opposite end (0 at the max scroll offset)
+  // So we need to invert them to get the logical route index
+  const shouldInvertOffset = Platform.OS === 'android' && isRTL;
+
+  // Web uses negative scroll offsets in RTL
+  // So we need to negate them to get the logical route index
+  const shouldNegateOffset = Platform.OS === 'web' && isRTL;
+
   const listeners = React.useRef<Set<Listener>>(new Set()).current;
 
   const scrollViewRef = React.useRef<ScrollView>(null);
@@ -52,13 +62,48 @@ export function ScrollViewAdapter({
 
   const isInitialRef = React.useRef(true);
 
+  const getScrollOffsetForIndex = React.useCallback(
+    (index: number, width: number) =>
+      (shouldNegateOffset ? -index : index) * width,
+    [shouldNegateOffset]
+  );
+
+  const getReportedOffsetForIndex = React.useCallback(
+    (index: number, width: number) =>
+      shouldInvertOffset
+        ? (routes.length - 1 - index) * width
+        : getScrollOffsetForIndex(index, width),
+    [getScrollOffsetForIndex, routes.length, shouldInvertOffset]
+  );
+
+  const getIndexFromOffset = React.useCallback(
+    (x: number, width: number) => {
+      const offset = clamp(
+        x / width,
+        shouldNegateOffset ? -(routes.length - 1) : 0,
+        routes.length - 1
+      );
+
+      if (shouldInvertOffset) {
+        return routes.length - 1 - offset;
+      }
+
+      if (shouldNegateOffset) {
+        return -offset;
+      }
+
+      return offset;
+    },
+    [routes.length, shouldInvertOffset, shouldNegateOffset]
+  );
+
   const [layout, onLayout] = useMeasureLayout(containerRef, ({ width }) => {
     if (isInitialRef.current) {
-      const x = index * width;
+      const x = getScrollOffsetForIndex(index, width);
 
       setContentOffset({ x, y: 0 });
 
-      offsetX.setValue(x);
+      offsetX.setValue(getReportedOffsetForIndex(index, width));
     } else if (indexRef.current !== index) {
       scrollToIndex(index);
     }
@@ -67,14 +112,14 @@ export function ScrollViewAdapter({
   });
 
   const [contentOffset, setContentOffset] = React.useState(() => ({
-    x: index * layout.width,
+    x: getScrollOffsetForIndex(index, layout.width),
     y: 0,
   }));
 
   React.useEffect(() => {
-    // FIXME: contentOffset is not supported on Android
+    // FIXME: contentOffset is not supported on Android and Web
     // So we manually scroll after state update
-    if (Platform.OS === 'android') {
+    if (Platform.OS === 'android' || Platform.OS === 'web') {
       requestAnimationFrame(() => {
         scrollViewRef.current?.scrollTo({
           x: contentOffset.x,
@@ -82,13 +127,13 @@ export function ScrollViewAdapter({
         });
       });
     }
-  }, [animationEnabled, contentOffset.x]);
+  }, [contentOffset.x]);
 
   const [offsetX] = React.useState(() => new Animated.Value(contentOffset.x));
 
   const scrollToIndex = useLatestCallback((index: number) => {
     scrollViewRef.current?.scrollTo({
-      x: index * layout.width,
+      x: getScrollOffsetForIndex(index, layout.width),
       animated: animationEnabled,
     });
   });
@@ -119,25 +164,43 @@ export function ScrollViewAdapter({
     };
   });
 
-  const position = React.useMemo(
-    () => (layout.width ? Animated.divide(offsetX, layout.width) : null),
-    [layout.width, offsetX]
-  );
+  const position = React.useMemo(() => {
+    if (!layout.width) {
+      return null;
+    }
+
+    const value = Animated.divide(offsetX, layout.width);
+
+    // Convert platform scroll offsets back to logical route index
+    return shouldInvertOffset
+      ? Animated.subtract(routes.length - 1, value)
+      : shouldNegateOffset
+        ? Animated.multiply(value, -1)
+        : value;
+  }, [
+    layout.width,
+    offsetX,
+    routes.length,
+    shouldInvertOffset,
+    shouldNegateOffset,
+  ]);
 
   const indexRef = React.useRef(index);
-  const timerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
+  const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  );
 
   const onScrollEnd = (x: number) => {
-    const value = clamp(x / layout.width, 0, routes.length - 1);
+    const nextIndex = getIndexFromOffset(x, layout.width);
 
-    if (value % 1 === 0) {
-      indexRef.current = value;
+    if (nextIndex % 1 === 0) {
+      indexRef.current = nextIndex;
 
-      if (value !== index) {
-        onIndexChange(value);
+      if (nextIndex !== index) {
+        onIndexChange(nextIndex);
       }
 
-      onTabSelect?.({ index: value });
+      onTabSelect?.({ index: nextIndex });
     }
   };
 
@@ -150,11 +213,10 @@ export function ScrollViewAdapter({
       },
     ],
     {
-      useNativeDriver: true,
+      useNativeDriver: Platform.OS !== 'web',
       listener: (event: ScrollEvent) => {
         const { x } = event.nativeEvent.contentOffset;
-
-        const value = clamp(x / layout.width, 0, routes.length - 1);
+        const value = getIndexFromOffset(x, layout.width);
 
         // The offset will overlap the current and the adjacent page
         // So we need to get the index of the adjacent page
@@ -228,6 +290,10 @@ export function ScrollViewAdapter({
               const route = routes[i];
               const focused = i === index;
 
+              if (route == null) {
+                throw new Error(`Couldn't find a route at index ${i}.`);
+              }
+
               if (!layout.width && !focused) {
                 return null;
               }