diff --git a/CHANGELOG.md b/CHANGELOG.md index 1fd10d5..9071275 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,199 +1,171 @@ - - ## [0.16.2](https://github.com/gunnartorfis/sonner-native/compare/v0.16.1...v0.16.2) (2024-12-10) - ### Bug Fixes -* let animation finish before hiding toasts ([cf4ed8e](https://github.com/gunnartorfis/sonner-native/commit/cf4ed8e9bcdb024dd36bacecde85cbe82d4720d9)) +- let animation finish before hiding toasts ([cf4ed8e](https://github.com/gunnartorfis/sonner-native/commit/cf4ed8e9bcdb024dd36bacecde85cbe82d4720d9)) ## [0.16.1](https://github.com/gunnartorfis/sonner-native/compare/v0.16.0...v0.16.1) (2024-11-19) - ### Bug Fixes -* custom jsx component breaks animation ([fab7d6f](https://github.com/gunnartorfis/sonner-native/commit/fab7d6f77b5b058c0940069d5059dc07007fc612)) -* render custom jsx in if block and use ToastSwipeHandler with memoized props ([61e5ead](https://github.com/gunnartorfis/sonner-native/commit/61e5ead8c34631cca7aa9233b06f50049193792d)) +- custom jsx component breaks animation ([fab7d6f](https://github.com/gunnartorfis/sonner-native/commit/fab7d6f77b5b058c0940069d5059dc07007fc612)) +- render custom jsx in if block and use ToastSwipeHandler with memoized props ([61e5ead](https://github.com/gunnartorfis/sonner-native/commit/61e5ead8c34631cca7aa9233b06f50049193792d)) # [0.16.0](https://github.com/gunnartorfis/sonner-native/compare/v0.16.0-beta.0...v0.16.0) (2024-11-05) # [0.16.0-beta.0](https://github.com/gunnartorfis/sonner-native/compare/v0.15.0...v0.16.0-beta.0) (2024-10-27) - ### Bug Fixes -* conditional full window overlay ([d6f8990](https://github.com/gunnartorfis/sonner-native/commit/d6f899041e5553fa76b5a03b5bb8f0ba800da3b3)) +- conditional full window overlay ([d6f8990](https://github.com/gunnartorfis/sonner-native/commit/d6f899041e5553fa76b5a03b5bb8f0ba800da3b3)) # [0.15.0](https://github.com/gunnartorfis/sonner-native/compare/v0.14.2...v0.15.0) (2024-10-04) - ### Bug Fixes -* prettier ([8dc3666](https://github.com/gunnartorfis/sonner-native/commit/8dc36660188d15a5e9806b0a1605332f29bc30bc)) -* type guard ([d594e08](https://github.com/gunnartorfis/sonner-native/commit/d594e08aa1eceeded5e2b30fcee640a4e3624b0e)) - +- prettier ([8dc3666](https://github.com/gunnartorfis/sonner-native/commit/8dc36660188d15a5e9806b0a1605332f29bc30bc)) +- type guard ([d594e08](https://github.com/gunnartorfis/sonner-native/commit/d594e08aa1eceeded5e2b30fcee640a4e3624b0e)) ### Features -* added customizeable close button ([98855df](https://github.com/gunnartorfis/sonner-native/commit/98855df50357f28056701093ccf71f2de916f49a)) +- added customizeable close button ([98855df](https://github.com/gunnartorfis/sonner-native/commit/98855df50357f28056701093ccf71f2de916f49a)) ## [0.14.2](https://github.com/gunnartorfis/sonner-native/compare/v0.14.1...v0.14.2) (2024-09-22) - ### Bug Fixes -* add missing worklet directive ([b5796de](https://github.com/gunnartorfis/sonner-native/commit/b5796de6d71727e7a0152c50f8af5e0b9e2e1e57)) +- add missing worklet directive ([b5796de](https://github.com/gunnartorfis/sonner-native/commit/b5796de6d71727e7a0152c50f8af5e0b9e2e1e57)) ## [0.14.1](https://github.com/gunnartorfis/sonner-native/compare/v0.14.0...v0.14.1) (2024-09-20) - ### Bug Fixes -* close button press didn't trigger dismiss ([d83a529](https://github.com/gunnartorfis/sonner-native/commit/d83a529dbf4f4ad3d851bdccf3104eb2588173d3)) +- close button press didn't trigger dismiss ([d83a529](https://github.com/gunnartorfis/sonner-native/commit/d83a529dbf4f4ad3d851bdccf3104eb2588173d3)) # [0.14.0](https://github.com/gunnartorfis/sonner-native/compare/v0.13.0...v0.14.0) (2024-09-19) - ### Bug Fixes -* android action onclick ([5e8a4b0](https://github.com/gunnartorfis/sonner-native/commit/5e8a4b015f0f429d66433504b250cf0250bfa6ff)) -* handle dismissible false with onPress ([c10b936](https://github.com/gunnartorfis/sonner-native/commit/c10b9365c342f9bcd7070ff79c4361e7c7ce06b7)) -* toastOption.style wasn't applied ([b13ea69](https://github.com/gunnartorfis/sonner-native/commit/b13ea694fe77610552065deecde7c2225f8f4b71)) - +- android action onclick ([5e8a4b0](https://github.com/gunnartorfis/sonner-native/commit/5e8a4b015f0f429d66433504b250cf0250bfa6ff)) +- handle dismissible false with onPress ([c10b936](https://github.com/gunnartorfis/sonner-native/commit/c10b9365c342f9bcd7070ff79c4361e7c7ce06b7)) +- toastOption.style wasn't applied ([b13ea69](https://github.com/gunnartorfis/sonner-native/commit/b13ea694fe77610552065deecde7c2225f8f4b71)) ### Features -* add onPress ([102e092](https://github.com/gunnartorfis/sonner-native/commit/102e09286ad94037b7690d30db24185b8bdfeb06)) -* toast.promise error option can be a callback fn or a string ([89d0872](https://github.com/gunnartorfis/sonner-native/commit/89d0872f5625d617c745dbf589efb0e7c3ac7e3f)) +- add onPress ([102e092](https://github.com/gunnartorfis/sonner-native/commit/102e09286ad94037b7690d30db24185b8bdfeb06)) +- toast.promise error option can be a callback fn or a string ([89d0872](https://github.com/gunnartorfis/sonner-native/commit/89d0872f5625d617c745dbf589efb0e7c3ac7e3f)) # [0.13.0](https://github.com/gunnartorfis/sonner-native/compare/v0.12.1...v0.13.0) (2024-09-14) - ### Bug Fixes -* await the promise to be able to catch its error and render an error toast ([671fb5d](https://github.com/gunnartorfis/sonner-native/commit/671fb5de87058eb29238cd80ae6a0370a4c37fb6)) -* bottom positioned toast should swipe down ([6051c62](https://github.com/gunnartorfis/sonner-native/commit/6051c62122935c02eb85090cdd0743064d835155)) -* corrected typo in "swipeToDismissDirection" prop ([f2c9788](https://github.com/gunnartorfis/sonner-native/commit/f2c97888e033eea0c50f9a9b52256d34cca22211)) -* renamed "ivertProps" to "invertProps" in "use-colors.ts" ([411ecf2](https://github.com/gunnartorfis/sonner-native/commit/411ecf2025d598c425bf4726aec673ac0cc402f7)) - +- await the promise to be able to catch its error and render an error toast ([671fb5d](https://github.com/gunnartorfis/sonner-native/commit/671fb5de87058eb29238cd80ae6a0370a4c37fb6)) +- bottom positioned toast should swipe down ([6051c62](https://github.com/gunnartorfis/sonner-native/commit/6051c62122935c02eb85090cdd0743064d835155)) +- corrected typo in "swipeToDismissDirection" prop ([f2c9788](https://github.com/gunnartorfis/sonner-native/commit/f2c97888e033eea0c50f9a9b52256d34cca22211)) +- renamed "ivertProps" to "invertProps" in "use-colors.ts" ([411ecf2](https://github.com/gunnartorfis/sonner-native/commit/411ecf2025d598c425bf4726aec673ac0cc402f7)) ### Features -* rich colors support ([4a3d3e3](https://github.com/gunnartorfis/sonner-native/commit/4a3d3e33a58cc522d3ae589b897183cc77a11896)) +- rich colors support ([4a3d3e3](https://github.com/gunnartorfis/sonner-native/commit/4a3d3e33a58cc522d3ae589b897183cc77a11896)) ## [0.12.1](https://github.com/gunnartorfis/sonner-native/compare/v0.12.0...v0.12.1) (2024-09-11) - ### Bug Fixes -* crash when trying to wiggle duration Infinity ([3e81b34](https://github.com/gunnartorfis/sonner-native/commit/3e81b34313ea11d942bf6a53390f0b9fef29a95e)) +- crash when trying to wiggle duration Infinity ([3e81b34](https://github.com/gunnartorfis/sonner-native/commit/3e81b34313ea11d942bf6a53390f0b9fef29a95e)) # [0.12.0](https://github.com/gunnartorfis/sonner-native/compare/v0.12.0-alpha.0...v0.12.0) (2024-09-11) - ### Bug Fixes -* reset duration on wiggle ([e927659](https://github.com/gunnartorfis/sonner-native/commit/e927659c0a5a6aef3902c83a8b06295f2f9dab2f)) +- reset duration on wiggle ([e927659](https://github.com/gunnartorfis/sonner-native/commit/e927659c0a5a6aef3902c83a8b06295f2f9dab2f)) # [0.12.0-alpha.0](https://github.com/gunnartorfis/sonner-native/compare/v0.11.0...v0.12.0-alpha.0) (2024-09-11) - ### Features -* wiggle toasts on update + toast.wiggle() ([de60ddc](https://github.com/gunnartorfis/sonner-native/commit/de60ddc8ef53781a3e3c2094b62c10f6fbee9c2f)) +- wiggle toasts on update + toast.wiggle() ([de60ddc](https://github.com/gunnartorfis/sonner-native/commit/de60ddc8ef53781a3e3c2094b62c10f6fbee9c2f)) # [0.11.0](https://github.com/gunnartorfis/sonner-native/compare/v0.10.1...v0.11.0) (2024-09-11) - ### Features -* more accurately represent Sonner's way of styling via the Toaster ([aefd6c4](https://github.com/gunnartorfis/sonner-native/commit/aefd6c492fec42fb44f0f6adba2dc7a6de8f7d13)) +- more accurately represent Sonner's way of styling via the Toaster ([aefd6c4](https://github.com/gunnartorfis/sonner-native/commit/aefd6c492fec42fb44f0f6adba2dc7a6de8f7d13)) ## [0.10.1](https://github.com/gunnartorfis/sonner-native/compare/v0.10.0...v0.10.1) (2024-09-10) # [0.10.0](https://github.com/gunnartorfis/sonner-native/compare/v0.9.2...v0.10.0) (2024-09-10) - ### Features -* wrap Toaster with the ToasterOverlayWrapper prop ([e1dee05](https://github.com/gunnartorfis/sonner-native/commit/e1dee05a6af4d979b30426169c4e677dea548915)) +- wrap Toaster with the ToasterOverlayWrapper prop ([e1dee05](https://github.com/gunnartorfis/sonner-native/commit/e1dee05a6af4d979b30426169c4e677dea548915)) ## [0.9.2](https://github.com/gunnartorfis/sonner-native/compare/v0.9.1...v0.9.2) (2024-09-10) - ### Bug Fixes -* custom icons not rendering with ([c7f281d](https://github.com/gunnartorfis/sonner-native/commit/c7f281dad5539ecaffee55066c7112c5c4198331)) -* theme was not used when passed to Toaster ([34904f5](https://github.com/gunnartorfis/sonner-native/commit/34904f56403ba39bef0857c041928f255f882260)) +- custom icons not rendering with ([c7f281d](https://github.com/gunnartorfis/sonner-native/commit/c7f281dad5539ecaffee55066c7112c5c4198331)) +- theme was not used when passed to Toaster ([34904f5](https://github.com/gunnartorfis/sonner-native/commit/34904f56403ba39bef0857c041928f255f882260)) ## [0.9.1](https://github.com/gunnartorfis/sonner-native/compare/v0.9.0...v0.9.1) (2024-09-09) - ### Bug Fixes -* updating toasts is now more stable ([2260ed7](https://github.com/gunnartorfis/sonner-native/commit/2260ed7aaf2355ba5f01aeb5174b2773ac06664d)) +- updating toasts is now more stable ([2260ed7](https://github.com/gunnartorfis/sonner-native/commit/2260ed7aaf2355ba5f01aeb5174b2773ac06664d)) # [0.9.0](https://github.com/gunnartorfis/sonner-native/compare/v0.8.3...v0.9.0) (2024-09-09) - ### Bug Fixes -* custom id was trying to update an existing toast ([83f2f49](https://github.com/gunnartorfis/sonner-native/commit/83f2f497e5f3ce715d7f50fc2a635b2de384895c)) -* passing invert to toast() now works ([4de18df](https://github.com/gunnartorfis/sonner-native/commit/4de18df8b058f26da98db50cad00bfa066610787)) -* pull request template directory ([0dab465](https://github.com/gunnartorfis/sonner-native/commit/0dab465243b1a9b2d1bbdffe2b0f88bd56470f87)) -* remove hard code ([8eed260](https://github.com/gunnartorfis/sonner-native/commit/8eed2605464f6f4de222b07653dcf4aeec222de2)) - +- custom id was trying to update an existing toast ([83f2f49](https://github.com/gunnartorfis/sonner-native/commit/83f2f497e5f3ce715d7f50fc2a635b2de384895c)) +- passing invert to toast() now works ([4de18df](https://github.com/gunnartorfis/sonner-native/commit/4de18df8b058f26da98db50cad00bfa066610787)) +- pull request template directory ([0dab465](https://github.com/gunnartorfis/sonner-native/commit/0dab465243b1a9b2d1bbdffe2b0f88bd56470f87)) +- remove hard code ([8eed260](https://github.com/gunnartorfis/sonner-native/commit/8eed2605464f6f4de222b07653dcf4aeec222de2)) ### Features -* add pull request template ([afb4daa](https://github.com/gunnartorfis/sonner-native/commit/afb4daacce8a906acaa008a92246b2731e28fae0)) +- add pull request template ([afb4daa](https://github.com/gunnartorfis/sonner-native/commit/afb4daacce8a906acaa008a92246b2731e28fae0)) ## [0.8.3](https://github.com/gunnartorfis/sonner-native/compare/v0.8.2...v0.8.3) (2024-09-09) - ### Bug Fixes -* respect the gap value passed via ([2cb5f02](https://github.com/gunnartorfis/sonner-native/commit/2cb5f022e99eb5a7655f85b1a49fd6c6163dc4c0)) +- respect the gap value passed via ([2cb5f02](https://github.com/gunnartorfis/sonner-native/commit/2cb5f022e99eb5a7655f85b1a49fd6c6163dc4c0)) ## [0.8.2](https://github.com/gunnartorfis/sonner-native/compare/v0.8.1...v0.8.2) (2024-09-09) ## [0.8.1](https://github.com/gunnartorfis/sonner-native/compare/v0.8.0...v0.8.1) (2024-09-09) - ### Bug Fixes -* warning by y gesture handler ([3e11b91](https://github.com/gunnartorfis/sonner-native/commit/3e11b91b747abd13b2aed08f45632ad634f9ed1d)) +- warning by y gesture handler ([3e11b91](https://github.com/gunnartorfis/sonner-native/commit/3e11b91b747abd13b2aed08f45632ad634f9ed1d)) # [0.8.0](https://github.com/gunnartorfis/sonner-native/compare/v0.7.0...v0.8.0) (2024-09-08) - ### Features -* dynamic positioning ([676cbc7](https://github.com/gunnartorfis/sonner-native/commit/676cbc7e8c92c691e953313e3432245c2cf86dca)) -* important accessibility settings for Androi ([a663f65](https://github.com/gunnartorfis/sonner-native/commit/a663f650c2db8bd1ccd91640dc89f992644d03a8)) +- dynamic positioning ([676cbc7](https://github.com/gunnartorfis/sonner-native/commit/676cbc7e8c92c691e953313e3432245c2cf86dca)) +- important accessibility settings for Androi ([a663f65](https://github.com/gunnartorfis/sonner-native/commit/a663f650c2db8bd1ccd91640dc89f992644d03a8)) # [0.7.0](https://github.com/gunnartorfis/sonner-native/compare/v0.6.0...v0.7.0) (2024-09-08) - ### Bug Fixes -* bottom bars weren't tappable with custom offset ([cc664a5](https://github.com/gunnartorfis/sonner-native/commit/cc664a5df352c8bbe16f2c3e681b043cd3156c30)) - +- bottom bars weren't tappable with custom offset ([cc664a5](https://github.com/gunnartorfis/sonner-native/commit/cc664a5df352c8bbe16f2c3e681b043cd3156c30)) ### Features -* custom loading icon ([881ab67](https://github.com/gunnartorfis/sonner-native/commit/881ab67e6690f66c35ed97b88855dccbde0f3427)) -* pause timer when app enters background ([2a1a2c5](https://github.com/gunnartorfis/sonner-native/commit/2a1a2c5c2c9255b9cc465228ca19bd9c4397dcfe)) -* pause timer when app enters background ([d6e04e7](https://github.com/gunnartorfis/sonner-native/commit/d6e04e715938f63189fc5660f19b9cbd851fee49)) -* remove cn as dependency and add is as a prop ([464d800](https://github.com/gunnartorfis/sonner-native/commit/464d800a56201c3932b64e698c94c0dddd2a8044)) -* warning variant ([4cc58e8](https://github.com/gunnartorfis/sonner-native/commit/4cc58e8aed0c3635fe82b9b23bb4ec41ba990602)) +- custom loading icon ([881ab67](https://github.com/gunnartorfis/sonner-native/commit/881ab67e6690f66c35ed97b88855dccbde0f3427)) +- pause timer when app enters background ([2a1a2c5](https://github.com/gunnartorfis/sonner-native/commit/2a1a2c5c2c9255b9cc465228ca19bd9c4397dcfe)) +- pause timer when app enters background ([d6e04e7](https://github.com/gunnartorfis/sonner-native/commit/d6e04e715938f63189fc5660f19b9cbd851fee49)) +- remove cn as dependency and add is as a prop ([464d800](https://github.com/gunnartorfis/sonner-native/commit/464d800a56201c3932b64e698c94c0dddd2a8044)) +- warning variant ([4cc58e8](https://github.com/gunnartorfis/sonner-native/commit/4cc58e8aed0c3635fe82b9b23bb4ec41ba990602)) # [0.6.0](https://github.com/gunnartorfis/sonner-native/compare/v0.5.0...v0.6.0) (2024-09-08) - ### Features -* offset support ([6f37c36](https://github.com/gunnartorfis/sonner-native/commit/6f37c36d8a6f1aaf3069af199789c52e2a47b96d)) +- offset support ([6f37c36](https://github.com/gunnartorfis/sonner-native/commit/6f37c36d8a6f1aaf3069af199789c52e2a47b96d)) # [0.5.0](https://github.com/gunnartorfis/sonner-native/compare/v0.4.1...v0.5.0) (2024-09-07) @@ -226,9 +198,9 @@ - closeButton prop to show X or not ([22b64a6](https://github.com/gunnartorfis/sonner-native/commit/22b64a61decc0ec21daa8dcb7bd29465a2d195d2)) - custom icons ([481903b](https://github.com/gunnartorfis/sonner-native/commit/481903bf630d3cdf18e4233971a4f428c7efd51a)) - custom icons ([d7c4829](https://github.com/gunnartorfis/sonner-native/commit/d7c48295f7577843d3153a8fc6fce1de5d612e65)) -- customize toasts with styles & classNames ([876eaaa](https://github.com/gunnartorfis/sonner-native/commit/876eaaa96f653b256bf4621e157a75eea5402345)) +- customize toasts with styles ([876eaaa](https://github.com/gunnartorfis/sonner-native/commit/876eaaa96f653b256bf4621e157a75eea5402345)) - dismissible prop to make a toast non-swipable nor X to close ([130a1ef](https://github.com/gunnartorfis/sonner-native/commit/130a1efe42f63f3a791b96af3fbdad1624c855bd)) -- fully customizable, every view with style & className ([9e53391](https://github.com/gunnartorfis/sonner-native/commit/9e53391cafcae8e3e04ca8eb9c91621390eb75d8)) +- fully customizable, every view with style ([9e53391](https://github.com/gunnartorfis/sonner-native/commit/9e53391cafcae8e3e04ca8eb9c91621390eb75d8)) - invert prop ([8887cd3](https://github.com/gunnartorfis/sonner-native/commit/8887cd3e7f99b6c733d35f0e43f2429b7adb24d6)) - new onAutoClose callback ([dc28ea9](https://github.com/gunnartorfis/sonner-native/commit/dc28ea9e721957dec156a9178f977fd8ef5a3c0d)) - support Infinity duration ([47ac273](https://github.com/gunnartorfis/sonner-native/commit/47ac27368febde1e73231855a7a5d5135a53310d)) diff --git a/README.md b/README.md index c57131e..5899d82 100644 --- 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 index 85ae025..ca194c3 100644 --- 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 ``` @@ -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 index 1aac18a..2eaa279 100644 --- 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 index b67e95d..81494e5 100644 --- 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 index bcf62f0..b23b2c1 100644 --- 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 deleted file mode 100644 index a13e313..0000000 --- a/nativewind-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/package.json b/package.json index f29f34c..206a43b 100644 --- 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 index 8c1b698..77c2f4a 100644 --- 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; 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 index e5b3fe4..c083168 100644 --- a/src/gestures.tsx +++ b/src/gestures.tsx @@ -19,7 +19,6 @@ const { width: WINDOW_WIDTH } = Dimensions.get('window'); type ToastSwipeHandlerProps = Pick & { 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 index df4c3f2..f9faad8 100644 --- 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 - > -> = ({ children, position, className, style, ...props }) => { + React.PropsWithChildren> +> = ({ 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 index f5ef2e9..d6e76e5 100644 --- a/src/toast.tsx +++ b/src/toast.tsx @@ -34,15 +34,9 @@ export const Toast = React.forwardRef( 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( 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( const { entering, exiting } = useToastLayoutAnimations(position); const isDragging = React.useRef(false); - const timer = React.useRef(); + const timer = React.useRef>(); const timerStart = React.useRef(); const timeLeftOnceBackgrounded = React.useRef(); const isResolvingPromise = React.useRef(false); @@ -277,32 +269,22 @@ export const Toast = React.forwardRef( onPress={() => onDismiss?.(id)} hitSlop={10} style={[closeButtonStyleCtx, styles?.closeButton]} - className={cn(classNamesCtx?.closeButton, classNames?.closeButton)} > ); } 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( 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( onPress, toastContainerStyleCtx, styles?.toastContainer, - classNamesCtx?.toastContainer, - classNames?.toastContainer, unstyled, important, position, - cn, ] ); @@ -372,7 +347,6 @@ export const Toast = React.forwardRef( return ( ( toastContentStyleCtx, styles?.toastContent, ]} - className={cn( - classNamesCtx?.toastContent, - classNames?.toastContent - )} > {promiseOptions || variant === 'loading' ? ( 'loading' in icons ? ( @@ -413,10 +383,7 @@ export const Toast = React.forwardRef( /> )} - + {title} {description ? ( @@ -426,10 +393,6 @@ export const Toast = React.forwardRef( descriptionStyleCtx, styles?.description, ]} - className={cn( - classNamesCtx?.description, - classNames?.description - )} > {description} @@ -442,12 +405,10 @@ export const Toast = React.forwardRef( buttonsStyleCtx, styles?.buttons, ]} - className={cn(classNamesCtx?.buttons, classNames?.buttons)} > {isToastAction(action) ? ( ( actionButtonTextStyleCtx, actionButtonTextStyle, ]} - className={actionButtonTextClassName} > {action.label} @@ -475,7 +435,6 @@ export const Toast = React.forwardRef( cancel.onClick(); onDismiss?.(id); }} - className={cancelButtonClassName} style={[ defaultStyles.cancelButton, cancelButtonStyleCtx, @@ -489,7 +448,6 @@ export const Toast = React.forwardRef( cancelButtonTextStyleCtx, cancelButtonTextStyle, ]} - className={cancelButtonTextClassName} > {cancel.label} diff --git a/src/toaster.tsx b/src/toaster.tsx index 2fce846..0e04465 100644 --- 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, diff --git a/src/types.ts b/src/types.ts index d0314c6..1f6b273 100644 --- a/src/types.ts +++ b/src/types.ts @@ -4,17 +4,6 @@ import type { TextStyle, ViewStyle } from 'react-native'; type StyleProps = { unstyled?: boolean; style?: ViewStyle; - className?: string; - classNames?: { - toastContainer?: string; - toast?: string; - toastContent?: string; - title?: string; - description?: string; - buttons?: string; - closeButton?: string; - closeButtonIcon?: string; - }; styles?: { toastContainer?: ViewStyle; toast?: ViewStyle; @@ -71,12 +60,8 @@ export type ToastProps = StyleProps & { promiseOptions?: PromiseOptions; actionButtonStyle?: ViewStyle; actionButtonTextStyle?: TextStyle; - actionButtonClassName?: string; - actionButtonTextClassName?: string; cancelButtonStyle?: ViewStyle; cancelButtonTextStyle?: TextStyle; - cancelButtonClassName?: string; - cancelButtonTextClassName?: string; onPress?: () => void; }; @@ -108,7 +93,6 @@ export type ToasterProps = { offset?: number; autoWiggleOnUpdate?: AutoWiggle; style?: ViewStyle; - className?: string; // dir?: 'ltr' | 'rtl'; (ltr) // hotkey?: string; // hotkeys not supported on mobile invert?: boolean; @@ -117,18 +101,15 @@ export type ToasterProps = { actionButtonTextStyle?: TextStyle; cancelButtonStyle?: ViewStyle; cancelButtonTextStyle?: TextStyle; - className?: string; titleStyle?: TextStyle; descriptionStyle?: TextStyle; style?: ViewStyle; unstyled?: boolean; - toastContainerStyle?: ViewStyle; toastContentStyle?: ViewStyle; buttonsStyle?: ViewStyle; closeButtonStyle?: ViewStyle; closeButtonIconStyle?: ViewStyle; - classNames?: StyleProps['classNames']; }; gap?: number; loadingIcon?: React.ReactNode; @@ -143,7 +124,6 @@ export type ToasterProps = { }; swipeToDismissDirection?: ToastSwipeDirection; pauseWhenPageIsHidden?: boolean; - cn?: (...classes: Array) => string; ToasterOverlayWrapper?: React.ComponentType<{ children: React.ReactNode }>; }; @@ -162,7 +142,6 @@ export type ToasterContextType = Required< | 'icons' | 'offset' | 'pauseWhenPageIsHidden' - | 'cn' | 'gap' | 'theme' | 'toastOptions' diff --git a/yarn.lock b/yarn.lock index e1fd6db..a39b910 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15531,7 +15531,7 @@ __metadata: languageName: node linkType: hard -"nativewind@npm:4.1.6, nativewind@npm:^4.1.6": +"nativewind@npm:4.1.6": version: 4.1.6 resolution: "nativewind@npm:4.1.6" dependencies: @@ -19352,7 +19352,6 @@ __metadata: 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 @@ -19365,7 +19364,6 @@ __metadata: release-it: ^17.6.0 typescript: ^5.5.4 peerDependencies: - nativewind: "*" react: "*" react-native: "*" react-native-gesture-handler: ">=2.16.1" @@ -19373,9 +19371,6 @@ __metadata: react-native-safe-area-context: ">=4.10.5" react-native-screens: ">=3.31.1" react-native-svg: ">=15.6.0" - peerDependenciesMeta: - nativewind: - optional: true languageName: unknown linkType: soft