@react-navigation/elements 2.8.0 → 2.8.1

package/lib/module/Lazy.js

@@ -1,20 +1,41 @@
 "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,
-  render
+  visible,
+  children
 }) {
-  const [rendered, setRendered] = React.useState(enabled);
-  React.useLayoutEffect(() => {
-    setImmediate(() => {
-      if (enabled) {
-        setRendered(true);
-      }
+  const [rendered, setRendered] = React.useState(enabled ? visible : false);
+  const shouldRenderInIdle = !(enabled || visible || rendered);
+  React.useEffect(() => {
+    if (shouldRenderInIdle === false) {
+      return;
+    }
+    const id = requestIdleCallback(() => {
+      setRendered(true);
     });
-  }, [enabled]);
+    return () => cancelIdleCallback(id);
+  }, [shouldRenderInIdle]);
+  if (visible && rendered === false) {
+    setRendered(true);
+    return children;
+  }
   if (rendered) {
-    return render();
+    return children;
   }
   return null;
 }

package/lib/module/Lazy.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Lazy","enabled","render","rendered","setRendered","useState","useLayoutEffect","setImmediate"],"sourceRoot":"../../src","sources":["Lazy.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAO9B,OAAO,SAASC,IAAIA,CAAC;EAAEC,OAAO;EAAEC;AAAc,CAAC,EAAE;EAC/C,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGL,KAAK,CAACM,QAAQ,CAACJ,OAAO,CAAC;EAEvDF,KAAK,CAACO,eAAe,CAAC,MAAM;IAC1BC,YAAY,CAAC,MAAM;MACjB,IAAIN,OAAO,EAAE;QACXG,WAAW,CAAC,IAAI,CAAC;MACnB;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACH,OAAO,CAAC,CAAC;EAEb,IAAIE,QAAQ,EAAE;IACZ,OAAOD,MAAM,CAAC,CAAC;EACjB;EAEA,OAAO,IAAI;AACb","ignoreList":[]}
+{"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/typescript/src/Lazy.d.ts

@@ -1,8 +1,31 @@
 import * as React from 'react';
 type Props = {
+    /**
+     * Whether lazy rendering is enabled.
+     */
     enabled: boolean;
-    render: () => React.ReactElement;
+    /**
+     * Whether the component is visible.
+     */
+    visible: boolean;
+    /**
+     * Content to render.
+     */
+    children: React.ReactElement;
 };
-export declare function Lazy({ enabled, render }: Props): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+/**
+ * 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

@@ -1 +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,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,KAAK,CAAC,YAAY,CAAC;CAClC,CAAC;AAEF,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,iFAgB9C"}
+{"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/package.json

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

package/src/Lazy.tsx

@@ -1,23 +1,58 @@
 import * as React from 'react';
 
 type Props = {
+  /**
+   * Whether lazy rendering is enabled.
+   */
   enabled: boolean;
-  render: () => React.ReactElement;
+  /**
+   * Whether the component is visible.
+   */
+  visible: boolean;
+  /**
+   * Content to render.
+   */
+  children: React.ReactElement;
 };
 
-export function Lazy({ enabled, render }: Props) {
-  const [rendered, setRendered] = React.useState(enabled);
+/**
+ * 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);
 
-  React.useLayoutEffect(() => {
-    setImmediate(() => {
-      if (enabled) {
-        setRendered(true);
-      }
+  const shouldRenderInIdle = !(enabled || visible || rendered);
+
+  React.useEffect(() => {
+    if (shouldRenderInIdle === false) {
+      return;
+    }
+
+    const id = requestIdleCallback(() => {
+      setRendered(true);
     });
-  }, [enabled]);
+
+    return () => cancelIdleCallback(id);
+  }, [shouldRenderInIdle]);
+
+  if (visible && rendered === false) {
+    setRendered(true);
+
+    return children;
+  }
 
   if (rendered) {
-    return render();
+    return children;
   }
 
   return null;