react-native-toast-message 2.0.2 → 2.1.1

package/CHANGELOG.md

@@ -9,6 +9,28 @@ Headers are one of:
 
 - `Added`, `Changed`, `Removed`, `Fixed` or `Breaking`.
 
+## [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/README.md

@@ -33,3 +33,9 @@ Animated toast message component for React Native.
 ## License
 
 MIT
+
+## Support
+
+Not a requirement in any way, but if this package helped you (or your company) and you feel like supporting my future work:
+
+<a href="https://buymeacoffee.com/calintamas"><img src="https://user-images.githubusercontent.com/9104454/143683074-69dc6a53-3e54-4a2c-8dcf-c1e27448a2f4.png" alt="Buy me a coffee" width="150px" /></a>

package/lib/src/Toast.js

@@ -7,21 +7,83 @@ 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 toastRef = React.createRef();
+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={toastRef} {...props}/>
+      <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 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 />
+ *  <Modal>
+ *    <Toast />
+ *  </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.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/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;
 };
@@ -101,6 +101,10 @@ 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.

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.0.2",
+  "version": "2.1.1",
   "description": "Toast message component for React Native",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -21,7 +21,9 @@
     "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",
+    "quality": "yarn lint && tsc --noEmit"
   },
   "author": "Calin Tamas <calintamas2@gmail.com>",
   "license": "MIT",
@@ -32,20 +34,21 @@
     "@testing-library/react-native": "^8.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.2.0",
     "husky": "^7.0.2",
     "import-sort-style-module": "^6.0.0",
     "jest": "^27.1.1",
-    "lint-staged": "^11.1.2",
+    "lint-staged": "^12.1.2",
     "metro-react-native-babel-preset": "^0.66.2",
     "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",
-    "react-native": ">=0.64.2"
+    "react": "*",
+    "react-native": "*"
   },
   "importSort": {
     ".js, .jsx, .ts, .tsx": {