react-native-tab-view 5.0.0-alpha.7 → 5.0.0-alpha.9

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

@@ -1 +1 @@
-{"version":3,"file":"TabBarItemLabel.d.ts","sourceRoot":"","sources":["../../../src/TabBarItemLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGrE,UAAU,oBAAoB;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,4DACM,oBAAoB,oDAkBrD,CAAC"}
+{"version":3,"file":"TabBarItemLabel.d.ts","sourceRoot":"","sources":["../../../src/TabBarItemLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGrE,UAAU,oBAAoB;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACxC;AAED,eAAO,MAAM,eAAe,8EACwB,oBAAoB,oDAmBvE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../src/TabView.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../src/TabView.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+export declare const TAB_BAR_PRIMARY_ACTIVE_COLOR = "#6750a4";
+export declare const TAB_BAR_SECONDARY_ACTIVE_COLOR = "#1d1b20";
+export declare const TAB_BAR_INACTIVE_COLOR = "#49454f";
+export declare const TAB_BAR_BACKGROUND_COLOR = "#fef7ff";
+export declare const TAB_BAR_BORDER_COLOR = "#cac4d0";
+export declare const PRIMARY_INDICATOR_MIN_WIDTH = 24;
+export declare const TAB_MIN_WIDTH = 90;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/constants.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,4BAA4B,YAAY,CAAC;AACtD,eAAO,MAAM,8BAA8B,YAAY,CAAC;AACxD,eAAO,MAAM,sBAAsB,YAAY,CAAC;AAChD,eAAO,MAAM,wBAAwB,YAAY,CAAC;AAClD,eAAO,MAAM,oBAAoB,YAAY,CAAC;AAE9C,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAC9C,eAAO,MAAM,aAAa,KAAK,CAAC"}

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

@@ -1,5 +1,6 @@
+export { DefaultAdapter, type DefaultAdapterProps } from './DefaultAdapter';
 export { PagerViewAdapter, type PagerViewAdapterProps, } from './PagerViewAdapter';
-export { PanResponderAdapter } from './PanResponderAdapter';
+export { PanResponderAdapter, type PanResponderAdapterProps, } from './PanResponderAdapter';
 export { SceneMap } from './SceneMap';
 export { ScrollViewAdapter, type ScrollViewAdapterProps, } from './ScrollViewAdapter';
 export type { Props as TabBarProps } from './TabBar';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,KAAK,IAAI,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,YAAY,EACZ,eAAe,EACf,KAAK,EACL,kBAAkB,EAClB,aAAa,GACd,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,KAAK,IAAI,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,YAAY,EACZ,eAAe,EACf,KAAK,EACL,kBAAkB,EAClB,aAAa,GACd,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,2 @@
+export declare function useLayoutWidths(priorityKeys: string[]): readonly [Record<string, number>, (key: string, width: number) => () => void];
+//# sourceMappingURL=useLayoutWidths.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutWidths.d.ts","sourceRoot":"","sources":["../../../src/useLayoutWidths.tsx"],"names":[],"mappings":"AAIA,wBAAgB,eAAe,CAAC,YAAY,EAAE,MAAM,EAAE,2CAkBL,MAAM,SAAS,MAAM,iBA4BrE"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-tab-view",
   "description": "Tab view component for React Native",
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.9",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -80,5 +80,5 @@
       ]
     ]
   },
-  "gitHead": "1b05e3c8a213b37fbc79515e23bed3ce9cd65044"
+  "gitHead": "f7b2582ce8d3c3fbe4188b271dd194f46f773654"
 }

package/src/DefaultAdapter.android.tsx

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

package/src/DefaultAdapter.ios.tsx

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

package/src/DefaultAdapter.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import type { PagerViewAdapterProps } from './PagerViewAdapter';
+import {
+  PanResponderAdapter,
+  type PanResponderAdapterProps,
+} from './PanResponderAdapter';
+
+export type DefaultAdapterProps = PagerViewAdapterProps &
+  PanResponderAdapterProps;
+
+export const DefaultAdapter: React.ComponentType<DefaultAdapterProps> =
+  PanResponderAdapter;

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/PlatformPressable.tsx

@@ -31,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/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,10 +164,26 @@ 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<ReturnType<typeof setTimeout> | undefined>(
@@ -130,16 +191,16 @@ export function ScrollViewAdapter({
   );
 
   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 });
     }
   };
 
@@ -152,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