Merge pull request #212 from wcastand/main

feat: add a ToastWrapper to wrap the toast with a custom component

Author: gunnartorfis

docs/docs/Toaster.md

@@ -69,6 +69,29 @@ import { ZView } from 'react-native-z-view';
 />;
 ```
 
+
+### Dismiss toast on tap
+
+Use the `ToastWrapper` prop to wrap the Toast component with a custom component. This is useful when you want to customize the behavior of the toast, for example add a dismiss on tap instead of the the close icon.
+
+```tsx
+import { Pressable } from "react-native"
+
+function Wrapper({toastId, children}){
+  function onPress(){
+    toast.dismiss(toastId)
+  }
+  return <Pressable onPress={onPress}>{children}</Pressable>
+}
+
+<Toaster
+  ToastWrapper={Wrapper}
+  toastOptions={{
+    style: { backgroundColor: 'red' },
+  }}
+/>;
+```
+
 ## API Reference
 
 | Property                  |                                            Description                                             |      Default |
@@ -85,5 +108,6 @@ import { ZView } from 'react-native-z-view';
 | pauseWhenPageIsHidden     |                        Pauses toast timers when the app enters background.                         |         `{}` |
 | `swipeToDismissDirection` |                             Swipe direction to dismiss (`left`, `up`).                             |         `up` |
 | ToasterOverlayWrapper     |                                Custom component to wrap the Toaster.                               |        `div` |
+| ToastWrapper              |                                Custom component to wrap the Toast.                                 |        `div` |
 | autoWiggleOnUpdate        |             Adds a wiggle animation on toast update. `never`, `toast-change`, `always`             |      `never` |
 | richColors                |                             Makes error and success state more colorful                            |      `false` |

example/src/App.tsx

@@ -5,6 +5,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { Toaster } from 'sonner-native';
 import '../global.css';
 import Navigator from './navigation';
+// import { ToastWrapper } from './ToastWrapper';
 
 const App: React.FC = () => {
   return (
@@ -29,6 +30,7 @@ const App: React.FC = () => {
               paddingHorizontal: 20,
             },
           }}
+          // ToastWrapper={ToastWrapper}
           pauseWhenPageIsHidden
         />
       </GestureHandlerRootView>

example/src/ToastWrapper.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+import { toast } from 'sonner-native';
+import '../global.css';
+
+export const ToastWrapper: React.ComponentType<
+  React.ComponentProps<typeof View> & {
+    children: React.ReactNode;
+    toastId: string | number;
+  }
+> = ({ toastId, style, ...props }) => {
+  return (
+    <Pressable
+      style={[style, { backgroundColor: 'red' }]}
+      onPress={() => toast.dismiss(toastId)}
+      {...props}
+    />
+  );
+};

src/toaster.tsx

@@ -104,6 +104,7 @@ export const ToasterUI: React.FC<
   setToasts,
   toastsCounter,
   toastRefs,
+  ToastWrapper,
   ...props
 }) => {
   addToastHandler = React.useCallback(
@@ -325,6 +326,23 @@ export const ToasterUI: React.FC<
     <ToastContext.Provider value={value}>
       <Positioner position={position}>
         {positionedNonDynamicToasts.map((positionedToast) => {
+          if (ToastWrapper) {
+            return (
+              <ToastWrapper
+                key={positionedToast.id}
+                toastId={positionedToast.id}
+                style={{ width: '100%' }}
+              >
+                <Toast
+                  {...positionedToast}
+                  onDismiss={onDismiss}
+                  onAutoClose={onAutoClose}
+                  ref={toastRefs.current[positionedToast.id]}
+                  {...props}
+                />
+              </ToastWrapper>
+            );
+          }
           return (
             <Toast
               key={positionedToast.id}
@@ -343,6 +361,23 @@ export const ToasterUI: React.FC<
         }
       >
         {positionedDynamicToasts.map((positionedToast) => {
+          if (ToastWrapper) {
+            return (
+              <ToastWrapper
+                key={positionedToast.id}
+                toastId={positionedToast.id}
+                style={{ width: '100%' }}
+              >
+                <Toast
+                  key={positionedToast.id}
+                  {...positionedToast}
+                  onDismiss={onDismiss}
+                  onAutoClose={onAutoClose}
+                  {...props}
+                />
+              </ToastWrapper>
+            );
+          }
           return (
             <Toast
               key={positionedToast.id}

src/types.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { TextStyle, ViewStyle } from 'react-native';
+import type { TextStyle, ViewProps, ViewStyle } from 'react-native';
 
 type StyleProps = {
   unstyled?: boolean;
@@ -125,6 +125,12 @@ export type ToasterProps = {
   swipeToDismissDirection?: ToastSwipeDirection;
   pauseWhenPageIsHidden?: boolean;
   ToasterOverlayWrapper?: React.ComponentType<{ children: React.ReactNode }>;
+  ToastWrapper?: React.ComponentType<
+    ViewProps & {
+      children: React.ReactNode;
+      toastId: string | number;
+    }
+  >;
 };
 
 export type AddToastContextHandler = (