@react-navigation/stack 7.0.0-alpha.1 → 7.0.0-alpha.11

package/src/views/Stack/StackView.tsx

@@ -4,19 +4,19 @@ import {
 } from '@react-navigation/elements';
 import {
   CommonActions,
-  ParamListBase,
-  Route,
+  type LocaleDirection,
+  type ParamListBase,
+  type Route,
+  type RouteProp,
   StackActions,
-  StackNavigationState,
+  type StackNavigationState,
 } from '@react-navigation/native';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-import {
-  EdgeInsets,
-  SafeAreaInsetsContext,
-} from 'react-native-safe-area-context';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
 import type {
+  StackDescriptor,
   StackDescriptorMap,
   StackNavigationConfig,
   StackNavigationHelpers,
@@ -25,14 +25,19 @@ import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
 import { GestureHandlerRootView } from '../GestureHandler';
 import {
   HeaderContainer,
-  Props as HeaderContainerProps,
+  type Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
 import { CardStack } from './CardStack';
 
 type Props = StackNavigationConfig & {
+  direction: LocaleDirection;
   state: StackNavigationState<ParamListBase>;
   navigation: StackNavigationHelpers;
   descriptors: StackDescriptorMap;
+  describe: (
+    route: RouteProp<ParamListBase>,
+    placeholder: boolean
+  ) => StackDescriptor;
 };
 
 type State = {
@@ -125,12 +130,9 @@ export class StackView extends React.Component<Props, State> {
         : props.state.routes;
 
     // Now we need to determine which routes were added and removed
-    let {
-      openingRouteKeys,
-      closingRouteKeys,
-      replacingRouteKeys,
-      previousRoutes,
-    } = state;
+    const { previousRoutes } = state;
+
+    let { openingRouteKeys, closingRouteKeys, replacingRouteKeys } = state;
 
     const previousFocusedRoute = previousRoutes[previousRoutes.length - 1] as
       | Route<string>
@@ -303,17 +305,6 @@ export class StackView extends React.Component<Props, State> {
     return routes[index - 1];
   };
 
-  private renderScene = ({ route }: { route: Route<string> }) => {
-    const descriptor =
-      this.state.descriptors[route.key] || this.props.descriptors[route.key];
-
-    if (!descriptor) {
-      return null;
-    }
-
-    return descriptor.render();
-  };
-
   private renderHeader = (props: HeaderContainerProps) => {
     return <HeaderContainer {...props} />;
   };
@@ -438,6 +429,12 @@ export class StackView extends React.Component<Props, State> {
     const { routes, descriptors, openingRouteKeys, closingRouteKeys } =
       this.state;
 
+    const preloadedDescriptors =
+      state.preloadedRoutes.reduce<StackDescriptorMap>((acc, route) => {
+        acc[route.key] = acc[route.key] || this.props.describe(route, true);
+        return acc;
+      }, {});
+
     return (
       <GestureHandlerWrapper style={styles.container}>
         <SafeAreaProviderCompat>
@@ -448,7 +445,7 @@ export class StackView extends React.Component<Props, State> {
                   <HeaderShownContext.Consumer>
                     {(isParentHeaderShown) => (
                       <CardStack
-                        insets={insets as EdgeInsets}
+                        insets={insets!}
                         isParentHeaderShown={isParentHeaderShown}
                         isParentModal={isParentModal}
                         getPreviousRoute={this.getPreviousRoute}
@@ -460,12 +457,12 @@ export class StackView extends React.Component<Props, State> {
                         onTransitionStart={this.handleTransitionStart}
                         onTransitionEnd={this.handleTransitionEnd}
                         renderHeader={this.renderHeader}
-                        renderScene={this.renderScene}
                         state={state}
                         descriptors={descriptors}
                         onGestureStart={this.handleGestureStart}
                         onGestureEnd={this.handleGestureEnd}
                         onGestureCancel={this.handleGestureCancel}
+                        preloadedDescriptors={preloadedDescriptors}
                         {...rest}
                       />
                     )}

package/lib/commonjs/views/ModalStatusBarManager.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ModalStatusBarManager = ModalStatusBarManager;
-var _native = require("@react-navigation/native");
-var React = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ModalStatusBarManager(_ref) {
-  var _flattenedStyle$trans, _flattenedStyle$trans2;
-  let {
-    dark,
-    layout,
-    insets,
-    style
-  } = _ref;
-  const {
-    dark: darkTheme
-  } = (0, _native.useTheme)();
-  const [overlapping, setOverlapping] = React.useState(true);
-  const scale = 1 - 20 / layout.width;
-  const offset = (insets.top - 34) * scale;
-  const flattenedStyle = _reactNative.StyleSheet.flatten(style);
-  const translateY = flattenedStyle === null || flattenedStyle === void 0 ? void 0 : (_flattenedStyle$trans = flattenedStyle.transform) === null || _flattenedStyle$trans === void 0 ? void 0 : (_flattenedStyle$trans2 = _flattenedStyle$trans.find(s => s.translateY !== undefined)) === null || _flattenedStyle$trans2 === void 0 ? void 0 : _flattenedStyle$trans2.translateY;
-  React.useEffect(() => {
-    const listener = _ref2 => {
-      let {
-        value
-      } = _ref2;
-      setOverlapping(value < offset);
-    };
-    const sub = translateY === null || translateY === void 0 ? void 0 : translateY.addListener(listener);
-    return () => translateY === null || translateY === void 0 ? void 0 : translateY.removeListener(sub);
-  }, [offset, translateY]);
-  const darkContent = dark ?? !darkTheme;
-  return /*#__PURE__*/React.createElement(_reactNative.StatusBar, {
-    animated: true,
-    barStyle: overlapping && darkContent ? 'dark-content' : 'light-content'
-  });
-}
-//# sourceMappingURL=ModalStatusBarManager.js.map

package/lib/commonjs/views/ModalStatusBarManager.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ModalStatusBarManager","dark","layout","insets","style","darkTheme","useTheme","overlapping","setOverlapping","React","useState","scale","width","offset","top","flattenedStyle","StyleSheet","flatten","translateY","transform","find","s","undefined","useEffect","listener","value","sub","addListener","removeListener","darkContent"],"sourceRoot":"../../../src","sources":["views/ModalStatusBarManager.tsx"],"mappings":";;;;;;AAAA;AACA;AACA;AAAqD;AAAA;AAY9C,SAASA,qBAAqB,OAAyC;EAAA;EAAA,IAAxC;IAAEC,IAAI;IAAEC,MAAM;IAAEC,MAAM;IAAEC;EAAa,CAAC;EAC1E,MAAM;IAAEH,IAAI,EAAEI;EAAU,CAAC,GAAG,IAAAC,gBAAQ,GAAE;EACtC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,IAAI,CAAC;EAE1D,MAAMC,KAAK,GAAG,CAAC,GAAG,EAAE,GAAGT,MAAM,CAACU,KAAK;EACnC,MAAMC,MAAM,GAAG,CAACV,MAAM,CAACW,GAAG,GAAG,EAAE,IAAIH,KAAK;EAExC,MAAMI,cAAc,GAAGC,uBAAU,CAACC,OAAO,CAACb,KAAK,CAAC;EAChD,MAAMc,UAAU,GAAGH,cAAc,aAAdA,cAAc,gDAAdA,cAAc,CAAEI,SAAS,oFAAzB,sBAA2BC,IAAI,CAC/CC,CAAM,IAAKA,CAAC,CAACH,UAAU,KAAKI,SAAS,CACvC,2DAFkB,uBAEhBJ,UAAU;EAEbT,KAAK,CAACc,SAAS,CAAC,MAAM;IACpB,MAAMC,QAAQ,GAAG,SAAkC;MAAA,IAAjC;QAAEC;MAAyB,CAAC;MAC5CjB,cAAc,CAACiB,KAAK,GAAGZ,MAAM,CAAC;IAChC,CAAC;IAED,MAAMa,GAAG,GAAGR,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAES,WAAW,CAACH,QAAQ,CAAC;IAE7C,OAAO,MAAMN,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEU,cAAc,CAACF,GAAG,CAAC;EAC9C,CAAC,EAAE,CAACb,MAAM,EAAEK,UAAU,CAAC,CAAC;EAExB,MAAMW,WAAW,GAAG5B,IAAI,IAAI,CAACI,SAAS;EAEtC,oBACE,oBAAC,sBAAS;IACR,QAAQ;IACR,QAAQ,EAAEE,WAAW,IAAIsB,WAAW,GAAG,cAAc,GAAG;EAAgB,EACxE;AAEN"}

package/lib/module/views/ModalStatusBarManager.js

@@ -1,36 +0,0 @@
-import { useTheme } from '@react-navigation/native';
-import * as React from 'react';
-import { StatusBar, StyleSheet } from 'react-native';
-export function ModalStatusBarManager(_ref) {
-  var _flattenedStyle$trans, _flattenedStyle$trans2;
-  let {
-    dark,
-    layout,
-    insets,
-    style
-  } = _ref;
-  const {
-    dark: darkTheme
-  } = useTheme();
-  const [overlapping, setOverlapping] = React.useState(true);
-  const scale = 1 - 20 / layout.width;
-  const offset = (insets.top - 34) * scale;
-  const flattenedStyle = StyleSheet.flatten(style);
-  const translateY = flattenedStyle === null || flattenedStyle === void 0 ? void 0 : (_flattenedStyle$trans = flattenedStyle.transform) === null || _flattenedStyle$trans === void 0 ? void 0 : (_flattenedStyle$trans2 = _flattenedStyle$trans.find(s => s.translateY !== undefined)) === null || _flattenedStyle$trans2 === void 0 ? void 0 : _flattenedStyle$trans2.translateY;
-  React.useEffect(() => {
-    const listener = _ref2 => {
-      let {
-        value
-      } = _ref2;
-      setOverlapping(value < offset);
-    };
-    const sub = translateY === null || translateY === void 0 ? void 0 : translateY.addListener(listener);
-    return () => translateY === null || translateY === void 0 ? void 0 : translateY.removeListener(sub);
-  }, [offset, translateY]);
-  const darkContent = dark ?? !darkTheme;
-  return /*#__PURE__*/React.createElement(StatusBar, {
-    animated: true,
-    barStyle: overlapping && darkContent ? 'dark-content' : 'light-content'
-  });
-}
-//# sourceMappingURL=ModalStatusBarManager.js.map

package/lib/module/views/ModalStatusBarManager.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useTheme","React","StatusBar","StyleSheet","ModalStatusBarManager","dark","layout","insets","style","darkTheme","overlapping","setOverlapping","useState","scale","width","offset","top","flattenedStyle","flatten","translateY","transform","find","s","undefined","useEffect","listener","value","sub","addListener","removeListener","darkContent"],"sourceRoot":"../../../src","sources":["views/ModalStatusBarManager.tsx"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,EAAEC,UAAU,QAAQ,cAAc;AAYpD,OAAO,SAASC,qBAAqB,OAAyC;EAAA;EAAA,IAAxC;IAAEC,IAAI;IAAEC,MAAM;IAAEC,MAAM;IAAEC;EAAa,CAAC;EAC1E,MAAM;IAAEH,IAAI,EAAEI;EAAU,CAAC,GAAGT,QAAQ,EAAE;EACtC,MAAM,CAACU,WAAW,EAAEC,cAAc,CAAC,GAAGV,KAAK,CAACW,QAAQ,CAAC,IAAI,CAAC;EAE1D,MAAMC,KAAK,GAAG,CAAC,GAAG,EAAE,GAAGP,MAAM,CAACQ,KAAK;EACnC,MAAMC,MAAM,GAAG,CAACR,MAAM,CAACS,GAAG,GAAG,EAAE,IAAIH,KAAK;EAExC,MAAMI,cAAc,GAAGd,UAAU,CAACe,OAAO,CAACV,KAAK,CAAC;EAChD,MAAMW,UAAU,GAAGF,cAAc,aAAdA,cAAc,gDAAdA,cAAc,CAAEG,SAAS,oFAAzB,sBAA2BC,IAAI,CAC/CC,CAAM,IAAKA,CAAC,CAACH,UAAU,KAAKI,SAAS,CACvC,2DAFkB,uBAEhBJ,UAAU;EAEblB,KAAK,CAACuB,SAAS,CAAC,MAAM;IACpB,MAAMC,QAAQ,GAAG,SAAkC;MAAA,IAAjC;QAAEC;MAAyB,CAAC;MAC5Cf,cAAc,CAACe,KAAK,GAAGX,MAAM,CAAC;IAChC,CAAC;IAED,MAAMY,GAAG,GAAGR,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAES,WAAW,CAACH,QAAQ,CAAC;IAE7C,OAAO,MAAMN,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEU,cAAc,CAACF,GAAG,CAAC;EAC9C,CAAC,EAAE,CAACZ,MAAM,EAAEI,UAAU,CAAC,CAAC;EAExB,MAAMW,WAAW,GAAGzB,IAAI,IAAI,CAACI,SAAS;EAEtC,oBACE,oBAAC,SAAS;IACR,QAAQ;IACR,QAAQ,EAAEC,WAAW,IAAIoB,WAAW,GAAG,cAAc,GAAG;EAAgB,EACxE;AAEN"}

package/lib/typescript/src/views/ModalStatusBarManager.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import type { EdgeInsets } from 'react-native-safe-area-context';
-import type { Layout } from '../types';
-type Props = {
-    dark: boolean | undefined;
-    layout: Layout;
-    insets: EdgeInsets;
-    style: any;
-};
-export declare function ModalStatusBarManager({ dark, layout, insets, style }: Props): JSX.Element;
-export {};
-//# sourceMappingURL=ModalStatusBarManager.d.ts.map

package/lib/typescript/src/views/ModalStatusBarManager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalStatusBarManager.d.ts","sourceRoot":"","sources":["../../../../src/views/ModalStatusBarManager.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,eA8B3E"}

package/src/views/ModalStatusBarManager.tsx

@@ -1,45 +0,0 @@
-import { useTheme } from '@react-navigation/native';
-import * as React from 'react';
-import { StatusBar, StyleSheet } from 'react-native';
-import type { EdgeInsets } from 'react-native-safe-area-context';
-
-import type { Layout } from '../types';
-
-type Props = {
-  dark: boolean | undefined;
-  layout: Layout;
-  insets: EdgeInsets;
-  style: any;
-};
-
-export function ModalStatusBarManager({ dark, layout, insets, style }: Props) {
-  const { dark: darkTheme } = useTheme();
-  const [overlapping, setOverlapping] = React.useState(true);
-
-  const scale = 1 - 20 / layout.width;
-  const offset = (insets.top - 34) * scale;
-
-  const flattenedStyle = StyleSheet.flatten(style);
-  const translateY = flattenedStyle?.transform?.find(
-    (s: any) => s.translateY !== undefined
-  )?.translateY;
-
-  React.useEffect(() => {
-    const listener = ({ value }: { value: number }) => {
-      setOverlapping(value < offset);
-    };
-
-    const sub = translateY?.addListener(listener);
-
-    return () => translateY?.removeListener(sub);
-  }, [offset, translateY]);
-
-  const darkContent = dark ?? !darkTheme;
-
-  return (
-    <StatusBar
-      animated
-      barStyle={overlapping && darkContent ? 'dark-content' : 'light-content'}
-    />
-  );
-}