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

package/src/PanResponderAdapter.tsx

@@ -10,35 +10,11 @@ import {
 } from 'react-native';
 import useLatestCallback from 'use-latest-callback';
 
-import type {
-  EventEmitterProps,
-  Layout,
-  Listener,
-  NavigationState,
-  PagerProps,
-  Route,
-} from './types';
+import type { AdapterProps, Listener } from './types';
 import { useAnimatedValue } from './useAnimatedValue';
+import { useMeasureLayout } from './useMeasureLayout';
 
-type Props<T extends Route> = PagerProps & {
-  layout: Layout;
-  onIndexChange: (index: number) => void;
-  onTabSelect?: (props: { index: number }) => void;
-  navigationState: NavigationState<T>;
-  children: (
-    props: EventEmitterProps & {
-      // Animated value which represents the state of current index
-      // It can include fractional digits as it represents the intermediate value
-      position: Animated.AnimatedInterpolation<number>;
-      // Function to actually render the content of the pager
-      // The parent component takes care of rendering
-      render: (children: React.ReactNode) => React.ReactNode;
-      // Callback to call when switching the tab
-      // The tab switch animation is performed even if the index in state is unchanged
-      jumpTo: (key: string) => void;
-    }
-  ) => React.ReactElement;
-};
+export type PanResponderAdapterProps = AdapterProps;
 
 const DEAD_ZONE = 12;
 
@@ -50,9 +26,8 @@ const DefaultTransitionSpec = {
   overshootClamping: true,
 };
 
-export function PanResponderAdapter<T extends Route>({
-  layout,
-  keyboardDismissMode = 'auto',
+export function PanResponderAdapter({
+  keyboardDismissMode,
   swipeEnabled = true,
   navigationState,
   onIndexChange,
@@ -63,15 +38,17 @@ export function PanResponderAdapter<T extends Route>({
   style,
   animationEnabled = false,
   layoutDirection = 'ltr',
-}: Props<T>) {
+}: PanResponderAdapterProps) {
   const { routes, index } = navigationState;
 
+  const containerRef = React.useRef<View>(null);
+  const [layout, onLayout] = useMeasureLayout(containerRef);
+
   const panX = useAnimatedValue(0);
 
-  const listenersRef = React.useRef<Listener[]>([]);
+  const listeners = React.useRef<Set<Listener>>(new Set()).current;
 
   const navigationStateRef = React.useRef(navigationState);
-  const layoutRef = React.useRef(layout);
   const onIndexChangeRef = React.useRef(onIndexChange);
   const onTabSelectRef = React.useRef(onTabSelect);
   const currentIndexRef = React.useRef(index);
@@ -82,7 +59,7 @@ export function PanResponderAdapter<T extends Route>({
 
   const jumpToIndex = useLatestCallback(
     (index: number, animate = animationEnabled) => {
-      const offset = -index * layoutRef.current.width;
+      const offset = -index * layout.width;
 
       const { timing, ...transitionConfig } = DefaultTransitionSpec;
 
@@ -112,7 +89,6 @@ export function PanResponderAdapter<T extends Route>({
 
   React.useEffect(() => {
     navigationStateRef.current = navigationState;
-    layoutRef.current = layout;
     onIndexChangeRef.current = onIndexChange;
     onTabSelectRef.current = onTabSelect;
   });
@@ -197,7 +173,12 @@ export function PanResponderAdapter<T extends Route>({
         position > index ? Math.ceil(position) : Math.floor(position);
 
       if (next !== index) {
-        listenersRef.current.forEach((listener) => listener(next));
+        listeners.forEach((listener) =>
+          listener({
+            type: 'enter',
+            index: next,
+          })
+        );
       }
     }
 
@@ -247,15 +228,11 @@ export function PanResponderAdapter<T extends Route>({
     jumpToIndex(nextIndex, true);
   };
 
-  const addEnterListener = useLatestCallback((listener: Listener) => {
-    listenersRef.current.push(listener);
+  const subscribe = useLatestCallback((listener: Listener) => {
+    listeners.add(listener);
 
     return () => {
-      const index = listenersRef.current.indexOf(listener);
-
-      if (index > -1) {
-        listenersRef.current.splice(index, 1);
-      }
+      listeners.delete(listener);
     };
   });
 
@@ -295,47 +272,57 @@ export function PanResponderAdapter<T extends Route>({
 
   return children({
     position: position ?? new Animated.Value(index),
-    addEnterListener,
+    subscribe,
     jumpTo,
     render: (children) => (
-      <Animated.View
-        style={[
-          styles.sheet,
-          layout.width
-            ? {
-                width: routes.length * layout.width,
-                transform: [{ translateX }],
-              }
-            : null,
-          style,
-        ]}
-        {...panResponder.panHandlers}
-      >
-        {React.Children.map(children, (child, i) => {
-          const route = routes[i];
-          const focused = i === index;
-
-          return (
-            <View
-              key={route.key}
-              style={
-                layout.width
-                  ? { width: layout.width }
-                  : focused
-                    ? StyleSheet.absoluteFill
-                    : null
-              }
-            >
-              {focused || layout.width ? child : null}
-            </View>
-          );
-        })}
-      </Animated.View>
+      <View ref={containerRef} onLayout={onLayout} style={styles.container}>
+        <Animated.View
+          style={[
+            styles.sheet,
+            layout.width
+              ? {
+                  width: routes.length * layout.width,
+                  transform: [{ translateX }],
+                }
+              : null,
+            style,
+          ]}
+          {...panResponder.panHandlers}
+        >
+          {children.map((child, i) => {
+            const route = routes[i];
+            const focused = i === index;
+
+            if (!layout.width && !focused) {
+              return null;
+            }
+
+            return (
+              <View
+                key={route.key}
+                style={
+                  layout.width
+                    ? { width: layout.width }
+                    : focused
+                      ? StyleSheet.absoluteFill
+                      : null
+                }
+              >
+                {child}
+              </View>
+            );
+          })}
+        </Animated.View>
+      </View>
     ),
   });
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
   sheet: {
     flex: 1,
     flexDirection: 'row',

package/src/PlatformPressable.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  type ColorValue,
   type GestureResponderEvent,
   Platform,
   Pressable,
@@ -8,7 +9,7 @@ import {
 
 export type Props = Omit<PressableProps, 'onPress'> & {
   href?: string;
-  pressColor?: string;
+  pressColor?: ColorValue;
   pressOpacity?: number;
   onPress?: (
     e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent

package/src/SceneView.tsx

@@ -22,43 +22,41 @@ export function SceneView<T extends Route>({
   children,
   navigationState,
   lazy,
-  layout,
   index,
   lazyPreloadDistance,
-  addEnterListener,
+  subscribe,
   style,
 }: Props<T>) {
-  const [isLoading, setIsLoading] = React.useState(
-    Math.abs(navigationState.index - index) > lazyPreloadDistance
-  );
+  const isFocused = navigationState.index === index;
+  const isLoaded =
+    isFocused || Math.abs(navigationState.index - index) <= lazyPreloadDistance;
+
+  const [isLoading, setIsLoading] = React.useState(!isLoaded);
 
-  if (
-    isLoading &&
-    Math.abs(navigationState.index - index) <= lazyPreloadDistance
-  ) {
+  if (isLoading && isLoaded) {
     // Always render the route when it becomes focused
+    // Or close to the focused route based on preload distance
     setIsLoading(false);
   }
 
   React.useEffect(() => {
-    const handleEnter = (value: number) => {
-      // If we're entering the current route, we need to load it
-      if (value === index) {
-        setIsLoading((prevState) => {
-          if (prevState) {
-            return false;
-          }
-          return prevState;
-        });
-      }
-    };
-
     let unsubscribe: (() => void) | undefined;
     let timer: ReturnType<typeof setTimeout> | undefined;
 
     if (lazy && isLoading) {
       // If lazy mode is enabled, listen to when we enter screens
-      unsubscribe = addEnterListener(handleEnter);
+      unsubscribe = subscribe((event) => {
+        // If we're entering the current route, we need to load it
+        if (event.type === 'enter' && event.index === index) {
+          setIsLoading((prevState) => {
+            if (prevState) {
+              return false;
+            }
+
+            return prevState;
+          });
+        }
+      });
     } else if (isLoading) {
       // If lazy mode is not enabled, render the scene with a delay if not loaded already
       // This improves the initial startup time as the scene is no longer blocking
@@ -69,31 +67,11 @@ export function SceneView<T extends Route>({
       unsubscribe?.();
       clearTimeout(timer);
     };
-  }, [addEnterListener, index, isLoading, lazy]);
-
-  const focused = navigationState.index === index;
+  }, [subscribe, index, isLoading, lazy]);
 
   return (
-    <View
-      aria-hidden={!focused}
-      style={[
-        styles.route,
-        // If we don't have the layout yet, make the focused screen fill the container
-        // This avoids delay before we are able to render pages side by side
-        layout.width
-          ? { width: layout.width }
-          : focused
-            ? StyleSheet.absoluteFill
-            : null,
-        style,
-      ]}
-    >
-      {
-        // Only render the route only if it's either focused or layout is available
-        // When layout is not available, we must not render unfocused routes
-        // so that the focused route can fill the screen
-        focused || layout.width ? children({ loading: isLoading }) : null
-      }
+    <View aria-hidden={!isFocused} style={[styles.route, style]}>
+      {children({ loading: isLoading })}
     </View>
   );
 }

package/src/ScrollViewAdapter.tsx

@@ -0,0 +1,268 @@
+import * as React from 'react';
+import {
+  Animated,
+  Keyboard,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  View,
+  type ViewProps,
+} from 'react-native';
+import useLatestCallback from 'use-latest-callback';
+
+import type { AdapterProps, Listener } from './types';
+import { useMeasureLayout } from './useMeasureLayout';
+
+export type ScrollViewAdapterProps = AdapterProps &
+  Omit<ViewProps, 'children'> & {
+    decelerationRate?: 'fast' | 'normal';
+    keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
+    bounces?: boolean;
+    overScrollMode?: 'always' | 'never' | 'auto';
+  };
+
+type ScrollEvent = Parameters<
+  NonNullable<React.ComponentProps<typeof Animated.ScrollView>['onScroll']>
+>[0];
+
+export function ScrollViewAdapter({
+  keyboardDismissMode,
+  swipeEnabled = true,
+  navigationState,
+  onIndexChange,
+  onTabSelect,
+  onSwipeStart,
+  onSwipeEnd,
+  children,
+  style,
+  animationEnabled = true,
+  layoutDirection: _, // Not supported in ScrollViewAdapter
+  decelerationRate = 'fast',
+  bounces = false,
+  overScrollMode = 'never',
+  keyboardShouldPersistTaps = 'always',
+  ...rest
+}: ScrollViewAdapterProps) {
+  const { index, routes } = navigationState;
+
+  const listeners = React.useRef<Set<Listener>>(new Set()).current;
+
+  const scrollViewRef = React.useRef<ScrollView>(null);
+  const containerRef = React.useRef<View>(null);
+
+  const isInitialRef = React.useRef(true);
+
+  const [layout, onLayout] = useMeasureLayout(containerRef, ({ width }) => {
+    if (isInitialRef.current) {
+      const x = index * width;
+
+      setContentOffset({ x, y: 0 });
+
+      offsetX.setValue(x);
+    } else if (indexRef.current !== index) {
+      scrollToIndex(index);
+    }
+
+    isInitialRef.current = false;
+  });
+
+  const [contentOffset, setContentOffset] = React.useState(() => ({
+    x: index * layout.width,
+    y: 0,
+  }));
+
+  React.useEffect(() => {
+    // FIXME: contentOffset is not supported on Android
+    // So we manually scroll after state update
+    if (Platform.OS === 'android') {
+      requestAnimationFrame(() => {
+        scrollViewRef.current?.scrollTo({
+          x: contentOffset.x,
+          animated: false,
+        });
+      });
+    }
+  }, [animationEnabled, contentOffset.x]);
+
+  const [offsetX] = React.useState(() => new Animated.Value(contentOffset.x));
+
+  const scrollToIndex = useLatestCallback((index: number) => {
+    scrollViewRef.current?.scrollTo({
+      x: index * layout.width,
+      animated: animationEnabled,
+    });
+  });
+
+  const jumpTo = useLatestCallback((key: string) => {
+    const i = routes.findIndex((route) => route.key === key);
+
+    scrollToIndex(i);
+
+    if (keyboardDismissMode === 'auto') {
+      Keyboard.dismiss();
+    }
+  });
+
+  const handleSwipeStart = React.useCallback(() => {
+    onSwipeStart?.();
+  }, [onSwipeStart]);
+
+  const handleSwipeEnd = React.useCallback(() => {
+    onSwipeEnd?.();
+  }, [onSwipeEnd]);
+
+  const subscribe = useLatestCallback((listener: Listener) => {
+    listeners.add(listener);
+
+    return () => {
+      listeners.delete(listener);
+    };
+  });
+
+  const position = React.useMemo(
+    () => (layout.width ? Animated.divide(offsetX, layout.width) : null),
+    [layout.width, offsetX]
+  );
+
+  const indexRef = React.useRef(index);
+  const timerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
+
+  const onScrollEnd = (x: number) => {
+    const value = clamp(x / layout.width, 0, routes.length - 1);
+
+    if (value % 1 === 0) {
+      indexRef.current = value;
+
+      if (value !== index) {
+        onIndexChange(value);
+      }
+
+      onTabSelect?.({ index: value });
+    }
+  };
+
+  const onScroll = Animated.event(
+    [
+      {
+        nativeEvent: {
+          contentOffset: { x: offsetX },
+        },
+      },
+    ],
+    {
+      useNativeDriver: true,
+      listener: (event: ScrollEvent) => {
+        const { x } = event.nativeEvent.contentOffset;
+
+        const value = clamp(x / layout.width, 0, routes.length - 1);
+
+        // The offset will overlap the current and the adjacent page
+        // So we need to get the index of the adjacent page
+        const next = [Math.ceil(value), Math.floor(value)].find(
+          (i) => i !== index
+        );
+
+        if (next != null) {
+          listeners.forEach((listener) =>
+            listener({
+              type: 'enter',
+              index: next,
+            })
+          );
+        }
+
+        // FIXME: onMomentumScrollEnd is not supported on Web
+        // So we workaround by using a timer
+        if (Platform.OS === 'web') {
+          clearTimeout(timerRef.current);
+
+          timerRef.current = setTimeout(() => {
+            onScrollEnd(x);
+          }, 100);
+        }
+      },
+    }
+  );
+
+  const onMomentumScrollEnd = (event: ScrollEvent) => {
+    onScrollEnd(event.nativeEvent.contentOffset.x);
+  };
+
+  return children({
+    position: position ?? new Animated.Value(index),
+    subscribe,
+    jumpTo,
+    render: (children) => (
+      <View ref={containerRef} onLayout={onLayout} style={styles.container}>
+        <Animated.ScrollView
+          {...rest}
+          ref={scrollViewRef}
+          horizontal
+          pagingEnabled
+          directionalLockEnabled
+          decelerationRate={decelerationRate}
+          bounces={bounces}
+          overScrollMode={overScrollMode}
+          keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+          keyboardDismissMode={
+            keyboardDismissMode === 'auto' ? 'on-drag' : keyboardDismissMode
+          }
+          scrollEnabled={swipeEnabled && Boolean(layout.width)}
+          scrollToOverflowEnabled={false}
+          scrollsToTop={false}
+          automaticallyAdjustContentInsets={false}
+          showsHorizontalScrollIndicator={false}
+          scrollEventThrottle={1}
+          onScroll={onScroll}
+          onScrollBeginDrag={handleSwipeStart}
+          onScrollEndDrag={handleSwipeEnd}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+          contentOffset={contentOffset}
+          contentContainerStyle={{
+            width: layout.width ? `${routes.length * 100}%` : '100%',
+          }}
+          style={[styles.scroll, style]}
+        >
+          {children
+            .map((child, i) => {
+              const route = routes[i];
+              const focused = i === index;
+
+              if (!layout.width && !focused) {
+                return null;
+              }
+
+              return (
+                <View
+                  key={route.key}
+                  style={
+                    layout.width
+                      ? // FIXME: percentage width doesn't work on web
+                        // So we use a fixed width instead
+                        { width: layout.width }
+                      : { width: '100%' }
+                  }
+                >
+                  {child}
+                </View>
+              );
+            })
+            .filter((child) => child !== null)}
+        </Animated.ScrollView>
+      </View>
+    ),
+  });
+}
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.max(min, Math.min(max, value));
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  scroll: {
+    flex: 1,
+  },
+});