Merge pull request #73 from gunnartorfis/wrapper

feat: wrap Toaster with the ToasterOverlayWrapper prop
gunnartorfis · Sep 10, 2024 · ce69b5f · ce69b5f
2 parents 3f0a789 + e1dee05
commit ce69b5f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/docs/docs/Toaster.md b/docs/docs/Toaster.md
@@ -53,6 +53,24 @@ You can provide default styles for all toasts by passing `style` and `className`
 />
 ```
 
+### Usage with react-native-z-view
+
+Use the `ToasterOverlayWrapper` prop to wrap the Toaster component with a custom component. This is useful when using `react-native-z-view` to render the toasts.
+
+sonner-native uses `FullWindowOverlay` from react-native-screens by default on iOS and `View` on Android.
+
+```tsx
+import { ZView } from 'react-native-z-view';
+
+<Toaster
+  ToasterOverlayWrapper={ZView}
+  toastOptions={{
+    style: { backgroundColor: 'red' },
+    className: 'bg-red-500',
+  }}
+/>;
+```
+
 ## API Reference
 
 | Property                 |                                            Description                                             |                     Default |
@@ -69,3 +87,8 @@ You can provide default styles for all toasts by passing `style` and `className`
 | pauseWhenPageIsHidden    |                        Pauses toast timers when the app enters background.                         |                        `{}` |
 | `swipToDismissDirection` |                             Swipe direction to dismiss (`left`, `up`).                             |                        `up` |
 | cn                       |                         Custom function for constructing/merging classes.                          | `filter(Boolean).join(' ')` |
+|  ToasterOverlayWrapper   |                                Custom component to wrap the Toaster.                               |                       `div` |
+
+```
+
+```
diff --git a/src/toaster.tsx b/src/toaster.tsx
@@ -16,7 +16,16 @@ import {
 let addToastHandler: AddToastContextHandler;
 let dismissToastHandler: typeof toast.dismiss;
 
-export const Toaster: React.FC<ToasterProps> = (props) => {
+export const Toaster: React.FC<ToasterProps> = ({
+  ToasterOverlayWrapper,
+  ...props
+}) => {
+  if (ToasterOverlayWrapper) {
+    return (
+      <ToasterOverlayWrapper>{<ToasterUI {...props} />}</ToasterOverlayWrapper>
+    );
+  }
+
   if (Platform.OS === 'ios') {
     return (
       <FullWindowOverlay>

diff --git a/src/types.ts b/src/types.ts
@@ -113,6 +113,7 @@ export type ToasterProps = StyleProps & {
   swipToDismissDirection?: ToastSwipeDirection;
   pauseWhenPageIsHidden?: boolean;
   cn?: (...classes: Array<string | undefined>) => string;
+  ToasterOverlayWrapper?: React.ComponentType<{ children: React.ReactNode }>;
 };
 
 export type AddToastContextHandler = (