Merge pull request #193 from gunnartorfis/chore/remove-nativewind

chore: remove nativewind
gunnartorfis · Feb 4, 2025 · 95ed730 · 95ed730
2 parents 189aede + 700d352
commit 95ed730
Show file tree

Hide file tree

Showing 15 changed files with 72 additions and 192 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ An opinionated toast component for React Native. A port of @emilkowalski's sonne
 - Dark mode built-in
 - Works with Expo
 - NativeWind supported
-- Customizable, styles & className props
+- Customizable via styles props
 - Works outside of React components
 
 ## Showcase

diff --git a/docs/docs/Toaster.md b/docs/docs/Toaster.md
@@ -42,13 +42,12 @@ The `position` prop determines where the toasts are displayed on the screen.
 
 ### Default styles for toasts
 
-You can provide default styles for all toasts by passing `style` and `className` props to the Toaster component. All customization passed to the toast() will be concatenated with these default styles.
+You can provide default styles for all toasts by passing the `style` prop to the Toaster component. All customization passed to the toast() will be concatenated with these default styles.
 
 ```tsx
 <Toaster
   toastOptions={{
     style: { backgroundColor: 'red' },
-    className: 'bg-red-500',
   }}
 />
 ```
@@ -66,27 +65,25 @@ import { ZView } from 'react-native-z-view';
   ToasterOverlayWrapper={ZView}
   toastOptions={{
     style: { backgroundColor: 'red' },
-    className: 'bg-red-500',
   }}
 />;
 ```
 
 ## API Reference
 
-| Property                  |                                            Description                                             |                     Default |
-| :------------------------ | :------------------------------------------------------------------------------------------------: | --------------------------: |
-| theme                     |                                          `light`, `dark`                                           |                     `light` |
-| visibleToasts             |                                  Maximum number of visible toasts                                  |                         `3` |
-| position                  |                              Place where the toasts will be rendered                               |                `top-center` |
-| offset                    |                                   Offset from the top or bottom                                    |                         `0` |
-| closeButton               |                                 Adds a close button to all toasts                                  |                     `false` |
-| invert                    |                             Dark toasts in light mode and vice versa.                              |                     `false` |
-| toastOptions              | These will act as default options for all toasts. See [toast()](/toast) for all available options. |                        `{}` |
-| gap                       |                                  Gap between toasts when expanded                                  |                        `16` |
-| icons                     |                                     Changes the default icons                                      |                         `-` |
-| pauseWhenPageIsHidden     |                        Pauses toast timers when the app enters background.                         |                        `{}` |
-| `swipeToDismissDirection` |                             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` |
-| autoWiggleOnUpdate        |             Adds a wiggle animation on toast update. `never`, `toast-change`, `always`             |                     `never` |
-| richColors                |                             Makes error and success state more colorful                            |                     `false` |
+| Property                  |                                            Description                                             |      Default |
+| :------------------------ | :------------------------------------------------------------------------------------------------: | -----------: |
+| theme                     |                                          `light`, `dark`                                           |      `light` |
+| visibleToasts             |                                  Maximum number of visible toasts                                  |          `3` |
+| position                  |                              Place where the toasts will be rendered                               | `top-center` |
+| offset                    |                                   Offset from the top or bottom                                    |          `0` |
+| closeButton               |                                 Adds a close button to all toasts                                  |      `false` |
+| invert                    |                             Dark toasts in light mode and vice versa.                              |      `false` |
+| toastOptions              | These will act as default options for all toasts. See [toast()](/toast) for all available options. |         `{}` |
+| gap                       |                                  Gap between toasts when expanded                                  |         `16` |
+| icons                     |                                     Changes the default icons                                      |          `-` |
+| 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` |
+| autoWiggleOnUpdate        |             Adds a wiggle animation on toast update. `never`, `toast-change`, `always`             |      `never` |
+| richColors                |                             Makes error and success state more colorful                            |      `false` |
diff --git a/docs/docs/index.md b/docs/docs/index.md
@@ -23,8 +23,7 @@ Sonner Native is an opinionated toast component for React Native. A port of @emi
 - Highly performant using Reanimated 3, 60 FPS
 - Dark mode built-in
 - Works with Expo
-- NativeWind supported
-- Customizable, styles & className props
+- Customizable via style props
 - Works outside of React components
 
 ## Installation

diff --git a/docs/docs/sonner.md b/docs/docs/sonner.md
@@ -47,6 +47,6 @@
 | hotkey                    | 🕸️            | ✅         |
 | loadingIcon               | ✅            | ✅         |
 | pauseWhenPageIsHidden     | ✅            | ✅         |
-| cn                        | ✅            | ✅         |
+| cn                        | 🕸️            | ✅         |
 
 **🕸️: Not applicable for native apps.**
diff --git a/docs/docs/toast.md b/docs/docs/toast.md
@@ -22,7 +22,6 @@ Alternatively, you can pass an object as the second argument with additional opt
 import { toast } from 'sonner-native';
 
 toast.success('Operation successful!', {
-  className: 'bg-green-500',
   style: { backgroundColor: 'blue' },
   description: 'Everything worked as expected.',
   duration: 6000,

diff --git a/nativewind-env.d.ts b/nativewind-env.d.ts
diff --git a/package.json b/package.json
@@ -81,7 +81,6 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "jest": "^29.7.0",
-    "nativewind": "^4.1.6",
     "prettier": "^3.3.3",
     "react": "18.2.0",
     "react-native": "0.74.5",
@@ -98,7 +97,6 @@
     "@types/react": "^18.2.44"
   },
   "peerDependencies": {
-    "nativewind": "*",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": ">=2.16.1",
@@ -107,16 +105,11 @@
     "react-native-screens": ">=3.31.1",
     "react-native-svg": ">=15.6.0"
   },
-  "peerDependenciesMeta": {
-    "nativewind": {
-      "optional": true
-    }
-  },
   "workspaces": [
     "example",
     "docs"
   ],
-  "packageManager": "yarn@3.6.1",
+  "packageManager": "yarn@4.6.0",
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [

diff --git a/src/constants.ts b/src/constants.ts
@@ -18,7 +18,6 @@ export const toastDefaultValues: {
   unstyled: boolean;
   invert: boolean;
   pauseWhenPageIsHidden: boolean;
-  cn: (...classes: Array<string | undefined>) => string;
   gap: number;
   theme: ToastTheme;
   autoWiggleOnUpdate: AutoWiggle;
@@ -35,7 +34,6 @@ export const toastDefaultValues: {
   unstyled: false,
   invert: false,
   pauseWhenPageIsHidden: false,
-  cn: (...classes) => classes.filter(Boolean).join(' '),
   gap: 14,
   theme: 'system',
   autoWiggleOnUpdate: 'never',

diff --git a/src/gestures.tsx b/src/gestures.tsx
@@ -19,7 +19,6 @@ const { width: WINDOW_WIDTH } = Dimensions.get('window');
 type ToastSwipeHandlerProps = Pick<ToastProps, 'important'> & {
   onRemove: () => void;
   style?: ViewStyle | (ViewStyle | undefined)[];
-  className?: string;
   onBegin: () => void;
   onFinalize: () => void;
   enabled?: boolean;
@@ -33,7 +32,6 @@ export const ToastSwipeHandler: React.FC<
 > = ({
   children,
   onRemove,
-  className,
   style,
   onBegin,
   onFinalize,
@@ -150,7 +148,6 @@ export const ToastSwipeHandler: React.FC<
           { width: '100%' },
           style,
         ]}
-        className={className}
         layout={LinearTransition.easing(easeInOutCircFn)}
         aria-live={important ? 'assertive' : 'polite'} // https://reactnative.dev/docs/accessibility#aria-live-android
       >

diff --git a/src/positioner.tsx b/src/positioner.tsx
@@ -5,10 +5,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useToastContext } from './context';
 
 export const Positioner: React.FC<
-  React.PropsWithChildren<
-    Pick<ToasterProps, 'position' | 'className' | 'style'>
-  >
-> = ({ children, position, className, style, ...props }) => {
+  React.PropsWithChildren<Pick<ToasterProps, 'position' | 'style'>>
+> = ({ children, position, style, ...props }) => {
   const { offset } = useToastContext();
   const { top, bottom } = useSafeAreaInsets();
 
@@ -35,7 +33,6 @@ export const Positioner: React.FC<
         insetValues,
         style,
       ]}
-      className={className}
       {...props}
     >
       {children}

diff --git a/src/toast.tsx b/src/toast.tsx
@@ -34,15 +34,9 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
       closeButton: closeButtonProps,
       actionButtonStyle,
       actionButtonTextStyle,
-      actionButtonClassName,
-      actionButtonTextClassName,
       cancelButtonStyle,
       cancelButtonTextStyle,
-      cancelButtonClassName,
-      cancelButtonTextClassName,
       style,
-      className,
-      classNames,
       styles,
       promiseOptions,
       position,
@@ -60,13 +54,11 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
       closeButton: closeButtonCtx,
       icons,
       pauseWhenPageIsHidden,
-      cn,
       invert: invertCtx,
       richColors: richColorsCtx,
       toastOptions: {
         unstyled: unstyledCtx,
         toastContainerStyle: toastContainerStyleCtx,
-        classNames: classNamesCtx,
         actionButtonStyle: actionButtonStyleCtx,
         actionButtonTextStyle: actionButtonTextStyleCtx,
         cancelButtonStyle: cancelButtonStyleCtx,
@@ -89,7 +81,7 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
     const { entering, exiting } = useToastLayoutAnimations(position);
 
     const isDragging = React.useRef(false);
-    const timer = React.useRef<NodeJS.Timeout>();
+    const timer = React.useRef<ReturnType<typeof setTimeout>>();
     const timerStart = React.useRef<number | undefined>();
     const timeLeftOnceBackgrounded = React.useRef<number | undefined>();
     const isResolvingPromise = React.useRef(false);
@@ -277,32 +269,22 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
             onPress={() => onDismiss?.(id)}
             hitSlop={10}
             style={[closeButtonStyleCtx, styles?.closeButton]}
-            className={cn(classNamesCtx?.closeButton, classNames?.closeButton)}
           >
             <X
               size={20}
               color={defaultStyles.closeButtonColor}
               style={[closeButtonIconStyleCtx, styles?.closeButtonIcon]}
-              className={cn(
-                classNamesCtx?.closeButtonIcon,
-                classNames?.closeButtonIcon
-              )}
             />
           </Pressable>
         );
       }
       return null;
     }, [
-      classNames?.closeButton,
-      classNames?.closeButtonIcon,
-      classNamesCtx?.closeButton,
-      classNamesCtx?.closeButtonIcon,
       close,
       closeButton,
       closeButtonIconStyleCtx,
       closeButtonStyleCtx,
-      cn,
-      defaultStyles?.closeButtonColor,
+      defaultStyles.closeButtonColor,
       dismissible,
       id,
       onDismiss,
@@ -333,10 +315,6 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
         onPress: () => onPress?.(),
         enabled: !promiseOptions && dismissible,
         style: [toastContainerStyleCtx, styles?.toastContainer],
-        className: cn(
-          classNamesCtx?.toastContainer,
-          classNames?.toastContainer
-        ),
         unstyled: unstyled,
         important: important,
         position: position,
@@ -350,12 +328,9 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
         onPress,
         toastContainerStyleCtx,
         styles?.toastContainer,
-        classNamesCtx?.toastContainer,
-        classNames?.toastContainer,
         unstyled,
         important,
         position,
-        cn,
       ]
     );
 
@@ -372,7 +347,6 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
     return (
       <ToastSwipeHandler {...toastSwipeHandlerProps}>
         <Animated.View
-          className={cn(className, classNamesCtx?.toast, classNames?.toast)}
           style={[
             unstyled ? undefined : elevationStyle,
             defaultStyles.toast,
@@ -390,10 +364,6 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
               toastContentStyleCtx,
               styles?.toastContent,
             ]}
-            className={cn(
-              classNamesCtx?.toastContent,
-              classNames?.toastContent
-            )}
           >
             {promiseOptions || variant === 'loading' ? (
               'loading' in icons ? (
@@ -413,10 +383,7 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
               />
             )}
             <View style={{ flex: 1 }}>
-              <Text
-                style={[defaultStyles.title, titleStyleCtx, styles?.title]}
-                className={cn(classNamesCtx?.title, classNames?.title)}
-              >
+              <Text style={[defaultStyles.title, titleStyleCtx, styles?.title]}>
                 {title}
               </Text>
               {description ? (
@@ -426,10 +393,6 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
                     descriptionStyleCtx,
                     styles?.description,
                   ]}
-                  className={cn(
-                    classNamesCtx?.description,
-                    classNames?.description
-                  )}
                 >
                   {description}
                 </Text>
@@ -442,12 +405,10 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
                   buttonsStyleCtx,
                   styles?.buttons,
                 ]}
-                className={cn(classNamesCtx?.buttons, classNames?.buttons)}
               >
                 {isToastAction(action) ? (
                   <Pressable
                     onPress={action.onClick}
-                    className={actionButtonClassName}
                     style={[
                       defaultStyles.actionButton,
                       actionButtonStyleCtx,
@@ -461,7 +422,6 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
                         actionButtonTextStyleCtx,
                         actionButtonTextStyle,
                       ]}
-                      className={actionButtonTextClassName}
                     >
                       {action.label}
                     </Text>
@@ -475,7 +435,6 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
                       cancel.onClick();
                       onDismiss?.(id);
                     }}
-                    className={cancelButtonClassName}
                     style={[
                       defaultStyles.cancelButton,
                       cancelButtonStyleCtx,
@@ -489,7 +448,6 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
                         cancelButtonTextStyleCtx,
                         cancelButtonTextStyle,
                       ]}
-                      className={cancelButtonTextClassName}
                     >
                       {cancel.label}
                     </Text>

diff --git a/src/toaster.tsx b/src/toaster.tsx
@@ -96,7 +96,6 @@ export const ToasterUI: React.FC<
   toastOptions = {},
   icons,
   pauseWhenPageIsHidden,
-  cn,
   gap,
   theme,
   autoWiggleOnUpdate,
@@ -249,7 +248,6 @@ export const ToasterUI: React.FC<
       icons: icons ?? {},
       pauseWhenPageIsHidden:
         pauseWhenPageIsHidden ?? toastDefaultValues.pauseWhenPageIsHidden,
-      cn: cn ?? toastDefaultValues.cn,
       gap: gap ?? toastDefaultValues.gap,
       theme: theme ?? toastDefaultValues.theme,
       toastOptions,
@@ -267,7 +265,6 @@ export const ToasterUI: React.FC<
       invert,
       icons,
       pauseWhenPageIsHidden,
-      cn,
       gap,
       theme,
       toastOptions,