react-native-toast-message 2.1.0-beta.1 → 2.1.0-beta.2

package/lib/src/Toast.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
-import { ToastProps, ToastRef, ToastShowParams } from './types';
-export declare function Toast(props: ToastProps): JSX.Element;
+import { ToastProps, ToastShowParams } from './types';
+export declare function Toast({ nestingLevel, ...rest }: ToastProps): JSX.Element;
 export declare namespace Toast {
-    var setRootRef: (ref: ToastRef) => void;
-    var setModalRef: (ref: ToastRef) => void;
     var show: (params: ToastShowParams) => void;
     var hide: (params?: void | undefined) => void;
 }

package/lib/src/Toast.js

@@ -13,29 +13,38 @@ const ToastRoot = React.forwardRef((props, ref) => {
     }));
     return (<ToastUI isVisible={isVisible} options={options} data={data} hide={hide} show={show} config={config}/>);
 });
-const rootRef = {
-    current: null
-};
-const modalRef = {
-    current: null
-};
-export function Toast(props) {
-    const { setRef } = props;
+const refs = [];
+export function Toast({ nestingLevel = 0, ...rest }) {
     return (<LoggerProvider enableLogs={false}>
-      <ToastRoot ref={setRef} {...props}/>
+      <ToastRoot ref={(ref) => {
+            refs[nestingLevel] = {
+                current: ref
+            };
+        }} {...rest}/>
     </LoggerProvider>);
 }
-Toast.setRootRef = (ref) => {
-    rootRef.current = ref;
-};
-Toast.setModalRef = (ref) => {
-    modalRef.current = ref;
-};
 /**
- * Get Toast instance ref, by priority
+ * Get the active Toast instance `ref`, by priority.
+ * The "highest" Toast in the `View` hierarchy has the highest priority.
+ *
+ * For example, a Toast inside a `Modal`, would have a higher priority than a Toast inside App's Root
+ * (which has a default `nestingLevel` of 0)
+ * ```js
+ * <>
+ *  <Toast nestingLevel={0} />
+ *  <Modal>
+ *    <Toast nestingLevel={1} />
+ *  </Modal>
+ * </>
+ * ```
  */
 function getRef() {
-    return modalRef.current || rootRef.current;
+    const reversePriority = [...refs].reverse();
+    const activeRef = reversePriority.find((ref) => ref?.current !== null);
+    if (!activeRef) {
+        return null;
+    }
+    return activeRef.current;
 }
 Toast.show = (params) => {
     getRef()?.show(params);

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

@@ -111,20 +111,39 @@ export declare type ToastRef = {
  */
 export declare type ToastProps = {
     /**
-     * Set a ref to your Toast instance using one of the provided methods:
-     * `Toast.setRootRef` or `Toast.setModalRef`
+     * Nesting level for the Toast instance.
+     * The "higher" a Toast instance is in the `View` hierarchy, the bigger its nesting level value.
+     * Default `nestingLevel = 0`.
+     *
+     * By setting this prop, you can show Toasts inside Modals, no matter how nested they would be.
+     *
+     * For example, a Toast inside a `Modal`, would have a bigger `nestingLevel`
+     * than a Toast inside App's Root (which has the default `nestingLevel` of 0).
      *
      * ```js
-     * // To set a ref for the Toast rendered in your app root
-     * <Toast setRef={Toast.setRootRef} />
+     * <>
+     *  <Toast />
+     *  <Modal>
+     *    <Toast nestingLevel={1} />
+     *  </Modal>
+     * </>
      * ```
      *
+     * If you have nested Modals, the `nestingLevel` prop needs to be adjusted accordingly:
+     *
      * ```js
-     * // To set a ref for the Toast rendered in a Modal
-     * <Toast setRef={Toast.setModalRef} />
+     * <>
+     *  <Toast />
+     *  <Modal>
+     *    <Toast nestingLevel={1} />
+     *    <Modal>
+     *      <Toast nestingLevel={2} />
+     *    </Modal>
+     *  </Modal>
+     * </>
      * ```
      */
-    setRef: (ref: ToastRef) => void;
+    nestingLevel?: number;
     /**
      * Layout configuration for custom Toast types
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-toast-message",
-  "version": "2.1.0-beta.1",
+  "version": "2.1.0-beta.2",
   "description": "Toast message component for React Native",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",