@amazon-devices/react-navigation__react-native-tab-view 2.0.1758683737

package/lib/typescript/src/TabView.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import type { Layout, NavigationState, PagerProps, Route, SceneRendererProps } from './types';
+export type Props<T extends Route> = PagerProps & {
+    onIndexChange: (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>;
+    }) => React.ReactNode;
+    tabBarPosition?: 'top' | 'bottom';
+    initialLayout?: Partial<Layout>;
+    lazy?: ((props: {
+        route: T;
+    }) => boolean) | boolean;
+    lazyPreloadDistance?: number;
+    sceneContainerStyle?: StyleProp<ViewStyle>;
+    pagerStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+};
+export default function TabView<T extends Route>({ onIndexChange, navigationState, renderScene, initialLayout, keyboardDismissMode, lazy, lazyPreloadDistance, onSwipeStart, onSwipeEnd, renderLazyPlaceholder, renderTabBar, sceneContainerStyle, pagerStyle, style, swipeEnabled, tabBarPosition, animationEnabled, overScrollMode, }: Props<T>): JSX.Element;
+//# sourceMappingURL=TabView.d.ts.map

package/lib/typescript/src/TabView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../src/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EACV,MAAM,EACN,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,UAAU,GAAG;IAChD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACjE,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,kBAAkB,GAAG;QAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAA;KAAE,KAChE,KAAK,CAAC,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,CAAC,SAAS,KAAK,EAAE,EAC/C,aAAa,EACb,eAAe,EACf,WAAW,EACX,aAAa,EACb,mBAA4B,EAC5B,IAAY,EACZ,mBAAuB,EACvB,YAAY,EACZ,UAAU,EACV,qBAAkC,EAClC,YAA+C,EAC/C,mBAAmB,EACnB,UAAU,EACV,KAAK,EACL,YAAmB,EACnB,cAAsB,EACtB,gBAAuB,EACvB,cAAc,GACf,EAAE,KAAK,CAAC,CAAC,CAAC,eA2FV"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,11 @@
+export { default as SceneMap } from './SceneMap';
+export type { Props as TabBarProps } from './TabBar';
+export { default as TabBar } from './TabBar';
+export type { Props as TabBarIndicatorProps } from './TabBarIndicator';
+export { default as TabBarIndicator } from './TabBarIndicator';
+export type { Props as TabBarItemProps } from './TabBarItem';
+export { default as TabBarItem } from './TabBarItem';
+export type { Props as TabViewProps } from './TabView';
+export { default as TabView } from './TabView';
+export type { NavigationState, Route, SceneRendererProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAE,KAAK,IAAI,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,42 @@
+import type { Animated } from 'react-native';
+import type { PagerViewProps } from 'react-native-pager-view';
+export type Route = {
+    key: string;
+    icon?: string;
+    title?: string;
+    accessible?: boolean;
+    accessibilityLabel?: string;
+    testID?: string;
+};
+export type Event = {
+    defaultPrevented: boolean;
+    preventDefault(): void;
+};
+export type Scene<T extends Route> = {
+    route: T;
+};
+export type NavigationState<T extends Route> = {
+    index: number;
+    routes: T[];
+};
+export type Layout = {
+    width: number;
+    height: number;
+};
+export type Listener = (value: number) => void;
+export type SceneRendererProps = {
+    layout: Layout;
+    position: Animated.AnimatedInterpolation<number>;
+    jumpTo: (key: string) => void;
+};
+export type EventEmitterProps = {
+    addEnterListener: (listener: Listener) => () => void;
+};
+export type PagerProps = Omit<PagerViewProps, 'initialPage' | 'scrollEnabled' | 'onPageScroll' | 'onPageSelected' | 'onPageScrollStateChanged' | 'keyboardDismissMode' | 'children'> & {
+    keyboardDismissMode?: 'none' | 'on-drag' | 'auto';
+    swipeEnabled?: boolean;
+    animationEnabled?: boolean;
+    onSwipeStart?: () => void;
+    onSwipeEnd?: () => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,IAAI,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI;IACnC,KAAK,EAAE,CAAC,CAAC;CACV,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,IAAI;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,EAAE,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,MAAM,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,cAAc,EACZ,aAAa,GACb,eAAe,GACf,cAAc,GACd,gBAAgB,GAChB,0BAA0B,GAC1B,qBAAqB,GACrB,UAAU,CACb,GAAG;IACF,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC"}

package/lib/typescript/src/useAnimatedValue.d.ts

@@ -0,0 +1,3 @@
+import { Animated } from 'react-native';
+export default function useAnimatedValue(initialValue: number): Animated.Value;
+//# sourceMappingURL=useAnimatedValue.d.ts.map

package/lib/typescript/src/useAnimatedValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimatedValue.d.ts","sourceRoot":"","sources":["../../../src/useAnimatedValue.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,YAAY,EAAE,MAAM,kBAQ5D"}

package/package.json

@@ -0,0 +1 @@
+{"name": "@amazon-devices/react-navigation__react-native-tab-view", "description": "Tab view component for React Native", "version": "2.0.1758683737+3.4.4", "keywords": ["react-native-component", "react-component", "react-native", "ios", "android", "tab", "swipe", "scrollable", "coverflow"], "license": "See license in LICENSE", "repository": {"type": "git", "url": "https://github.com/react-navigation/react-navigation.git", "directory": "packages/react-native-tab-view"}, "bugs": {"url": "https://github.com/react-navigation/react-navigation/issues"}, "homepage": "https://github.com/react-navigation/react-navigation/tree/main/packages/react-native-tab-view#readme", "main": "lib/commonjs/index.js", "react-native": "src/index.tsx", "source": "src/index.tsx", "module": "lib/module/index.js", "types": "lib/typescript/src/index.d.ts", "files": ["src", "lib", "kepler-compatibility.json", "!**/__tests__", "SystemModules", "SystemBundles", "THIRD_PARTY_NOTICES.txt", "kepler-transformed-package-info.json"], "sideEffects": false, "kepler": {"temporary-alias-for-package": {"name": "@react-navigation/react-native-tab-view", "version": "3.4.4"}}, "scripts": {"clean": "del lib"}, "dependencies": {"use-latest-callback": "0.1.6"}, "devDependencies": {"del-cli": "5.0.0", "react": "17.0.2", "react-native": "0.72.0", "@types/react": "17.0.2", "react-native-builder-bob": "0.20.4", "react-native-pager-view": "6.1.2", "typescript": "4.9.4"}, "peerDependencies": {"react": "*", "react-native": "*", "react-native-pager-view": "*"}, "react-native-builder-bob": {"source": "src", "output": "lib", "targets": ["commonjs", "module", ["typescript", {"project": "tsconfig.build.json"}]]}}

package/src/Pager.android.tsx

@@ -0,0 +1 @@
+export { default } from './PagerViewAdapter';

package/src/Pager.ios.tsx

@@ -0,0 +1 @@
+export { default } from './PagerViewAdapter';

package/src/Pager.tsx

@@ -0,0 +1 @@
+export { default } from './PanResponderAdapter';

package/src/PagerViewAdapter.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { Animated, Keyboard, StyleSheet } from 'react-native';
+import ViewPager, {
+  PageScrollStateChangedNativeEvent,
+} from 'react-native-pager-view';
+
+import type {
+  EventEmitterProps,
+  Listener,
+  NavigationState,
+  PagerProps,
+  Route,
+} from './types';
+import useAnimatedValue from './useAnimatedValue';
+
+const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);
+
+type Props<T extends Route> = PagerProps & {
+  onIndexChange: (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 default function PagerViewAdapter<T extends Route>({
+  keyboardDismissMode = 'auto',
+  swipeEnabled = true,
+  navigationState,
+  onIndexChange,
+  onSwipeStart,
+  onSwipeEnd,
+  children,
+  style,
+  animationEnabled,
+  ...rest
+}: Props<T>) {
+  const { index } = navigationState;
+
+  const listenersRef = React.useRef<Listener[]>([]);
+
+  const pagerRef = React.useRef<ViewPager>(null);
+  const indexRef = React.useRef<number>(index);
+  const navigationStateRef = React.useRef(navigationState);
+
+  const position = useAnimatedValue(index);
+  const offset = useAnimatedValue(0);
+
+  React.useEffect(() => {
+    navigationStateRef.current = navigationState;
+  });
+
+  const jumpTo = React.useCallback(
+    (key: string) => {
+      const index = navigationStateRef.current.routes.findIndex(
+        (route: { key: string }) => route.key === key
+      );
+
+      if (animationEnabled) {
+        pagerRef.current?.setPage(index);
+      } else {
+        pagerRef.current?.setPageWithoutAnimation(index);
+        position.setValue(index);
+      }
+    },
+    [animationEnabled, position]
+  );
+
+  React.useEffect(() => {
+    if (keyboardDismissMode === 'auto') {
+      Keyboard.dismiss();
+    }
+
+    if (indexRef.current !== index) {
+      if (animationEnabled) {
+        pagerRef.current?.setPage(index);
+      } else {
+        pagerRef.current?.setPageWithoutAnimation(index);
+        position.setValue(index);
+      }
+    }
+  }, [keyboardDismissMode, index, animationEnabled, position]);
+
+  const onPageScrollStateChanged = (
+    state: PageScrollStateChangedNativeEvent
+  ) => {
+    const { pageScrollState } = state.nativeEvent;
+
+    switch (pageScrollState) {
+      case 'idle':
+        onSwipeEnd?.();
+        return;
+      case 'dragging': {
+        const subscription = offset.addListener(({ value }) => {
+          const next =
+            index + (value > 0 ? Math.ceil(value) : Math.floor(value));
+
+          if (next !== index) {
+            listenersRef.current.forEach((listener) => listener(next));
+          }
+
+          offset.removeListener(subscription);
+        });
+
+        onSwipeStart?.();
+        return;
+      }
+    }
+  };
+
+  const addEnterListener = React.useCallback((listener: Listener) => {
+    listenersRef.current.push(listener);
+
+    return () => {
+      const index = listenersRef.current.indexOf(listener);
+
+      if (index > -1) {
+        listenersRef.current.splice(index, 1);
+      }
+    };
+  }, []);
+
+  const memoizedPosition = React.useMemo(
+    () => Animated.add(position, offset),
+    [offset, position]
+  );
+
+  return children({
+    position: memoizedPosition,
+    addEnterListener,
+    jumpTo,
+    render: (children) => (
+      <AnimatedViewPager
+        {...rest}
+        ref={pagerRef}
+        style={[styles.container, style]}
+        initialPage={index}
+        keyboardDismissMode={
+          keyboardDismissMode === 'auto' ? 'on-drag' : keyboardDismissMode
+        }
+        onPageScroll={Animated.event(
+          [
+            {
+              nativeEvent: {
+                position: position,
+                offset: offset,
+              },
+            },
+          ],
+          { useNativeDriver: true }
+        )}
+        onPageSelected={(e) => {
+          const index = e.nativeEvent.position;
+          indexRef.current = index;
+          onIndexChange(index);
+        }}
+        onPageScrollStateChanged={onPageScrollStateChanged}
+        scrollEnabled={swipeEnabled}
+      >
+        {children}
+      </AnimatedViewPager>
+    ),
+  });
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/PanResponderAdapter.tsx

@@ -0,0 +1,340 @@
+import * as React from 'react';
+import {
+  Animated,
+  GestureResponderEvent,
+  I18nManager,
+  Keyboard,
+  PanResponder,
+  PanResponderGestureState,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import type {
+  EventEmitterProps,
+  Layout,
+  Listener,
+  NavigationState,
+  PagerProps,
+  Route,
+} from './types';
+import useAnimatedValue from './useAnimatedValue';
+
+type Props<T extends Route> = PagerProps & {
+  layout: Layout;
+  onIndexChange: (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;
+};
+
+const DEAD_ZONE = 12;
+
+const DefaultTransitionSpec = {
+  timing: Animated.spring,
+  stiffness: 1000,
+  damping: 500,
+  mass: 3,
+  overshootClamping: true,
+};
+
+export default function PanResponderAdapter<T extends Route>({
+  layout,
+  keyboardDismissMode = 'auto',
+  swipeEnabled = true,
+  navigationState,
+  onIndexChange,
+  onSwipeStart,
+  onSwipeEnd,
+  children,
+  style,
+  animationEnabled = false,
+}: Props<T>) {
+  const { routes, index } = navigationState;
+
+  const panX = useAnimatedValue(0);
+
+  const listenersRef = React.useRef<Listener[]>([]);
+
+  const navigationStateRef = React.useRef(navigationState);
+  const layoutRef = React.useRef(layout);
+  const onIndexChangeRef = React.useRef(onIndexChange);
+
+  const currentIndexRef = React.useRef(index);
+  const pendingIndexRef = React.useRef<number>();
+
+  const swipeVelocityThreshold = 0.15;
+  const swipeDistanceThreshold = layout.width / 1.75;
+
+  const jumpToIndex = React.useCallback(
+    (index: number, animate = animationEnabled) => {
+      const offset = -index * layoutRef.current.width;
+
+      const { timing, ...transitionConfig } = DefaultTransitionSpec;
+
+      if (animate) {
+        Animated.parallel([
+          timing(panX, {
+            ...transitionConfig,
+            toValue: offset,
+            useNativeDriver: false,
+          }),
+        ]).start(({ finished }) => {
+          if (finished) {
+            onIndexChangeRef.current(index);
+            pendingIndexRef.current = undefined;
+          }
+        });
+        pendingIndexRef.current = index;
+      } else {
+        panX.setValue(offset);
+        onIndexChangeRef.current(index);
+        pendingIndexRef.current = undefined;
+      }
+    },
+    [animationEnabled, panX]
+  );
+
+  React.useEffect(() => {
+    navigationStateRef.current = navigationState;
+    layoutRef.current = layout;
+    onIndexChangeRef.current = onIndexChange;
+  });
+
+  React.useEffect(() => {
+    const offset = -navigationStateRef.current.index * layout.width;
+
+    panX.setValue(offset);
+  }, [layout.width, panX]);
+
+  React.useEffect(() => {
+    if (keyboardDismissMode === 'auto') {
+      Keyboard.dismiss();
+    }
+
+    if (layout.width && currentIndexRef.current !== index) {
+      currentIndexRef.current = index;
+      jumpToIndex(index);
+    }
+  }, [jumpToIndex, keyboardDismissMode, layout.width, index]);
+
+  const isMovingHorizontally = (
+    _: GestureResponderEvent,
+    gestureState: PanResponderGestureState
+  ) => {
+    return (
+      Math.abs(gestureState.dx) > Math.abs(gestureState.dy * 2) &&
+      Math.abs(gestureState.vx) > Math.abs(gestureState.vy * 2)
+    );
+  };
+
+  const canMoveScreen = (
+    event: GestureResponderEvent,
+    gestureState: PanResponderGestureState
+  ) => {
+    if (swipeEnabled === false) {
+      return false;
+    }
+
+    const diffX = I18nManager.isRTL ? -gestureState.dx : gestureState.dx;
+
+    return (
+      isMovingHorizontally(event, gestureState) &&
+      ((diffX >= DEAD_ZONE && currentIndexRef.current > 0) ||
+        (diffX <= -DEAD_ZONE && currentIndexRef.current < routes.length - 1))
+    );
+  };
+
+  const startGesture = () => {
+    onSwipeStart?.();
+
+    if (keyboardDismissMode === 'on-drag') {
+      Keyboard.dismiss();
+    }
+
+    panX.stopAnimation();
+    // @ts-expect-error: _value is private, but docs use it as well
+    panX.setOffset(panX._value);
+  };
+
+  const respondToGesture = (
+    _: GestureResponderEvent,
+    gestureState: PanResponderGestureState
+  ) => {
+    const diffX = I18nManager.isRTL ? -gestureState.dx : gestureState.dx;
+
+    if (
+      // swiping left
+      (diffX > 0 && index <= 0) ||
+      // swiping right
+      (diffX < 0 && index >= routes.length - 1)
+    ) {
+      return;
+    }
+
+    if (layout.width) {
+      // @ts-expect-error: _offset is private, but docs use it as well
+      const position = (panX._offset + diffX) / -layout.width;
+      const next =
+        position > index ? Math.ceil(position) : Math.floor(position);
+
+      if (next !== index) {
+        listenersRef.current.forEach((listener) => listener(next));
+      }
+    }
+
+    panX.setValue(diffX);
+  };
+
+  const finishGesture = (
+    _: GestureResponderEvent,
+    gestureState: PanResponderGestureState
+  ) => {
+    panX.flattenOffset();
+
+    onSwipeEnd?.();
+
+    const currentIndex =
+      typeof pendingIndexRef.current === 'number'
+        ? pendingIndexRef.current
+        : currentIndexRef.current;
+
+    let nextIndex = currentIndex;
+
+    if (
+      Math.abs(gestureState.dx) > Math.abs(gestureState.dy) &&
+      Math.abs(gestureState.vx) > Math.abs(gestureState.vy) &&
+      (Math.abs(gestureState.dx) > swipeDistanceThreshold ||
+        Math.abs(gestureState.vx) > swipeVelocityThreshold)
+    ) {
+      nextIndex = Math.round(
+        Math.min(
+          Math.max(
+            0,
+            I18nManager.isRTL
+              ? currentIndex + gestureState.dx / Math.abs(gestureState.dx)
+              : currentIndex - gestureState.dx / Math.abs(gestureState.dx)
+          ),
+          routes.length - 1
+        )
+      );
+
+      currentIndexRef.current = nextIndex;
+    }
+
+    if (!isFinite(nextIndex)) {
+      nextIndex = currentIndex;
+    }
+
+    jumpToIndex(nextIndex, true);
+  };
+
+  // TODO: use the listeners
+  const addEnterListener = React.useCallback((listener: Listener) => {
+    listenersRef.current.push(listener);
+
+    return () => {
+      const index = listenersRef.current.indexOf(listener);
+
+      if (index > -1) {
+        listenersRef.current.splice(index, 1);
+      }
+    };
+  }, []);
+
+  const jumpTo = React.useCallback(
+    (key: string) => {
+      const index = navigationStateRef.current.routes.findIndex(
+        (route: { key: string }) => route.key === key
+      );
+
+      jumpToIndex(index);
+    },
+    [jumpToIndex]
+  );
+
+  const panResponder = PanResponder.create({
+    onMoveShouldSetPanResponder: canMoveScreen,
+    onMoveShouldSetPanResponderCapture: canMoveScreen,
+    onPanResponderGrant: startGesture,
+    onPanResponderMove: respondToGesture,
+    onPanResponderTerminate: finishGesture,
+    onPanResponderRelease: finishGesture,
+    onPanResponderTerminationRequest: () => true,
+  });
+
+  const maxTranslate = layout.width * (routes.length - 1);
+  const translateX = Animated.multiply(
+    panX.interpolate({
+      inputRange: [-maxTranslate, 0],
+      outputRange: [-maxTranslate, 0],
+      extrapolate: 'clamp',
+    }),
+    I18nManager.isRTL ? -1 : 1
+  );
+
+  const position = React.useMemo(
+    () => (layout.width ? Animated.divide(panX, -layout.width) : null),
+    [layout.width, panX]
+  );
+
+  return children({
+    position: position ?? new Animated.Value(index),
+    addEnterListener,
+    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>
+    ),
+  });
+}
+
+const styles = StyleSheet.create({
+  sheet: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'stretch',
+  },
+});

package/src/PlatformPressable.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Platform, Pressable, PressableProps } from 'react-native';
+
+export type Props = PressableProps & {
+  pressColor?: string;
+  pressOpacity?: number;
+  children: React.ReactNode;
+};
+
+const ANDROID_VERSION_LOLLIPOP = 21;
+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.
+ */
+export default function PlatformPressable({
+  android_ripple,
+  pressColor = 'rgba(0, 0, 0, .32)',
+  pressOpacity,
+  style,
+  ...rest
+}: Props) {
+  return (
+    <Pressable
+      android_ripple={
+        ANDROID_SUPPORTS_RIPPLE
+          ? { color: pressColor, ...android_ripple }
+          : undefined
+      }
+      style={({ pressed }) => [
+        { opacity: pressed && !ANDROID_SUPPORTS_RIPPLE ? pressOpacity : 1 },
+        typeof style === 'function' ? style({ pressed }) : style,
+      ]}
+      {...rest}
+    />
+  );
+}