react-native-screen-transitions 1.2.0 → 2.0.0

package/lib/module/integrations/native-stack/views/NativeStackView.js

@@ -0,0 +1,133 @@
+"use strict";
+
+import { getHeaderTitle, Header, HeaderBackButton, HeaderBackContext, SafeAreaProviderCompat, Screen, useHeaderHeight } from "@react-navigation/elements";
+import { useLinkBuilder } from "@react-navigation/native";
+import * as React from "react";
+import { Animated, Image, StyleSheet, View } from "react-native";
+import { AnimatedHeaderHeightContext } from "../utils/useAnimatedHeaderHeight";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TRANSPARENT_PRESENTATIONS = ["transparentModal", "containedTransparentModal"];
+export function NativeStackView({
+  state,
+  descriptors,
+  describe
+}) {
+  const parentHeaderBack = React.useContext(HeaderBackContext);
+  const {
+    buildHref
+  } = useLinkBuilder();
+  const preloadedDescriptors = state.preloadedRoutes.reduce((acc, route) => {
+    acc[route.key] = acc[route.key] || describe(route, true);
+    return acc;
+  }, {});
+  return /*#__PURE__*/_jsx(SafeAreaProviderCompat, {
+    children: state.routes.concat(state.preloadedRoutes).map((route, i) => {
+      const isFocused = state.index === i;
+      const previousKey = state.routes[i - 1]?.key;
+      const nextKey = state.routes[i + 1]?.key;
+      const previousDescriptor = previousKey ? descriptors[previousKey] : undefined;
+      const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
+      const {
+        options,
+        navigation,
+        render
+      } = descriptors[route.key] ?? preloadedDescriptors[route.key];
+      const headerBack = previousDescriptor ? {
+        title: getHeaderTitle(previousDescriptor.options, previousDescriptor.route.name),
+        href: buildHref(previousDescriptor.route.name, previousDescriptor.route.params)
+      } : parentHeaderBack;
+      const canGoBack = headerBack != null;
+      const {
+        header,
+        headerShown,
+        headerBackImageSource,
+        headerLeft,
+        headerTransparent,
+        headerBackTitle,
+        presentation,
+        contentStyle,
+        ...rest
+      } = options;
+      const nextPresentation = nextDescriptor?.options.presentation;
+      const isPreloaded = preloadedDescriptors[route.key] !== undefined && descriptors[route.key] === undefined;
+      return /*#__PURE__*/_jsx(Screen, {
+        focused: isFocused,
+        route: route,
+        navigation: navigation,
+        headerShown: headerShown,
+        headerTransparent: headerTransparent,
+        header: header !== undefined ? header({
+          back: headerBack,
+          options,
+          route,
+          navigation
+        }) : /*#__PURE__*/_jsx(Header, {
+          ...rest,
+          back: headerBack,
+          title: getHeaderTitle(options, route.name),
+          headerLeft: typeof headerLeft === "function" ? ({
+            label,
+            ...rest
+          }) => headerLeft({
+            ...rest,
+            label: headerBackTitle ?? label
+          }) : headerLeft === undefined && canGoBack ? ({
+            tintColor,
+            label,
+            ...rest
+          }) => /*#__PURE__*/_jsx(HeaderBackButton, {
+            ...rest,
+            label: headerBackTitle ?? label,
+            tintColor: tintColor,
+            backImage: headerBackImageSource !== undefined ? () => /*#__PURE__*/_jsx(Image, {
+              source: headerBackImageSource,
+              resizeMode: "contain",
+              tintColor: tintColor,
+              style: styles.backImage
+            }) : undefined,
+            onPress: navigation.goBack
+          }) : headerLeft,
+          headerTransparent: headerTransparent
+        }),
+        style: [StyleSheet.absoluteFill, {
+          display: (isFocused || nextPresentation != null && TRANSPARENT_PRESENTATIONS.includes(nextPresentation)) && !isPreloaded ? "flex" : "none"
+        }, presentation != null && TRANSPARENT_PRESENTATIONS.includes(presentation) ? {
+          backgroundColor: "transparent"
+        } : null],
+        children: /*#__PURE__*/_jsx(HeaderBackContext.Provider, {
+          value: headerBack,
+          children: /*#__PURE__*/_jsx(AnimatedHeaderHeightProvider, {
+            children: /*#__PURE__*/_jsx(View, {
+              style: [styles.contentContainer, contentStyle],
+              children: render()
+            })
+          })
+        })
+      }, route.key);
+    })
+  });
+}
+const AnimatedHeaderHeightProvider = ({
+  children
+}) => {
+  const headerHeight = useHeaderHeight();
+  const [animatedHeaderHeight] = React.useState(() => new Animated.Value(headerHeight));
+  React.useEffect(() => {
+    animatedHeaderHeight.setValue(headerHeight);
+  }, [animatedHeaderHeight, headerHeight]);
+  return /*#__PURE__*/_jsx(AnimatedHeaderHeightContext.Provider, {
+    value: animatedHeaderHeight,
+    children: children
+  });
+};
+const styles = StyleSheet.create({
+  contentContainer: {
+    flex: 1
+  },
+  backImage: {
+    height: 24,
+    width: 24,
+    margin: 3
+  }
+});
+//# sourceMappingURL=NativeStackView.js.map

package/lib/module/integrations/native-stack/views/NativeStackView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getHeaderTitle","Header","HeaderBackButton","HeaderBackContext","SafeAreaProviderCompat","Screen","useHeaderHeight","useLinkBuilder","React","Animated","Image","StyleSheet","View","AnimatedHeaderHeightContext","jsx","_jsx","TRANSPARENT_PRESENTATIONS","NativeStackView","state","descriptors","describe","parentHeaderBack","useContext","buildHref","preloadedDescriptors","preloadedRoutes","reduce","acc","route","key","children","routes","concat","map","i","isFocused","index","previousKey","nextKey","previousDescriptor","undefined","nextDescriptor","options","navigation","render","headerBack","title","name","href","params","canGoBack","header","headerShown","headerBackImageSource","headerLeft","headerTransparent","headerBackTitle","presentation","contentStyle","rest","nextPresentation","isPreloaded","focused","back","label","tintColor","backImage","source","resizeMode","style","styles","onPress","goBack","absoluteFill","display","includes","backgroundColor","Provider","value","AnimatedHeaderHeightProvider","contentContainer","headerHeight","animatedHeaderHeight","useState","Value","useEffect","setValue","create","flex","height","width","margin"],"sourceRoot":"../../../../../src","sources":["integrations/native-stack/views/NativeStackView.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/integrations/native-stack/views/NativeStackView.native.js

@@ -0,0 +1,492 @@
+"use strict";
+
+import { getDefaultHeaderHeight, getHeaderTitle, HeaderBackContext, HeaderHeightContext, HeaderShownContext, SafeAreaProviderCompat, useFrameSize } from "@react-navigation/elements";
+import { NavigationContext, NavigationRouteContext, StackActions, usePreventRemoveContext, useTheme } from "@react-navigation/native";
+import * as React from "react";
+import { Animated, Platform, StatusBar, StyleSheet, useAnimatedValue, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ScreenStack, ScreenStackItem } from "react-native-screens";
+import { ScreenLifecycleController } from "../../../components/controllers/screen-lifecycle";
+import { RootTransitionAware } from "../../../components/root-transition-aware";
+import { ScreenGestureProvider } from "../../../providers/gestures";
+import { KeysProvider } from "../../../providers/keys";
+import { debounce } from "../utils/debounce";
+import { getModalRouteKeys } from "../utils/getModalRoutesKeys";
+import { AnimatedHeaderHeightContext } from "../utils/useAnimatedHeaderHeight";
+import { useDismissedRouteError } from "../utils/useDismissedRouteError";
+import { useInvalidPreventRemoveError } from "../utils/useInvalidPreventRemoveError";
+import { useHeaderConfigProps } from "./useHeaderConfigProps";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ANDROID_DEFAULT_HEADER_HEIGHT = 56;
+function isFabric() {
+  return "nativeFabricUIManager" in global;
+}
+const useNativeDriver = Platform.OS !== "web";
+const SceneView = ({
+  index,
+  focused,
+  shouldFreeze,
+  descriptor,
+  previousDescriptor,
+  nextDescriptor,
+  isPresentationModal,
+  isPreloaded,
+  onWillDisappear,
+  onWillAppear,
+  onAppear,
+  onDisappear,
+  onDismissed,
+  onHeaderBackButtonClicked,
+  onNativeDismissCancelled,
+  onGestureCancel,
+  onSheetDetentChanged
+}) => {
+  const {
+    route,
+    navigation,
+    options,
+    render
+  } = descriptor;
+  let {
+    animation,
+    animationMatchesGesture,
+    presentation = isPresentationModal ? "modal" : "card",
+    fullScreenGestureEnabled
+  } = options;
+  const {
+    animationDuration,
+    animationTypeForReplace = "push",
+    fullScreenGestureShadowEnabled = true,
+    nativeGestureEnabled,
+    nativeGestureDirection = presentation === "card" ? "horizontal" : "vertical",
+    nativeGestureResponseDistance,
+    header,
+    headerBackButtonMenuEnabled,
+    headerShown,
+    headerBackground,
+    headerTransparent,
+    autoHideHomeIndicator,
+    keyboardHandlingEnabled,
+    navigationBarColor,
+    navigationBarTranslucent,
+    navigationBarHidden,
+    orientation,
+    sheetAllowedDetents = [1.0],
+    sheetLargestUndimmedDetentIndex = -1,
+    sheetGrabberVisible = false,
+    sheetCornerRadius = -1.0,
+    sheetElevation = 24,
+    sheetExpandsWhenScrolledToEdge = true,
+    sheetInitialDetentIndex = 0,
+    statusBarAnimation,
+    statusBarHidden,
+    statusBarStyle,
+    statusBarTranslucent,
+    statusBarBackgroundColor,
+    unstable_sheetFooter,
+    freezeOnBlur,
+    contentStyle,
+    enableTransitions
+  } = options;
+  if (nativeGestureDirection === "vertical" && Platform.OS === "ios") {
+    // for `vertical` direction to work, we need to set `fullScreenGestureEnabled` to `true`
+    // so the screen can be dismissed from any point on screen.
+    // `animationMatchesGesture` needs to be set to `true` so the `animation` set by user can be used,
+    // otherwise `simple_push` will be used.
+    // Also, the default animation for this direction seems to be `slide_from_bottom`.
+    if (fullScreenGestureEnabled === undefined) {
+      fullScreenGestureEnabled = true;
+    }
+    if (animationMatchesGesture === undefined) {
+      animationMatchesGesture = true;
+    }
+    if (animation === undefined) {
+      animation = "slide_from_bottom";
+    }
+  }
+
+  // workaround for rn-screens where gestureDirection has to be set on both
+  // current and previous screen - software-mansion/react-native-screens/pull/1509
+  const nextGestureDirection = nextDescriptor?.options.nativeGestureDirection;
+  const gestureDirectionOverride = nextGestureDirection != null ? nextGestureDirection : nativeGestureDirection;
+  if (index === 0) {
+    // first screen should always be treated as `card`, it resolves problems with no header animation
+    // for navigator with first screen as `modal` and the next as `card`
+    presentation = "card";
+  }
+  const {
+    colors
+  } = useTheme();
+  const insets = useSafeAreaInsets();
+
+  // `modal` and `formSheet` presentations do not take whole screen, so should not take the inset.
+  const isModal = presentation === "modal" || presentation === "formSheet";
+
+  // Modals are fullscreen in landscape only on iPhone
+  const isIPhone = Platform.OS === "ios" && !(Platform.isPad || Platform.isTV);
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+  const parentHeaderBack = React.useContext(HeaderBackContext);
+  const isLandscape = useFrameSize(frame => frame.width > frame.height);
+  const topInset = isParentHeaderShown || Platform.OS === "ios" && isModal || isIPhone && isLandscape ? 0 : insets.top;
+  const defaultHeaderHeight = useFrameSize(frame => Platform.select({
+    // FIXME: Currently screens isn't using Material 3
+    // So our `getDefaultHeaderHeight` doesn't return the correct value
+    // So we hardcode the value here for now until screens is updated
+    android: ANDROID_DEFAULT_HEADER_HEIGHT + topInset,
+    default: getDefaultHeaderHeight(frame, isModal, topInset)
+  }));
+  const {
+    preventedRoutes
+  } = usePreventRemoveContext();
+  const [headerHeight, setHeaderHeight] = React.useState(defaultHeaderHeight);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const setHeaderHeightDebounced = React.useCallback(
+  // Debounce the header height updates to avoid excessive re-renders
+  debounce(setHeaderHeight, 100), []);
+  const hasCustomHeader = header != null;
+  let headerHeightCorrectionOffset = 0;
+  if (Platform.OS === "android" && !hasCustomHeader) {
+    const statusBarHeight = StatusBar.currentHeight ?? 0;
+
+    // FIXME: On Android, the native header height is not correctly calculated
+    // It includes status bar height even if statusbar is not translucent
+    // And the statusbar value itself doesn't match the actual status bar height
+    // So we subtract the bogus status bar height and add the actual top inset
+    headerHeightCorrectionOffset = -statusBarHeight + topInset;
+  }
+  const rawAnimatedHeaderHeight = useAnimatedValue(defaultHeaderHeight);
+  const animatedHeaderHeight = React.useMemo(() => Animated.add(rawAnimatedHeaderHeight, headerHeightCorrectionOffset), [headerHeightCorrectionOffset, rawAnimatedHeaderHeight]);
+
+  // During the very first render topInset is > 0 when running
+  // in non edge-to-edge mode on Android, while on every consecutive render
+  // topInset === 0, causing header content to jump, as we add padding on the first frame,
+  // just to remove it in next one. To prevent this, when statusBarTranslucent is set,
+  // we apply additional padding in header only if its true.
+  // For more details see: https://github.com/react-navigation/react-navigation/pull/12014
+  const headerTopInsetEnabled = typeof statusBarTranslucent === "boolean" ? statusBarTranslucent : topInset !== 0;
+  const canGoBack = previousDescriptor != null || parentHeaderBack != null;
+  const backTitle = previousDescriptor ? getHeaderTitle(previousDescriptor.options, previousDescriptor.route.name) : parentHeaderBack?.title;
+  const headerBack = React.useMemo(() => {
+    if (canGoBack) {
+      return {
+        href: undefined,
+        // No href needed for native
+        title: backTitle
+      };
+    }
+    return undefined;
+  }, [canGoBack, backTitle]);
+  const isRemovePrevented = preventedRoutes[route.key]?.preventRemove;
+  const modifiedPresentation = enableTransitions ? "containedTransparentModal" : presentation === "card" ? "push" : presentation;
+  const modifiedAnimation = enableTransitions ? "none" : animation;
+  const modifiedHeaderShown = enableTransitions || header !== undefined ? false : headerShown;
+  const headerConfig = useHeaderConfigProps({
+    ...options,
+    route,
+    headerBackButtonMenuEnabled: isRemovePrevented !== undefined ? !isRemovePrevented : headerBackButtonMenuEnabled,
+    headerBackTitle: options.headerBackTitle !== undefined ? options.headerBackTitle : undefined,
+    headerHeight,
+    headerShown: modifiedHeaderShown,
+    headerTopInsetEnabled,
+    headerBack
+  });
+  return /*#__PURE__*/_jsx(NavigationContext.Provider, {
+    value: navigation,
+    children: /*#__PURE__*/_jsx(NavigationRouteContext.Provider, {
+      value: route,
+      children: /*#__PURE__*/_jsx(ScreenStackItem, {
+        screenId: route.key,
+        activityState: isPreloaded ? 0 : 2,
+        style: StyleSheet.absoluteFill,
+        "aria-hidden": !focused,
+        customAnimationOnSwipe: animationMatchesGesture,
+        fullScreenSwipeEnabled: fullScreenGestureEnabled,
+        fullScreenSwipeShadowEnabled: fullScreenGestureShadowEnabled,
+        freezeOnBlur: freezeOnBlur,
+        gestureEnabled: Platform.OS === "android" ?
+        // This prop enables handling of system back gestures on Android
+        // Since we handle them in JS side, we disable this
+        false : nativeGestureEnabled,
+        homeIndicatorHidden: autoHideHomeIndicator,
+        hideKeyboardOnSwipe: keyboardHandlingEnabled,
+        navigationBarColor: navigationBarColor,
+        navigationBarTranslucent: navigationBarTranslucent,
+        navigationBarHidden: navigationBarHidden,
+        replaceAnimation: animationTypeForReplace,
+        stackPresentation: modifiedPresentation,
+        stackAnimation: modifiedAnimation,
+        screenOrientation: orientation,
+        sheetAllowedDetents: sheetAllowedDetents,
+        sheetLargestUndimmedDetentIndex: sheetLargestUndimmedDetentIndex,
+        sheetGrabberVisible: sheetGrabberVisible,
+        sheetInitialDetentIndex: sheetInitialDetentIndex,
+        sheetCornerRadius: sheetCornerRadius,
+        sheetElevation: sheetElevation,
+        sheetExpandsWhenScrolledToEdge: sheetExpandsWhenScrolledToEdge,
+        statusBarAnimation: statusBarAnimation,
+        statusBarHidden: statusBarHidden,
+        statusBarStyle: statusBarStyle,
+        statusBarColor: statusBarBackgroundColor,
+        statusBarTranslucent: statusBarTranslucent,
+        swipeDirection: gestureDirectionOverride,
+        transitionDuration: animationDuration,
+        onWillAppear: onWillAppear,
+        onWillDisappear: onWillDisappear,
+        onAppear: onAppear,
+        onDisappear: onDisappear,
+        onDismissed: onDismissed,
+        onGestureCancel: onGestureCancel,
+        onSheetDetentChanged: onSheetDetentChanged,
+        gestureResponseDistance: nativeGestureResponseDistance,
+        nativeBackButtonDismissalEnabled: false // on Android
+        ,
+        onHeaderBackButtonClicked: onHeaderBackButtonClicked,
+        preventNativeDismiss: isRemovePrevented // on iOS
+        ,
+        onNativeDismissCancelled: onNativeDismissCancelled
+        // Unfortunately, because of the bug that exists on Fabric, where native event drivers
+        // for Animated objects are being created after the first notifications about the header height
+        // from the native side, `onHeaderHeightChange` event does not notify
+        // `animatedHeaderHeight` about initial values on appearing screens at the moment.
+        ,
+        onHeaderHeightChange: Animated.event([{
+          nativeEvent: {
+            headerHeight: rawAnimatedHeaderHeight
+          }
+        }], {
+          useNativeDriver,
+          listener: e => {
+            if (hasCustomHeader) {
+              // If we have a custom header, don't use native header height
+              return;
+            }
+            if (Platform.OS === "android" && (options.headerBackground != null || options.headerTransparent)) {
+              // FIXME: On Android, we get 0 if the header is translucent
+              // So we set a default height in that case
+              setHeaderHeight(ANDROID_DEFAULT_HEADER_HEIGHT + topInset);
+              return;
+            }
+            if (e.nativeEvent && typeof e.nativeEvent === "object" && "headerHeight" in e.nativeEvent && typeof e.nativeEvent.headerHeight === "number") {
+              const headerHeight = e.nativeEvent.headerHeight + headerHeightCorrectionOffset;
+
+              // Only debounce if header has large title or search bar
+              // As it's the only case where the header height can change frequently
+              const doesHeaderAnimate = Platform.OS === "ios" && (options.headerLargeTitle || options.headerSearchBarOptions);
+              if (doesHeaderAnimate) {
+                setHeaderHeightDebounced(headerHeight);
+              } else {
+                setHeaderHeight(headerHeight);
+              }
+            }
+          }
+        }),
+        contentStyle: [modifiedPresentation !== "transparentModal" && modifiedPresentation !== "containedTransparentModal" && {
+          backgroundColor: colors.background
+        }, contentStyle],
+        headerConfig: headerConfig,
+        unstable_sheetFooter: unstable_sheetFooter
+        // When ts-expect-error is added, it affects all the props below it
+        // So we keep any props that need it at the end
+        // Otherwise invalid props may not be caught by TypeScript
+        ,
+        shouldFreeze: shouldFreeze,
+        children: /*#__PURE__*/_jsx(AnimatedHeaderHeightContext.Provider, {
+          value: animatedHeaderHeight,
+          children: /*#__PURE__*/_jsxs(HeaderHeightContext.Provider, {
+            value: headerShown !== false ? headerHeight : parentHeaderHeight ?? 0,
+            children: [headerBackground != null ?
+            /*#__PURE__*/
+            /**
+             * To show a custom header background, we render it at the top of the screen below the header
+             * The header also needs to be positioned absolutely (with `translucent` style)
+             */
+            _jsx(View, {
+              style: [styles.background, headerTransparent ? styles.translucent : null, {
+                height: headerHeight
+              }],
+              children: headerBackground()
+            }) : null, header != null && headerShown !== false ? /*#__PURE__*/_jsx(View, {
+              onLayout: e => {
+                const headerHeight = e.nativeEvent.layout.height;
+                setHeaderHeight(headerHeight);
+                rawAnimatedHeaderHeight.setValue(headerHeight);
+              },
+              style: [styles.header, headerTransparent ? styles.absolute : null],
+              children: header({
+                back: headerBack,
+                options,
+                route,
+                navigation
+              })
+            }) : null, /*#__PURE__*/_jsx(HeaderShownContext.Provider, {
+              value: isParentHeaderShown || headerShown !== false,
+              children: /*#__PURE__*/_jsx(HeaderBackContext.Provider, {
+                value: headerBack,
+                children: /*#__PURE__*/_jsx(KeysProvider, {
+                  previous: previousDescriptor,
+                  current: descriptor,
+                  next: nextDescriptor,
+                  children: /*#__PURE__*/_jsx(ScreenLifecycleController, {
+                    children: /*#__PURE__*/_jsx(ScreenGestureProvider, {
+                      children: /*#__PURE__*/_jsx(RootTransitionAware, {
+                        children: render()
+                      })
+                    })
+                  })
+                })
+              })
+            })]
+          })
+        })
+      }, route.key)
+    })
+  });
+};
+export function NativeStackView({
+  state,
+  navigation,
+  descriptors,
+  describe
+}) {
+  const {
+    setNextDismissedKey
+  } = useDismissedRouteError(state);
+  useInvalidPreventRemoveError(descriptors);
+  const modalRouteKeys = getModalRouteKeys(state.routes, descriptors);
+  const preloadedDescriptors = state.preloadedRoutes.reduce((acc, route) => {
+    acc[route.key] = acc[route.key] || describe(route, true);
+    return acc;
+  }, {});
+  return /*#__PURE__*/_jsx(SafeAreaProviderCompat, {
+    children: /*#__PURE__*/_jsx(ScreenStack, {
+      style: styles.container,
+      children: state.routes.concat(state.preloadedRoutes).map((route, index) => {
+        const descriptor = descriptors[route.key] ?? preloadedDescriptors[route.key];
+        const isFocused = state.index === index;
+        const isBelowFocused = state.index - 1 === index;
+        const previousKey = state.routes[index - 1]?.key;
+        const nextKey = state.routes[index + 1]?.key;
+        const previousDescriptor = previousKey ? descriptors[previousKey] : undefined;
+        const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
+        const isModal = modalRouteKeys.includes(route.key);
+        const isPreloaded = preloadedDescriptors[route.key] !== undefined && descriptors[route.key] === undefined;
+
+        // On Fabric, when screen is frozen, animated and reanimated values are not updated
+        // due to component being unmounted. To avoid this, we don't freeze the previous screen there
+        const shouldFreeze = isFabric() ? !isPreloaded && !isFocused && !isBelowFocused : !isPreloaded && !isFocused;
+        return /*#__PURE__*/_jsx(SceneView, {
+          index: index,
+          focused: isFocused,
+          shouldFreeze: shouldFreeze,
+          descriptor: descriptor,
+          previousDescriptor: previousDescriptor,
+          nextDescriptor: nextDescriptor,
+          isPresentationModal: isModal,
+          isPreloaded: isPreloaded,
+          onWillDisappear: () => {
+            navigation.emit({
+              type: "transitionStart",
+              data: {
+                closing: true
+              },
+              target: route.key
+            });
+          },
+          onWillAppear: () => {
+            navigation.emit({
+              type: "transitionStart",
+              data: {
+                closing: false
+              },
+              target: route.key
+            });
+          },
+          onAppear: () => {
+            navigation.emit({
+              type: "transitionEnd",
+              data: {
+                closing: false
+              },
+              target: route.key
+            });
+          },
+          onDisappear: () => {
+            navigation.emit({
+              type: "transitionEnd",
+              data: {
+                closing: true
+              },
+              target: route.key
+            });
+          },
+          onDismissed: event => {
+            navigation.dispatch({
+              ...StackActions.pop(event.nativeEvent.dismissCount),
+              source: route.key,
+              target: state.key
+            });
+            setNextDismissedKey(route.key);
+          },
+          onHeaderBackButtonClicked: () => {
+            navigation.dispatch({
+              ...StackActions.pop(),
+              source: route.key,
+              target: state.key
+            });
+          },
+          onNativeDismissCancelled: event => {
+            navigation.dispatch({
+              ...StackActions.pop(event.nativeEvent.dismissCount),
+              source: route.key,
+              target: state.key
+            });
+          },
+          onGestureCancel: () => {
+            navigation.emit({
+              type: "gestureCancel",
+              target: route.key
+            });
+          },
+          onSheetDetentChanged: event => {
+            navigation.emit({
+              type: "sheetDetentChange",
+              target: route.key,
+              data: {
+                index: event.nativeEvent.index,
+                stable: event.nativeEvent.isStable
+              }
+            });
+          }
+        }, route.key);
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  header: {
+    zIndex: 1
+  },
+  absolute: {
+    position: "absolute",
+    top: 0,
+    start: 0,
+    end: 0
+  },
+  translucent: {
+    position: "absolute",
+    top: 0,
+    start: 0,
+    end: 0,
+    zIndex: 1,
+    elevation: 1
+  },
+  background: {
+    overflow: "hidden"
+  }
+});
+//# sourceMappingURL=NativeStackView.native.js.map