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

package/CHANGELOG.md

@@ -9,6 +9,34 @@ Headers are one of:
 
 - `Added`, `Changed`, `Removed`, `Fixed` or `Breaking`.
 
+## [2.1.2]
+
+### Fixed
+
+- Fixes `useNativeDriver` warning on web by [jpaas](https://github.com/jpaas) in [#334](https://github.com/calintamas/react-native-toast-message/pull/334)
+
+## [2.1.1]
+
+### Fixed
+
+- Tapping a View / Button behind the Toast is not possible ([b9d191e](https://github.com/calintamas/react-native-toast-message/commit/b9d191e1dcc4d331fd5159ca9aabd54d7d0ecb97)) (fixes [#282](https://github.com/calintamas/react-native-toast-message/issues/282))
+
+## [2.1.0]
+
+### Fixed
+
+- After a Toast is shown within a Modal, the main instance outside of Modal doesn't work anymore ([#293](https://github.com/calintamas/react-native-toast-message/pull/293))
+- A previously set timer is not cleared when `autoHide` changes from `true` to `false`. This can make a newly shown Toast auto hide (even if it was shown with `autoHide: false`) ([#294](https://github.com/calintamas/react-native-toast-message/pull/294))
+
+  Big thanks go to [jstheoriginal](https://github.com/jstheoriginal) for all the work on fixing the two issues above 🙌.
+
+- Flexbox not working for setting Toast width or alignment ([3400f00](https://github.com/calintamas/react-native-toast-message/commit/3400f0074116f5acb37ca2eb696ea50b0c669ddc))
+
+### Changed
+
+- `BaseToastProps` style types allows passing an array of styles now `style={[styles.one, styles.two]}` ([#243](https://github.com/calintamas/react-native-toast-message/pull/243) was ported to v2)
+- Peer deps no longer require a min version ([e91ed21](https://github.com/calintamas/react-native-toast-message/commit/e91ed21d277d7348b674834765147be752b6abfb))
+
 ## [2.0.2]
 
 ### Fixed

package/lib/src/Toast.d.ts

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

package/lib/src/Toast.js

@@ -7,33 +7,68 @@ const ToastRoot = React.forwardRef((props, ref) => {
     const { show, hide, isVisible, options, data } = useToast({
         defaultOptions
     });
-    React.useImperativeHandle(ref, () => ({
+    // This must use useCallback to ensure the ref doesn't get set to null and then a new ref every render.
+    React.useImperativeHandle(ref, React.useCallback(() => ({
         show,
         hide
-    }));
+    }), [hide, show]));
     return (<ToastUI isVisible={isVisible} options={options} data={data} hide={hide} show={show} config={config}/>);
 });
-const refs = [];
-export function Toast({ nestingLevel = 0, ...rest }) {
+let refs = [];
+/**
+ * Adds a ref to the end of the array, which will be used to show the toasts until its ref becomes null.
+ *
+ * @param newRef the new ref, which must be stable for the life of the Toast instance.
+ */
+function addNewRef(newRef) {
+    refs.push({
+        current: newRef
+    });
+}
+/**
+ * Removes the passed in ref from the file-level refs array using a strict equality check.
+ *
+ * @param oldRef the exact ref object to remove from the refs array.
+ */
+function removeOldRef(oldRef) {
+    refs = refs.filter((r) => r.current !== oldRef);
+}
+export function Toast(props) {
+    const toastRef = React.useRef(null);
+    /*
+      This must use `useCallback` to ensure the ref doesn't get set to null and then a new ref every render.
+      Failure to do so will cause whichever Toast *renders or re-renders* last to be the instance that is used,
+      rather than being the Toast that was *mounted* last.
+    */
+    const setRef = React.useCallback((ref) => {
+        // Since we know there's a ref, we'll update `refs` to use it.
+        if (ref) {
+            // store the ref in this toast instance to be able to remove it from the array later when the ref becomes null.
+            toastRef.current = ref;
+            addNewRef(ref);
+        }
+        else {
+            // remove the this toast's ref, wherever it is in the array.
+            removeOldRef(toastRef.current);
+        }
+    }, []);
     return (<LoggerProvider enableLogs={false}>
-      <ToastRoot ref={(ref) => {
-            refs[nestingLevel] = {
-                current: ref
-            };
-        }} {...rest}/>
+      <ToastRoot ref={setRef} {...props}/>
     </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)
+ * For example, a Toast inside a `Modal`, would have had its ref set later than a Toast inside App's Root.
+ * Therefore, the library knows that it is currently visible on top of the App's Root
+ * and will thus use the `Modal`'s Toast when showing/hiding.
+ *
  * ```js
  * <>
- *  <Toast nestingLevel={0} />
+ *  <Toast />
  *  <Modal>
- *    <Toast nestingLevel={1} />
+ *    <Toast />
  *  </Modal>
  * </>
  * ```

package/lib/src/components/AnimatedContainer.js

@@ -72,7 +72,10 @@ export function AnimatedContainer({ children, isVisible, position, topOffset, bo
         const newAnimationValue = isVisible ? 1 : 0;
         animate(newAnimationValue);
     }, [animate, isVisible]);
-    return (<Animated.View testID={getTestId('AnimatedContainer')} onLayout={computeViewDimensions} style={[styles.base, styles[position], animationStyles]} {...panResponder.panHandlers}>
+    return (<Animated.View testID={getTestId('AnimatedContainer')} onLayout={computeViewDimensions} style={[styles.base, styles[position], animationStyles]} 
+    // This container View is never the target of touch events but its subviews can be.
+    // By doing this, tapping buttons behind the Toast is allowed
+    pointerEvents='box-none' {...panResponder.panHandlers}>
       {children}
     </Animated.View>);
 }

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

@@ -1,9 +1,10 @@
 export declare const styles: {
     base: {
         position: "absolute";
+        left: number;
+        right: number;
         alignItems: "center";
         justifyContent: "center";
-        alignSelf: "center";
     };
     top: {
         top: number;

package/lib/src/components/AnimatedContainer.styles.js

@@ -2,9 +2,10 @@ import { StyleSheet } from 'react-native';
 export const styles = StyleSheet.create({
     base: {
         position: 'absolute',
+        left: 0,
+        right: 0,
         alignItems: 'center',
-        justifyContent: 'center',
-        alignSelf: 'center'
+        justifyContent: 'center'
     },
     top: {
         top: 0

package/lib/src/hooks/useSlideAnimation.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Animated } from 'react-native';
+import { Animated, Platform } from 'react-native';
 import { additiveInverseArray } from '../utils/array';
 import { useKeyboard } from './useKeyboard';
 export function translateYOutputRangeFor({ position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset }) {
@@ -9,13 +9,14 @@ export function translateYOutputRangeFor({ position, height, topOffset, bottomOf
     const outputRange = position === 'bottom' ? additiveInverseArray(range) : range;
     return outputRange;
 }
+const useNativeDriver = Platform.select({ native: true, default: false });
 export function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset }) {
     const animatedValue = React.useRef(new Animated.Value(0));
     const { keyboardHeight } = useKeyboard();
     const animate = React.useCallback((toValue) => {
         Animated.spring(animatedValue.current, {
             toValue,
-            useNativeDriver: true,
+            useNativeDriver,
             friction: 8
         }).start();
     }, []);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextStyle, TouchableOpacityProps, ViewStyle } from 'react-native';
+import { StyleProp, TextProps, TextStyle, TouchableOpacityProps, ViewProps, ViewStyle } from 'react-native';
 export declare type ReactChildren = React.ReactNode;
 export declare type ToastType = string;
 export declare type ToastPosition = 'top' | 'bottom';
@@ -74,16 +74,16 @@ export declare type BaseToastProps = {
     text2?: string;
     onPress?: () => void;
     activeOpacity?: number;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     touchableContainerProps?: TouchableOpacityProps;
-    contentContainerStyle?: ViewStyle;
-    contentContainerProps?: ViewStyle;
-    text1Style?: TextStyle;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    contentContainerProps?: ViewProps;
+    text1Style?: StyleProp<TextStyle>;
     text1NumberOfLines?: number;
-    text1Props?: TextStyle;
-    text2Style?: TextStyle;
+    text1Props?: TextProps;
+    text2Style?: StyleProp<TextStyle>;
     text2NumberOfLines?: number;
-    text2Props?: TextStyle;
+    text2Props?: TextProps;
     renderLeadingIcon?: () => React.ReactNode;
     renderTrailingIcon?: () => React.ReactNode;
 };
@@ -110,40 +110,6 @@ export declare type ToastRef = {
  * 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/lib/src/useToast.js

@@ -41,9 +41,6 @@ export function useToast({ defaultOptions }) {
     const show = React.useCallback((params) => {
         log(`Showing with params: ${JSON.stringify(params)}`);
         const { text1 = DEFAULT_DATA.text1, text2 = DEFAULT_DATA.text2, type = initialOptions.type, position = initialOptions.position, autoHide = initialOptions.autoHide, visibilityTime = initialOptions.visibilityTime, topOffset = initialOptions.topOffset, bottomOffset = initialOptions.bottomOffset, keyboardOffset = initialOptions.keyboardOffset, onShow = initialOptions.onShow, onHide = initialOptions.onHide, onPress = initialOptions.onPress, props = initialOptions.props } = params;
-        // TODO: validate input
-        // TODO: use a queue when Toast is already visible
-        setIsVisible(true);
         setData({
             text1,
             text2
@@ -61,14 +58,22 @@ export function useToast({ defaultOptions }) {
             onPress,
             props
         }));
+        // TODO: validate input
+        // TODO: use a queue when Toast is already visible
+        setIsVisible(true);
         onShow();
     }, [initialOptions, log]);
     React.useEffect(() => {
         const { autoHide } = options;
-        if (isVisible && autoHide) {
-            startTimer();
+        if (isVisible) {
+            if (autoHide) {
+                startTimer();
+            }
+            else {
+                clearTimer();
+            }
         }
-    }, [isVisible, options, startTimer]);
+    }, [isVisible, options, startTimer, clearTimer]);
     return {
         isVisible,
         data,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-toast-message",
-  "version": "2.1.0-beta.2",
+  "version": "2.1.2",
   "description": "Toast message component for React Native",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -22,7 +22,8 @@
     "lint": "./node_modules/.bin/eslint --fix",
     "lint-staged": "./node_modules/.bin/lint-staged",
     "test": "./node_modules/.bin/jest",
-    "yalc:push": "yarn build && yalc publish --push"
+    "yalc:push": "yarn build && yalc publish --push",
+    "quality": "yarn lint && tsc --noEmit"
   },
   "author": "Calin Tamas <calintamas2@gmail.com>",
   "license": "MIT",
@@ -30,15 +31,15 @@
     "@babel/core": "^7.15.8",
     "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/react-native": "^8.0.0",
+    "@testing-library/react-native": "^9.0.0",
     "@types/jest": "^27.0.1",
     "@types/react-native": "^0.66.2",
-    "eslint-config-backpacker-react-ts": "^0.1.0",
+    "eslint-config-backpacker-react-ts": "^0.3.0",
     "husky": "^7.0.2",
     "import-sort-style-module": "^6.0.0",
     "jest": "^27.1.1",
-    "lint-staged": "^11.1.2",
-    "metro-react-native-babel-preset": "^0.66.2",
+    "lint-staged": "^12.1.2",
+    "metro-react-native-babel-preset": "^0.67.0",
     "prettier": "^2.4.1",
     "prettier-plugin-import-sort": "^0.0.7",
     "react-test-renderer": "^17.0.2",
@@ -46,8 +47,8 @@
     "yalc": "^1.0.0-pre.53"
   },
   "peerDependencies": {
-    "react": ">=17.0.2",
-    "react-native": ">=0.64.2"
+    "react": "*",
+    "react-native": "*"
   },
   "importSort": {
     ".js, .jsx, .ts, .tsx": {