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

package/CHANGELOG.md

@@ -9,6 +9,18 @@ Headers are one of:
 
 - `Added`, `Changed`, `Removed`, `Fixed` or `Breaking`.
 
+## [2.0.2]
+
+### Fixed
+
+- Fast swipe up re-creates the toast [#280](https://github.com/calintamas/react-native-toast-message/issues/280)
+
+## [2.0.1]
+
+### Fixed
+
+- `ansi-regex` vulnerability by upgrading to `@testing-library/jest-native v4.0.4` ([#277](https://github.com/calintamas/react-native-toast-message/pull/277))
+
 ## [2.0.0]
 
 ### Breaking

package/README.md

@@ -3,7 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/react-native-toast-message)](https://www.npmjs.com/package/react-native-toast-message)
 [![npm downloads](https://img.shields.io/npm/dw/react-native-toast-message)](https://www.npmjs.com/package/react-native-toast-message)
 [![Build](https://github.com/calintamas/react-native-toast-message/workflows/tests/badge.svg)](https://github.com/calintamas/react-native-toast-message/actions?query=workflow%3Atests)
-[![Coverage Status](https://coveralls.io/repos/github/calintamas/react-native-toast-message/badge.svg)](https://coveralls.io/github/calintamas/react-native-toast-message)
+[![Coverage Status](https://coveralls.io/repos/github/calintamas/react-native-toast-message/badge.svg?branch=master)](https://coveralls.io/github/calintamas/react-native-toast-message?branch=master)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
 Animated toast message component for React Native.

package/lib/src/Toast.d.ts

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

package/lib/src/Toast.js

@@ -13,15 +13,42 @@ const ToastRoot = React.forwardRef((props, ref) => {
     }));
     return (<ToastUI isVisible={isVisible} options={options} data={data} hide={hide} show={show} config={config}/>);
 });
-const toastRef = React.createRef();
-export function Toast(props) {
+const refs = [];
+export function Toast({ nestingLevel = 0, ...rest }) {
     return (<LoggerProvider enableLogs={false}>
-      <ToastRoot ref={toastRef} {...props}/>
+      <ToastRoot ref={(ref) => {
+            refs[nestingLevel] = {
+                current: ref
+            };
+        }} {...rest}/>
     </LoggerProvider>);
 }
+/**
+ * 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() {
+    const reversePriority = [...refs].reverse();
+    const activeRef = reversePriority.find((ref) => ref?.current !== null);
+    if (!activeRef) {
+        return null;
+    }
+    return activeRef.current;
+}
 Toast.show = (params) => {
-    toastRef.current?.show(params);
+    getRef()?.show(params);
 };
 Toast.hide = (params) => {
-    toastRef.current?.hide(params);
+    getRef()?.hide(params);
 };

package/lib/src/components/AnimatedContainer.d.ts

@@ -11,6 +11,12 @@ export declare type AnimatedContainerProps = {
     onHide: () => void;
     onRestorePosition?: () => void;
 };
+/**
+ * Produces a positive damping value.
+ *
+ * To note: `moveY` becomes negative when going off-screen. By making sure the value
+ * produced is always positive, we avoid issues like: https://github.com/calintamas/react-native-toast-message/issues/280
+ */
 export declare function dampingFor(gesture: PanResponderGestureState, position: ToastPosition): number;
 export declare function animatedValueFor(gesture: PanResponderGestureState, position: ToastPosition, damping: number): number;
 export declare function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, onHide, onRestorePosition }: AnimatedContainerProps): JSX.Element;

package/lib/src/components/AnimatedContainer.js

@@ -6,15 +6,21 @@ import { noop } from '../utils/func';
 import { bound } from '../utils/number';
 import { getTestId } from '../utils/test-id';
 import { styles } from './AnimatedContainer.styles';
+/**
+ * Produces a positive damping value.
+ *
+ * To note: `moveY` becomes negative when going off-screen. By making sure the value
+ * produced is always positive, we avoid issues like: https://github.com/calintamas/react-native-toast-message/issues/280
+ */
 export function dampingFor(gesture, position) {
     const { moveY } = gesture;
     switch (position) {
         case 'bottom': {
             const { height: screenHeight } = Dimensions.get('screen');
-            return screenHeight - moveY;
+            return Math.abs(screenHeight - moveY);
         }
         case 'top':
-            return moveY;
+            return Math.abs(moveY);
         default:
             throw new Error(`Toast position: ${position} not implemented`);
     }

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

@@ -101,11 +101,49 @@ export declare type ToastConfigParams<Props> = {
 export declare type ToastConfig = {
     [key: string]: (params: ToastConfigParams<any>) => React.ReactNode;
 };
+export declare type ToastRef = {
+    show: (params: ToastShowParams) => void;
+    hide: (params: ToastHideParams) => void;
+};
 /**
  * `props` that can be set on the Toast instance.
  * They act as defaults for all Toasts that are shown.
  */
 export declare type ToastProps = {
+    /**
+     * 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
+     * <>
+     *  <Toast />
+     *  <Modal>
+     *    <Toast nestingLevel={1} />
+     *  </Modal>
+     * </>
+     * ```
+     *
+     * If you have nested Modals, the `nestingLevel` prop needs to be adjusted accordingly:
+     *
+     * ```js
+     * <>
+     *  <Toast />
+     *  <Modal>
+     *    <Toast nestingLevel={1} />
+     *    <Modal>
+     *      <Toast nestingLevel={2} />
+     *    </Modal>
+     *  </Modal>
+     * </>
+     * ```
+     */
+    nestingLevel?: number;
     /**
      * Layout configuration for custom Toast types
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-toast-message",
-  "version": "2.0.0",
+  "version": "2.1.0-beta.2",
   "description": "Toast message component for React Native",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -21,13 +21,14 @@
     "prettier": "./node_modules/.bin/prettier --write",
     "lint": "./node_modules/.bin/eslint --fix",
     "lint-staged": "./node_modules/.bin/lint-staged",
-    "test": "./node_modules/.bin/jest"
+    "test": "./node_modules/.bin/jest",
+    "yalc:push": "yarn build && yalc publish --push"
   },
   "author": "Calin Tamas <calintamas2@gmail.com>",
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.15.8",
-    "@testing-library/jest-native": "^4.0.2",
+    "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/react-native": "^8.0.0",
     "@types/jest": "^27.0.1",
@@ -41,7 +42,8 @@
     "prettier": "^2.4.1",
     "prettier-plugin-import-sort": "^0.0.7",
     "react-test-renderer": "^17.0.2",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.3",
+    "yalc": "^1.0.0-pre.53"
   },
   "peerDependencies": {
     "react": ">=17.0.2",