@react-navigation/elements 2.7.1 → 2.8.1

package/lib/module/Lazy.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import * as React from 'react';
+/**
+ * Render content lazily based on visibility.
+ *
+ * When enabled:
+ * - If content is visible, it will render immediately
+ * - If content is not visible, it won't render until it becomes visible
+ *
+ * Otherwise:
+ * - If content is visible, it will render immediately
+ * - If content is not visible, it will defer rendering until idle
+ *
+ * Once rendered, the content remains rendered.
+ */
+export function Lazy({
+  enabled,
+  visible,
+  children
+}) {
+  const [rendered, setRendered] = React.useState(enabled ? visible : false);
+  const shouldRenderInIdle = !(enabled || visible || rendered);
+  React.useEffect(() => {
+    if (shouldRenderInIdle === false) {
+      return;
+    }
+    const id = requestIdleCallback(() => {
+      setRendered(true);
+    });
+    return () => cancelIdleCallback(id);
+  }, [shouldRenderInIdle]);
+  if (visible && rendered === false) {
+    setRendered(true);
+    return children;
+  }
+  if (rendered) {
+    return children;
+  }
+  return null;
+}
+//# sourceMappingURL=Lazy.js.map

package/lib/module/Lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Lazy","enabled","visible","children","rendered","setRendered","useState","shouldRenderInIdle","useEffect","id","requestIdleCallback","cancelIdleCallback"],"sourceRoot":"../../src","sources":["Lazy.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAiB9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,IAAIA,CAAC;EAAEC,OAAO;EAAEC,OAAO;EAAEC;AAAgB,CAAC,EAAE;EAC1D,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGN,KAAK,CAACO,QAAQ,CAACL,OAAO,GAAGC,OAAO,GAAG,KAAK,CAAC;EAEzE,MAAMK,kBAAkB,GAAG,EAAEN,OAAO,IAAIC,OAAO,IAAIE,QAAQ,CAAC;EAE5DL,KAAK,CAACS,SAAS,CAAC,MAAM;IACpB,IAAID,kBAAkB,KAAK,KAAK,EAAE;MAChC;IACF;IAEA,MAAME,EAAE,GAAGC,mBAAmB,CAAC,MAAM;MACnCL,WAAW,CAAC,IAAI,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,MAAMM,kBAAkB,CAACF,EAAE,CAAC;EACrC,CAAC,EAAE,CAACF,kBAAkB,CAAC,CAAC;EAExB,IAAIL,OAAO,IAAIE,QAAQ,KAAK,KAAK,EAAE;IACjCC,WAAW,CAAC,IAAI,CAAC;IAEjB,OAAOF,QAAQ;EACjB;EAEA,IAAIC,QAAQ,EAAE;IACZ,OAAOD,QAAQ;EACjB;EAEA,OAAO,IAAI;AACb","ignoreList":[]}

package/lib/module/index.js

@@ -22,6 +22,7 @@ export { HeaderTitle } from "./Header/HeaderTitle.js";
 export { useHeaderHeight } from "./Header/useHeaderHeight.js";
 export { getLabel } from "./Label/getLabel.js";
 export { Label } from "./Label/Label.js";
+export { Lazy } from "./Lazy.js";
 export { MissingIcon } from "./MissingIcon.js";
 export { PlatformPressable } from "./PlatformPressable.js";
 export { ResourceSavingView } from "./ResourceSavingView.js";

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["backIcon","backIconMask","clearIcon","closeIcon","searchIcon","Background","Badge","Button","getDefaultSidebarWidth","getDefaultHeaderHeight","getHeaderTitle","Header","HeaderBackButton","HeaderBackContext","HeaderBackground","HeaderButton","HeaderHeightContext","HeaderShownContext","HeaderTitle","useHeaderHeight","getLabel","Label","MissingIcon","PlatformPressable","ResourceSavingView","SafeAreaProviderCompat","Screen","Text","useFrameSize","Assets"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,QAAQ,MAAM,wBAAwB;AAC7C,OAAOC,YAAY,MAAM,6BAA6B;AACtD,OAAOC,SAAS,MAAM,yBAAyB;AAC/C,OAAOC,SAAS,MAAM,yBAAyB;AAC/C,OAAOC,UAAU,MAAM,0BAA0B;AAEjD,SAASC,UAAU,QAAQ,iBAAc;AACzC,SAASC,KAAK,QAAQ,YAAS;AAC/B,SAASC,MAAM,QAAQ,aAAU;AACjC,SAASC,sBAAsB,QAAQ,6BAA0B;AACjE,SAASC,sBAAsB,QAAQ,oCAAiC;AACxE,SAASC,cAAc,QAAQ,4BAAyB;AACxD,SAASC,MAAM,QAAQ,oBAAiB;AACxC,SAASC,gBAAgB,QAAQ,8BAA2B;AAC5D,SAASC,iBAAiB,QAAQ,+BAA4B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA2B;AAC5D,SAASC,YAAY,QAAQ,0BAAuB;AACpD,SAASC,mBAAmB,QAAQ,iCAA8B;AAClE,SAASC,kBAAkB,QAAQ,gCAA6B;AAChE,SAASC,WAAW,QAAQ,yBAAsB;AAClD,SAASC,eAAe,QAAQ,6BAA0B;AAC1D,SAASC,QAAQ,QAAQ,qBAAkB;AAC3C,SAASC,KAAK,QAAQ,kBAAe;AACrC,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,iBAAiB,QAAQ,wBAAqB;AACvD,SAASC,kBAAkB,QAAQ,yBAAsB;AACzD,SAASC,sBAAsB,QAAQ,6BAA0B;AACjE,SAASC,MAAM,QAAQ,aAAU;AACjC,SAASC,IAAI,QAAQ,WAAQ;AAC7B,SAASC,YAAY,QAAQ,mBAAgB;AAE7C,OAAO,MAAMC,MAAM,GAAG,CACpB7B,QAAQ,EACRC,YAAY,EACZG,UAAU,EACVD,SAAS,EACTD,SAAS,CACV;AAED,cAAc,YAAS","ignoreList":[]}
+{"version":3,"names":["backIcon","backIconMask","clearIcon","closeIcon","searchIcon","Background","Badge","Button","getDefaultSidebarWidth","getDefaultHeaderHeight","getHeaderTitle","Header","HeaderBackButton","HeaderBackContext","HeaderBackground","HeaderButton","HeaderHeightContext","HeaderShownContext","HeaderTitle","useHeaderHeight","getLabel","Label","Lazy","MissingIcon","PlatformPressable","ResourceSavingView","SafeAreaProviderCompat","Screen","Text","useFrameSize","Assets"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,QAAQ,MAAM,wBAAwB;AAC7C,OAAOC,YAAY,MAAM,6BAA6B;AACtD,OAAOC,SAAS,MAAM,yBAAyB;AAC/C,OAAOC,SAAS,MAAM,yBAAyB;AAC/C,OAAOC,UAAU,MAAM,0BAA0B;AAEjD,SAASC,UAAU,QAAQ,iBAAc;AACzC,SAASC,KAAK,QAAQ,YAAS;AAC/B,SAASC,MAAM,QAAQ,aAAU;AACjC,SAASC,sBAAsB,QAAQ,6BAA0B;AACjE,SAASC,sBAAsB,QAAQ,oCAAiC;AACxE,SAASC,cAAc,QAAQ,4BAAyB;AACxD,SAASC,MAAM,QAAQ,oBAAiB;AACxC,SAASC,gBAAgB,QAAQ,8BAA2B;AAC5D,SAASC,iBAAiB,QAAQ,+BAA4B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA2B;AAC5D,SAASC,YAAY,QAAQ,0BAAuB;AACpD,SAASC,mBAAmB,QAAQ,iCAA8B;AAClE,SAASC,kBAAkB,QAAQ,gCAA6B;AAChE,SAASC,WAAW,QAAQ,yBAAsB;AAClD,SAASC,eAAe,QAAQ,6BAA0B;AAC1D,SAASC,QAAQ,QAAQ,qBAAkB;AAC3C,SAASC,KAAK,QAAQ,kBAAe;AACrC,SAASC,IAAI,QAAQ,WAAQ;AAC7B,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,iBAAiB,QAAQ,wBAAqB;AACvD,SAASC,kBAAkB,QAAQ,yBAAsB;AACzD,SAASC,sBAAsB,QAAQ,6BAA0B;AACjE,SAASC,MAAM,QAAQ,aAAU;AACjC,SAASC,IAAI,QAAQ,WAAQ;AAC7B,SAASC,YAAY,QAAQ,mBAAgB;AAE7C,OAAO,MAAMC,MAAM,GAAG,CACpB9B,QAAQ,EACRC,YAAY,EACZG,UAAU,EACVD,SAAS,EACTD,SAAS,CACV;AAED,cAAc,YAAS","ignoreList":[]}

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+type Props = {
+    /**
+     * Whether lazy rendering is enabled.
+     */
+    enabled: boolean;
+    /**
+     * Whether the component is visible.
+     */
+    visible: boolean;
+    /**
+     * Content to render.
+     */
+    children: React.ReactElement;
+};
+/**
+ * Render content lazily based on visibility.
+ *
+ * When enabled:
+ * - If content is visible, it will render immediately
+ * - If content is not visible, it won't render until it becomes visible
+ *
+ * Otherwise:
+ * - If content is visible, it will render immediately
+ * - If content is not visible, it will defer rendering until idle
+ *
+ * Once rendered, the content remains rendered.
+ */
+export declare function Lazy({ enabled, visible, children }: Props): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export {};
+//# sourceMappingURL=Lazy.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lazy.d.ts","sourceRoot":"","sources":["../../../src/Lazy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,KAAK,GAAG;IACX;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,KAAK,iFA4BzD"}

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

@@ -15,6 +15,7 @@ export { HeaderTitle } from './Header/HeaderTitle';
 export { useHeaderHeight } from './Header/useHeaderHeight';
 export { getLabel } from './Label/getLabel';
 export { Label } from './Label/Label';
+export { Lazy } from './Lazy';
 export { MissingIcon } from './MissingIcon';
 export { PlatformPressable } from './PlatformPressable';
 export { ResourceSavingView } from './ResourceSavingView';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,eAAO,MAAM,MAAM,OAMlB,CAAC;AAEF,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,eAAO,MAAM,MAAM,OAMlB,CAAC;AAEF,cAAc,SAAS,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "2.7.1",
+  "version": "2.8.1",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -91,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "25c616e84c388f8f27f1be8e2981bb0780b5206d"
+  "gitHead": "85fa1e22e5b9af9004354ae7f74cc7d0a0fa6009"
 }

package/src/Lazy.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+type Props = {
+  /**
+   * Whether lazy rendering is enabled.
+   */
+  enabled: boolean;
+  /**
+   * Whether the component is visible.
+   */
+  visible: boolean;
+  /**
+   * Content to render.
+   */
+  children: React.ReactElement;
+};
+
+/**
+ * Render content lazily based on visibility.
+ *
+ * When enabled:
+ * - If content is visible, it will render immediately
+ * - If content is not visible, it won't render until it becomes visible
+ *
+ * Otherwise:
+ * - If content is visible, it will render immediately
+ * - If content is not visible, it will defer rendering until idle
+ *
+ * Once rendered, the content remains rendered.
+ */
+export function Lazy({ enabled, visible, children }: Props) {
+  const [rendered, setRendered] = React.useState(enabled ? visible : false);
+
+  const shouldRenderInIdle = !(enabled || visible || rendered);
+
+  React.useEffect(() => {
+    if (shouldRenderInIdle === false) {
+      return;
+    }
+
+    const id = requestIdleCallback(() => {
+      setRendered(true);
+    });
+
+    return () => cancelIdleCallback(id);
+  }, [shouldRenderInIdle]);
+
+  if (visible && rendered === false) {
+    setRendered(true);
+
+    return children;
+  }
+
+  if (rendered) {
+    return children;
+  }
+
+  return null;
+}

package/src/index.tsx

@@ -21,6 +21,7 @@ export { HeaderTitle } from './Header/HeaderTitle';
 export { useHeaderHeight } from './Header/useHeaderHeight';
 export { getLabel } from './Label/getLabel';
 export { Label } from './Label/Label';
+export { Lazy } from './Lazy';
 export { MissingIcon } from './MissingIcon';
 export { PlatformPressable } from './PlatformPressable';
 export { ResourceSavingView } from './ResourceSavingView';