Merge branch 'master' of https://github.com/backpackapp-io/react-native-toast

Author: nickdebaise

README.md

@@ -20,6 +20,8 @@ I know what you might be thinking (*jeez, another toast library?*). Trust me her
 - **Customizable** (custom styles, dimensions, duration, and even create your own component to be used in the toast)
 - Add support for **promises** <-- Really! Call `toast.promise(my_promise)` and watch react-native-toast work its magic, automatically updating the toast with a custom message on success -- or an error message on reject.
 - Runs on **web**
+- Support for native modals
+- Callbacks for onPress, onShow, and onHide
 
 # Getting Started
 
@@ -173,6 +175,49 @@ When a toast is pressed, this callback will fire, returning the toast object tha
 onToastPress?: (toast: T) => void;
 ```
 
+#### providerKey (`string`)  _<font size = 2>(optional)</font>_
+Provide the Toasts component with a providerKey to conditionally render toasts in a component. Useful for rendering toasts in native modals.
+```js
+// Component in native modal
+<Toasts providerKey="MODAL::1" />
+
+//...
+// Root component
+<Toasts /> //has default providerKey of DEFAULT
+
+//...
+// Call toast in root modal
+
+const id = toast("Hello from root modal") //default providerKey of DEFAULT
+
+// Native modal becomes visible
+const id = toast("Hello from native modal", {providerKey: "MODAL::1"})
+//Now, toast is shown only in native modal
+```
+
+If you want to persist toasts across components (i.e. when you open/close a modal and want to keep the same toasts), your toasts should be assigned a providerKey of "PERSISTS".
+
+```js
+toast("Message...", {providerKey: "PERSISTS"})
+```
+
+Or, if you cannot do so, you can update each toast manually.
+
+```js
+const { toasts } = useToasterStore(); //Note, no provider key passed in
+
+useEffect(() => {
+  toasts.forEach((t) => {
+    toast(t.message, {
+      ...t,
+      providerKey: isModalVisible ? 'MODAL::1' : 'DEFAULT', //Switch provider key here
+    });
+  });
+}, [isModalVisible]);
+```
+
+
+
 ### Example
 ```
 <Toasts
@@ -449,4 +494,3 @@ Made with [create-react-native-library](https://github.com/callstack/react-nativ
 - Add unit tests for Components and hooks
 - Allow theming in `<Toasts />`
 - Queue manager
-- Explore native modal fixes

example/package.json

@@ -18,6 +18,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.71.8",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-modal": "^13.0.1",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-web": "~0.18.11",

example/src/App.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { FunctionComponent, useState } from 'react';
+import { FunctionComponent, useCallback, useState } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import {
+  Button,
   Pressable,
   ScrollView,
   Switch,
@@ -11,6 +12,7 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native';
+import Modal from 'react-native-modal';
 
 import { Toasts } from '../../src/components/Toasts';
 import { toast } from '../../src/headless';
@@ -21,6 +23,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 export default function App() {
   const { width: screenWidth } = useWindowDimensions();
   const isSystemDarkMode = useColorScheme() === 'dark';
+  const [isModalVisible, setModalVisible] = useState<boolean>(false);
 
   const [isDarkMode, setIsUserDarkMode] = useState(isSystemDarkMode);
   const [position, setPosition] = useState(ToastPosition.TOP);
@@ -30,6 +33,10 @@ export default function App() {
   );
   const [duration, setDuration] = useState(4000);
 
+  const toggleModal = useCallback(() => {
+    setModalVisible(!isModalVisible);
+  }, [isModalVisible, setModalVisible]);
+
   return (
     <SafeAreaProvider>
       <GestureHandlerRootView style={{ flex: 1 }}>
@@ -92,6 +99,7 @@ export default function App() {
                 duration,
                 height,
                 width,
+                providerKey: 'PERSISTS',
               });
             }}
           >
@@ -175,7 +183,57 @@ export default function App() {
               Promise Toast
             </Text>
           </Pressable>
+          <Button title={'Toggle Modal'} onPress={toggleModal} />
         </ScrollView>
+        <Modal style={{ padding: 0, margin: 0 }} isVisible={isModalVisible}>
+          <View
+            style={{
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: !isDarkMode ? colors.textDark : colors.textLight,
+            }}
+          >
+            <Button title={'Toggle Modal'} onPress={toggleModal} />
+
+            <Pressable
+              style={{ marginTop: 64 }}
+              onPress={() => {
+                toast(Math.floor(Math.random() * 1000).toString(), {
+                  position,
+                  duration,
+                  height,
+                  width,
+                  providerKey: 'PERSISTS',
+                });
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 16,
+                  fontWeight: 'bold',
+                  color: isDarkMode ? colors.textDark : colors.textLight,
+                }}
+              >
+                Normal Toast
+              </Text>
+            </Pressable>
+
+            <Toasts
+              providerKey={'MODAL::1'}
+              onToastShow={(t) => {
+                console.log('SHOW: ', t);
+              }}
+              onToastHide={(t) => {
+                console.log('HIDE: ', t);
+              }}
+              onToastPress={(t) => {
+                console.log('PRESS: ', t);
+              }}
+              overrideDarkMode={isDarkMode}
+            />
+          </View>
+        </Modal>
         <Toasts
           onToastShow={(t) => {
             console.log('SHOW: ', t);

example/yarn.lock

@@ -7280,7 +7280,7 @@ prompts@^2.3.2, prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*, prop-types@^15.7.2:
+prop-types@*, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7405,6 +7405,13 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+[email protected]:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"
+  integrity sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-native-codegen@^0.71.5:
   version "0.71.5"
   resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.71.5.tgz#454a42a891cd4ca5fc436440d301044dc1349c14"
@@ -7431,6 +7438,14 @@ react-native-gradle-plugin@^0.71.18:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz#3379e28341fcd189bc1f4691cefc84c1a4d7d232"
   integrity sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ==
 
+react-native-modal@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-13.0.1.tgz#691f1e646abb96fa82c1788bf18a16d585da37cd"
+  integrity sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==
+  dependencies:
+    prop-types "^15.6.2"
+    react-native-animatable "1.3.3"
+
 react-native-reanimated@~2.14.4:
   version "2.14.4"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz#3fa3da4e7b99f5dfb28f86bcf24d9d1024d38836"

src/components/Toast.tsx

@@ -241,11 +241,7 @@ export const Toast: FC<Props> = ({
             style={[
               {
                 height: toastHeight,
-                backgroundColor: isDarkMode
-                  ? colors.backgroundDark
-                  : colors.backgroundLight,
                 width: toastWidth,
-                borderRadius: 8,
                 flexDirection: 'row',
                 alignItems: 'center',
                 paddingVertical: 12,

src/components/Toasts.tsx

@@ -16,6 +16,7 @@ type Props = {
   onToastShow?: (toast: T) => void;
   onToastHide?: (toast: T) => void;
   onToastPress?: (toast: T) => void;
+  providerKey?: string;
 };
 
 export const Toasts: FunctionComponent<Props> = ({
@@ -24,8 +25,9 @@ export const Toasts: FunctionComponent<Props> = ({
   onToastHide,
   onToastPress,
   onToastShow,
+  providerKey = 'DEFAULT',
 }) => {
-  const { toasts, handlers } = useToaster();
+  const { toasts, handlers } = useToaster({ providerKey });
   const { startPause, endPause } = handlers;
   const insets = useSafeAreaInsets();
 

src/core/store.ts

@@ -187,19 +187,26 @@ export const useStore = (toastOptions: DefaultToastOptions = {}): State => {
     };
   }, [state]);
 
-  const mergedToasts = state.toasts.map((t) => ({
-    ...toastOptions,
-    ...toastOptions[t.type],
-    ...t,
-    duration:
-      t.duration ||
-      toastOptions[t.type]?.duration ||
-      toastOptions?.duration ||
-      defaultTimeouts[t.type],
-    styles: {
-      ...toastOptions.styles,
-    },
-  }));
+  const mergedToasts = state.toasts
+    .filter(
+      (t) =>
+        toastOptions?.providerKey === undefined ||
+        t.providerKey === toastOptions?.providerKey ||
+        t.providerKey === 'PERSISTS'
+    )
+    .map((t) => ({
+      ...toastOptions,
+      ...toastOptions[t.type],
+      ...t,
+      duration:
+        t.duration ||
+        toastOptions[t.type]?.duration ||
+        toastOptions?.duration ||
+        defaultTimeouts[t.type],
+      styles: {
+        ...toastOptions.styles,
+      },
+    }));
 
   return {
     ...state,

src/core/toast.ts

@@ -26,6 +26,7 @@ const createToast = (
   message,
   pauseDuration: 0,
   position: ToastPosition.TOP,
+  providerKey: 'DEFAULT',
   ...opts,
   id: opts?.id || genId(),
 });

src/core/types.ts

@@ -48,6 +48,7 @@ export interface Toast {
     indicator?: ViewStyle;
   };
   customToast?: (toast: Toast) => JSX.Element;
+  providerKey: string;
 }
 
 export type ToastOptions = Partial<
@@ -62,6 +63,7 @@ export type ToastOptions = Partial<
     | 'width'
     | 'customToast'
     | 'disableShadow'
+    | 'providerKey'
   >
 >;