react-native-screen-transitions 1.1.0 → 1.2.0

package/dist/index.d.mts

@@ -1,6 +1,5 @@
-import * as _react_navigation_routers from '@react-navigation/routers';
-import * as _react_navigation_core from '@react-navigation/core';
-import { ScreenListeners, NavigationState, EventMapBase, RouteProp, ParamListBase } from '@react-navigation/native';
+import * as _react_navigation_native from '@react-navigation/native';
+import { ScreenListeners, NavigationState, EventMapBase, RouteProp, ParamListBase, NavigatorTypeBagBase, StackNavigationState, TypedNavigator } from '@react-navigation/native';
 import * as react_native from 'react-native';
 import { ScaledSize, View } from 'react-native';
 import * as react_native_reanimated from 'react-native-reanimated';
@@ -9,6 +8,8 @@ import { EdgeInsets } from 'react-native-safe-area-context';
 import * as react_native_reanimated_lib_typescript_layoutReanimation_animationBuilder_Keyframe from 'react-native-reanimated/lib/typescript/layoutReanimation/animationBuilder/Keyframe';
 import * as react from 'react';
 import react__default, { ComponentType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NativeStackNavigationOptions, NativeStackNavigationEventMap, NativeStackNavigationProp, NativeStackNavigatorProps } from '@react-navigation/native-stack';
 
 type Any = any;
 interface TransitionConfig {
@@ -36,6 +37,10 @@ interface TransitionConfig {
      * Distance threshold for gesture recognition throughout the screen.
      */
     gestureResponseDistance?: number;
+    /**
+     * Skip the default screen options.
+     */
+    skipDefaultScreenOptions?: boolean;
 }
 /**
  * The comprehensive props object passed to a `ScreenStyleInterpolator` function.
@@ -152,6 +157,30 @@ declare namespace specs {
 
 declare const useScreenAnimation: () => ScreenInterpolationProps;
 
+type TransitionStackNavigationEventMap = NativeStackNavigationEventMap;
+interface TransitionStackNavigationOptions extends Omit<NativeStackNavigationOptions, keyof TransitionConfig>, TransitionConfig {
+    skipDefaultScreenOptions?: boolean;
+}
+type TransitionStackNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = string, NavigatorID extends string | undefined = undefined> = NativeStackNavigationProp<ParamList, RouteName, NavigatorID>;
+type TransitionStackNavigatorProps = NativeStackNavigatorProps;
+declare function TransitionableStackNavigator({ id, initialRouteName, children, layout, screenListeners, screenOptions, screenLayout, UNSTABLE_router, ...rest }: TransitionStackNavigatorProps): react_jsx_runtime.JSX.Element;
+declare function createTransitionableStackNavigator<const ParamList extends ParamListBase, const NavigatorID extends string | undefined = undefined, const TypeBag extends NavigatorTypeBagBase = {
+    ParamList: ParamList;
+    NavigatorID: NavigatorID;
+    State: StackNavigationState<ParamList>;
+    ScreenOptions: TransitionStackNavigationOptions;
+    EventMap: TransitionStackNavigationEventMap;
+    NavigationList: {
+        [RouteName in keyof ParamList]: TransitionStackNavigationProp<ParamList, RouteName, NavigatorID>;
+    };
+    Navigator: typeof TransitionableStackNavigator;
+}>(): TypedNavigator<TypeBag>;
+type TransitionStackNavigatorTypeBag<ScreenOptions = TransitionStackNavigationOptions, State = StackNavigationState<ParamListBase>, EventMap = TransitionStackNavigationEventMap> = {
+    ScreenOptions: ScreenOptions;
+    State: State;
+    EventMap: EventMap;
+};
+
 declare const _default: {
     View: react.MemoExoticComponent<react.ForwardRefExoticComponent<{
         children?: react.ReactNode | react_native_reanimated.SharedValue<react.ReactNode>;
@@ -1403,71 +1432,82 @@ declare const _default: {
             sharedTransitionStyle?: react_native_reanimated.SharedTransition;
         }> | undefined;
     } & react.RefAttributes<never>>>;
+    defaultScreenOptions: () => {
+        readonly presentation: "containedTransparentModal";
+        readonly headerShown: false;
+        readonly animation: "none";
+    };
+    presets: typeof presets;
+    specs: typeof specs;
+    /**
+     * Create a transition aware component
+     */
+    createTransitionAwareComponent: typeof createTransitionAwareComponent;
+    /**
+     * Create a transition aware scrollable component
+     */
+    createTransitionAwareScrollable: typeof createTransitionAwareScrollable;
+    /**
+     * Create a transitionable native stack navigator.
+     *
+     */
+    createTransitionableStackNavigator: typeof createTransitionableStackNavigator;
+    /**
+     * @deprecated Use {@link createTransitionableStackNavigator} instead.
+     */
     createConfig: ({ navigation: reactNavigation, route, ...config }: TransitionEventHandlersProps) => TransitionListeners;
+    /**
+     * @deprecated Use {@link createTransitionableStackNavigator} instead.
+     */
     createScreenConfig: (config?: Omit<TransitionEventHandlersProps, "navigation" | "route">) => {
         listeners: (l: Any) => Partial<{
-            [x: string]: _react_navigation_core.EventListenerCallback<_react_navigation_core.EventMapBase & _react_navigation_core.EventMapCore<Readonly<{
+            [x: string]: _react_navigation_native.EventListenerCallback<_react_navigation_native.EventMapBase & _react_navigation_native.EventMapCore<Readonly<{
                 key: string;
                 index: number;
                 routeNames: string[];
                 history?: unknown[];
-                routes: _react_navigation_routers.NavigationRoute<_react_navigation_routers.ParamListBase, string>[];
+                routes: _react_navigation_native.NavigationRoute<_react_navigation_native.ParamListBase, string>[];
                 type: string;
                 stale: false;
             }>>, string, boolean | undefined>;
-            focus: _react_navigation_core.EventListenerCallback<_react_navigation_core.EventMapBase & _react_navigation_core.EventMapCore<Readonly<{
+            focus: _react_navigation_native.EventListenerCallback<_react_navigation_native.EventMapBase & _react_navigation_native.EventMapCore<Readonly<{
                 key: string;
                 index: number;
                 routeNames: string[];
                 history?: unknown[];
-                routes: _react_navigation_routers.NavigationRoute<_react_navigation_routers.ParamListBase, string>[];
+                routes: _react_navigation_native.NavigationRoute<_react_navigation_native.ParamListBase, string>[];
                 type: string;
                 stale: false;
             }>>, "focus", unknown>;
-            blur: _react_navigation_core.EventListenerCallback<_react_navigation_core.EventMapBase & _react_navigation_core.EventMapCore<Readonly<{
+            blur: _react_navigation_native.EventListenerCallback<_react_navigation_native.EventMapBase & _react_navigation_native.EventMapCore<Readonly<{
                 key: string;
                 index: number;
                 routeNames: string[];
                 history?: unknown[];
-                routes: _react_navigation_routers.NavigationRoute<_react_navigation_routers.ParamListBase, string>[];
+                routes: _react_navigation_native.NavigationRoute<_react_navigation_native.ParamListBase, string>[];
                 type: string;
                 stale: false;
             }>>, "blur", unknown>;
-            state: _react_navigation_core.EventListenerCallback<_react_navigation_core.EventMapBase & _react_navigation_core.EventMapCore<Readonly<{
+            state: _react_navigation_native.EventListenerCallback<_react_navigation_native.EventMapBase & _react_navigation_native.EventMapCore<Readonly<{
                 key: string;
                 index: number;
                 routeNames: string[];
                 history?: unknown[];
-                routes: _react_navigation_routers.NavigationRoute<_react_navigation_routers.ParamListBase, string>[];
+                routes: _react_navigation_native.NavigationRoute<_react_navigation_native.ParamListBase, string>[];
                 type: string;
                 stale: false;
             }>>, "state", unknown>;
-            beforeRemove: _react_navigation_core.EventListenerCallback<_react_navigation_core.EventMapBase & _react_navigation_core.EventMapCore<Readonly<{
+            beforeRemove: _react_navigation_native.EventListenerCallback<_react_navigation_native.EventMapBase & _react_navigation_native.EventMapCore<Readonly<{
                 key: string;
                 index: number;
                 routeNames: string[];
                 history?: unknown[];
-                routes: _react_navigation_routers.NavigationRoute<_react_navigation_routers.ParamListBase, string>[];
+                routes: _react_navigation_native.NavigationRoute<_react_navigation_native.ParamListBase, string>[];
                 type: string;
                 stale: false;
             }>>, "beforeRemove", true>;
         }>;
     };
-    defaultScreenOptions: () => {
-        readonly presentation: "containedTransparentModal";
-        readonly headerShown: false;
-        readonly animation: "none";
-    };
-    presets: typeof presets;
-    specs: typeof specs;
-    /**
-     * Create a transition aware component
-     */
-    createTransitionAwareComponent: typeof createTransitionAwareComponent;
-    /**
-     * Create a transition aware scrollable component
-     */
-    createTransitionAwareScrollable: typeof createTransitionAwareScrollable;
 };
 
-export { _default as default, useScreenAnimation };
+export { type TransitionConfig, type TransitionStackNavigatorTypeBag, _default as default, useScreenAnimation };

package/dist/index.d.ts

@@ -1,6 +1,5 @@
-import * as _react_navigation_routers from '@react-navigation/routers';
-import * as _react_navigation_core from '@react-navigation/core';
-import { ScreenListeners, NavigationState, EventMapBase, RouteProp, ParamListBase } from '@react-navigation/native';
+import * as _react_navigation_native from '@react-navigation/native';
+import { ScreenListeners, NavigationState, EventMapBase, RouteProp, ParamListBase, NavigatorTypeBagBase, StackNavigationState, TypedNavigator } from '@react-navigation/native';
 import * as react_native from 'react-native';
 import { ScaledSize, View } from 'react-native';
 import * as react_native_reanimated from 'react-native-reanimated';
@@ -9,6 +8,8 @@ import { EdgeInsets } from 'react-native-safe-area-context';
 import * as react_native_reanimated_lib_typescript_layoutReanimation_animationBuilder_Keyframe from 'react-native-reanimated/lib/typescript/layoutReanimation/animationBuilder/Keyframe';
 import * as react from 'react';
 import react__default, { ComponentType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NativeStackNavigationOptions, NativeStackNavigationEventMap, NativeStackNavigationProp, NativeStackNavigatorProps } from '@react-navigation/native-stack';
 
 type Any = any;
 interface TransitionConfig {
@@ -36,6 +37,10 @@ interface TransitionConfig {
      * Distance threshold for gesture recognition throughout the screen.
      */
     gestureResponseDistance?: number;
+    /**
+     * Skip the default screen options.
+     */
+    skipDefaultScreenOptions?: boolean;
 }
 /**
  * The comprehensive props object passed to a `ScreenStyleInterpolator` function.
@@ -152,6 +157,30 @@ declare namespace specs {
 
 declare const useScreenAnimation: () => ScreenInterpolationProps;
 
+type TransitionStackNavigationEventMap = NativeStackNavigationEventMap;
+interface TransitionStackNavigationOptions extends Omit<NativeStackNavigationOptions, keyof TransitionConfig>, TransitionConfig {
+    skipDefaultScreenOptions?: boolean;
+}
+type TransitionStackNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = string, NavigatorID extends string | undefined = undefined> = NativeStackNavigationProp<ParamList, RouteName, NavigatorID>;
+type TransitionStackNavigatorProps = NativeStackNavigatorProps;
+declare function TransitionableStackNavigator({ id, initialRouteName, children, layout, screenListeners, screenOptions, screenLayout, UNSTABLE_router, ...rest }: TransitionStackNavigatorProps): react_jsx_runtime.JSX.Element;
+declare function createTransitionableStackNavigator<const ParamList extends ParamListBase, const NavigatorID extends string | undefined = undefined, const TypeBag extends NavigatorTypeBagBase = {
+    ParamList: ParamList;
+    NavigatorID: NavigatorID;
+    State: StackNavigationState<ParamList>;
+    ScreenOptions: TransitionStackNavigationOptions;
+    EventMap: TransitionStackNavigationEventMap;
+    NavigationList: {
+        [RouteName in keyof ParamList]: TransitionStackNavigationProp<ParamList, RouteName, NavigatorID>;
+    };
+    Navigator: typeof TransitionableStackNavigator;
+}>(): TypedNavigator<TypeBag>;
+type TransitionStackNavigatorTypeBag<ScreenOptions = TransitionStackNavigationOptions, State = StackNavigationState<ParamListBase>, EventMap = TransitionStackNavigationEventMap> = {
+    ScreenOptions: ScreenOptions;
+    State: State;
+    EventMap: EventMap;
+};
+
 declare const _default: {
     View: react.MemoExoticComponent<react.ForwardRefExoticComponent<{
         children?: react.ReactNode | react_native_reanimated.SharedValue<react.ReactNode>;
@@ -1403,71 +1432,82 @@ declare const _default: {
             sharedTransitionStyle?: react_native_reanimated.SharedTransition;
         }> | undefined;
     } & react.RefAttributes<never>>>;
+    defaultScreenOptions: () => {
+        readonly presentation: "containedTransparentModal";
+        readonly headerShown: false;
+        readonly animation: "none";
+    };
+    presets: typeof presets;
+    specs: typeof specs;
+    /**
+     * Create a transition aware component
+     */
+    createTransitionAwareComponent: typeof createTransitionAwareComponent;
+    /**
+     * Create a transition aware scrollable component
+     */
+    createTransitionAwareScrollable: typeof createTransitionAwareScrollable;
+    /**
+     * Create a transitionable native stack navigator.
+     *
+     */
+    createTransitionableStackNavigator: typeof createTransitionableStackNavigator;
+    /**
+     * @deprecated Use {@link createTransitionableStackNavigator} instead.
+     */
     createConfig: ({ navigation: reactNavigation, route, ...config }: TransitionEventHandlersProps) => TransitionListeners;
+    /**
+     * @deprecated Use {@link createTransitionableStackNavigator} instead.
+     */
     createScreenConfig: (config?: Omit<TransitionEventHandlersProps, "navigation" | "route">) => {
         listeners: (l: Any) => Partial<{
-            [x: string]: _react_navigation_core.EventListenerCallback<_react_navigation_core.EventMapBase & _react_navigation_core.EventMapCore<Readonly<{
+            [x: string]: _react_navigation_native.EventListenerCallback<_react_navigation_native.EventMapBase & _react_navigation_native.EventMapCore<Readonly<{
                 key: string;
                 index: number;
                 routeNames: string[];
                 history?: unknown[];
-                routes: _react_navigation_routers.NavigationRoute<_react_navigation_routers.ParamListBase, string>[];
+                routes: _react_navigation_native.NavigationRoute<_react_navigation_native.ParamListBase, string>[];
                 type: string;
                 stale: false;
             }>>, string, boolean | undefined>;
-            focus: _react_navigation_core.EventListenerCallback<_react_navigation_core.EventMapBase & _react_navigation_core.EventMapCore<Readonly<{
+            focus: _react_navigation_native.EventListenerCallback<_react_navigation_native.EventMapBase & _react_navigation_native.EventMapCore<Readonly<{
                 key: string;
                 index: number;
                 routeNames: string[];
                 history?: unknown[];
-                routes: _react_navigation_routers.NavigationRoute<_react_navigation_routers.ParamListBase, string>[];
+                routes: _react_navigation_native.NavigationRoute<_react_navigation_native.ParamListBase, string>[];
                 type: string;
                 stale: false;
             }>>, "focus", unknown>;
-            blur: _react_navigation_core.EventListenerCallback<_react_navigation_core.EventMapBase & _react_navigation_core.EventMapCore<Readonly<{
+            blur: _react_navigation_native.EventListenerCallback<_react_navigation_native.EventMapBase & _react_navigation_native.EventMapCore<Readonly<{
                 key: string;
                 index: number;
                 routeNames: string[];
                 history?: unknown[];
-                routes: _react_navigation_routers.NavigationRoute<_react_navigation_routers.ParamListBase, string>[];
+                routes: _react_navigation_native.NavigationRoute<_react_navigation_native.ParamListBase, string>[];
                 type: string;
                 stale: false;
             }>>, "blur", unknown>;
-            state: _react_navigation_core.EventListenerCallback<_react_navigation_core.EventMapBase & _react_navigation_core.EventMapCore<Readonly<{
+            state: _react_navigation_native.EventListenerCallback<_react_navigation_native.EventMapBase & _react_navigation_native.EventMapCore<Readonly<{
                 key: string;
                 index: number;
                 routeNames: string[];
                 history?: unknown[];
-                routes: _react_navigation_routers.NavigationRoute<_react_navigation_routers.ParamListBase, string>[];
+                routes: _react_navigation_native.NavigationRoute<_react_navigation_native.ParamListBase, string>[];
                 type: string;
                 stale: false;
             }>>, "state", unknown>;
-            beforeRemove: _react_navigation_core.EventListenerCallback<_react_navigation_core.EventMapBase & _react_navigation_core.EventMapCore<Readonly<{
+            beforeRemove: _react_navigation_native.EventListenerCallback<_react_navigation_native.EventMapBase & _react_navigation_native.EventMapCore<Readonly<{
                 key: string;
                 index: number;
                 routeNames: string[];
                 history?: unknown[];
-                routes: _react_navigation_routers.NavigationRoute<_react_navigation_routers.ParamListBase, string>[];
+                routes: _react_navigation_native.NavigationRoute<_react_navigation_native.ParamListBase, string>[];
                 type: string;
                 stale: false;
             }>>, "beforeRemove", true>;
         }>;
     };
-    defaultScreenOptions: () => {
-        readonly presentation: "containedTransparentModal";
-        readonly headerShown: false;
-        readonly animation: "none";
-    };
-    presets: typeof presets;
-    specs: typeof specs;
-    /**
-     * Create a transition aware component
-     */
-    createTransitionAwareComponent: typeof createTransitionAwareComponent;
-    /**
-     * Create a transition aware scrollable component
-     */
-    createTransitionAwareScrollable: typeof createTransitionAwareScrollable;
 };
 
-export { _default as default, useScreenAnimation };
+export { type TransitionConfig, type TransitionStackNavigatorTypeBag, _default as default, useScreenAnimation };

package/dist/index.js

@@ -1125,7 +1125,7 @@ var ElasticCard = (config = { elasticFactor: 0.5 }) => {
         "clamp"
       );
       const overlayColor = (0, import_react_native_reanimated11.interpolateColor)(
-        next?.progress.value || 0,
+        current.progress.value,
         [0, 1],
         ["rgba(0,0,0,0)", "rgba(0,0,0,0.5)"]
       );
@@ -1134,7 +1134,7 @@ var ElasticCard = (config = { elasticFactor: 0.5 }) => {
           transform: [{ scale }, { translateX }, { translateY }]
         },
         overlayStyle: {
-          backgroundColor: overlayColor
+          backgroundColor: !next ? overlayColor : "rgba(0,0,0,0)"
         }
       };
     },
@@ -1142,14 +1142,112 @@ var ElasticCard = (config = { elasticFactor: 0.5 }) => {
   };
 };
 
+// src/navigator/create-transitionable-stack-navigator.tsx
+var import_native4 = require("@react-navigation/native");
+var import_native_stack = require("@react-navigation/native-stack");
+var import_react10 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_SCREEN_OPTIONS = {
+  presentation: "containedTransparentModal",
+  headerShown: false,
+  animation: "none"
+  /**
+   * EXPERIMENTAL:
+   When handling forward navigation, this would be the prop we would use to prevent the underlying screen from not being interactable.
+    - pointerEvents: "box-none",
+   */
+};
+var CONFLICTING_SCREEN_OPTIONS = {
+  gestureEnabled: false,
+  gestureDirection: "horizontal"
+};
+function TransitionableStackNavigator({
+  id,
+  initialRouteName,
+  children,
+  layout,
+  screenListeners,
+  screenOptions,
+  screenLayout,
+  UNSTABLE_router,
+  ...rest
+}) {
+  const screenProcessor = (0, import_react10.useMemo)(() => {
+    const childOptions = /* @__PURE__ */ new Map();
+    const modifiedChildren = import_react10.Children.toArray(children).filter(import_react10.isValidElement).map((child) => {
+      const resolvedOptions = typeof child.props.options === "function" ? child.props.options({
+        route: child.props.route,
+        navigation: child.props.navigation
+      }) : child.props.options || {};
+      childOptions.set(child.props.name, resolvedOptions);
+      const skipDefaultScreenOptions = resolvedOptions?.skipDefaultScreenOptions === true;
+      return import_react10.default.cloneElement(child, {
+        ...child.props,
+        options: {
+          ...skipDefaultScreenOptions ? {} : DEFAULT_SCREEN_OPTIONS,
+          ...resolvedOptions,
+          ...CONFLICTING_SCREEN_OPTIONS
+        }
+      });
+    });
+    return {
+      children: modifiedChildren,
+      childOptions
+    };
+  }, [children]);
+  const screenListenersWithTransitions = (0, import_react10.useMemo)(() => {
+    return (props) => {
+      const resolvedNavigatorConfig = typeof screenOptions === "function" ? screenOptions({
+        navigation: props.navigation,
+        route: props.route,
+        theme: {}
+      }) : screenOptions;
+      const resolvedChildConfig = screenProcessor.childOptions.get(props.route.name);
+      const mergedConfig = {
+        ...resolvedNavigatorConfig,
+        ...resolvedChildConfig
+        //Child should override navigator config
+      };
+      const transitionListeners = createConfig({
+        navigation: props.navigation,
+        route: props.route,
+        screenStyleInterpolator: mergedConfig.screenStyleInterpolator,
+        transitionSpec: mergedConfig.transitionSpec,
+        gestureEnabled: mergedConfig.gestureEnabled,
+        gestureDirection: mergedConfig.gestureDirection,
+        gestureResponseDistance: typeof mergedConfig.gestureResponseDistance === "number" ? mergedConfig.gestureResponseDistance : void 0,
+        gestureVelocityImpact: mergedConfig.gestureVelocityImpact
+      });
+      const existingListeners = typeof screenListeners === "function" ? screenListeners(props) : screenListeners || {};
+      return {
+        ...existingListeners,
+        ...transitionListeners
+      };
+    };
+  }, [screenListeners, screenOptions, screenProcessor.childOptions]);
+  const buildingBlocks = {
+    id,
+    initialRouteName,
+    children: screenProcessor.children,
+    layout,
+    screenListeners: screenListenersWithTransitions,
+    screenOptions,
+    screenLayout,
+    UNSTABLE_router
+  };
+  const { state, describe, descriptors, navigation, NavigationContent } = (0, import_native4.useNavigationBuilder)(import_native4.StackRouter, buildingBlocks);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavigationContent, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_native_stack.NativeStackView, { ...rest, state, navigation, descriptors, describe }) });
+}
+function createTransitionableStackNavigator() {
+  return (0, import_native4.createNavigatorFactory)(TransitionableStackNavigator)();
+}
+
 // src/index.ts
 var index_default = {
   View: createTransitionAwareComponent(import_react_native5.View),
   Pressable: createTransitionAwareComponent(import_react_native5.Pressable),
   ScrollView: createTransitionAwareScrollable(import_react_native5.ScrollView),
   FlatList: createTransitionAwareScrollable(import_react_native5.FlatList),
-  createConfig,
-  createScreenConfig,
   defaultScreenOptions,
   presets: presets_exports,
   specs: specs_exports,
@@ -1160,7 +1258,23 @@ var index_default = {
   /**
    * Create a transition aware scrollable component
    */
-  createTransitionAwareScrollable
+  createTransitionAwareScrollable,
+  /**
+   * Create a transitionable native stack navigator.
+   *
+   */
+  createTransitionableStackNavigator,
+  /**
+   * @deprecated Use {@link createTransitionableStackNavigator} instead.
+   */
+  createConfig,
+  /**
+   * @deprecated Use {@link createTransitionableStackNavigator} instead.
+   */
+  createScreenConfig
+  /**
+   * @deprecated Use {@link createTransitionableStackNavigator} instead.
+   */
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {