Comments (14)
+1 for any progress on this?
from react-hot-toast.
Workaround:
change
import { useToaster } from 'react-hot-toast'
to
import { useToaster } from 'react-hot-toast/src/core/use-toaster'
and when creating a toast use:
import { toast } from 'react-hot-toast/src/core/toast'
toast('Hello Native', {
icon: '🔥',
})
from react-hot-toast.
Oh, you are right. I was able to reproduce this.
It seems like this was caused by 1.0.1
, since it worked fine with 1.0.0
.
useToaster
shouldn't have any dependency on goober - I'll have a look.
from react-hot-toast.
The answer is no. However, 1.0.0 does work.
Snack: https://snack.expo.dev/@nandorojo/2fce9a
try changing 2.1.0 → 1.0.0 in package.json. That's the only solution.
from react-hot-toast.
Hey,
Iam trying to use this library inside react-native, however I keep getting
Can't find variable: Document
I have this notifcation component:
import { MaterialIcons } from '@expo/vector-icons' import React, { useRef } from 'react' import { useToaster } from 'react-hot-toast' import { Animated, Text, View } from 'react-native' const Toast = ({ t, updateHeight, offset }) => { const fadeAnim = useRef(new Animated.Value(0.5)).current // Initial value for opacity: 0 const posAnim = useRef(new Animated.Value(-80)).current // Initial value for opacity: 0 React.useEffect(() => { Animated.timing(fadeAnim, { toValue: t.visible ? 1 : 0, duration: 300, useNativeDriver: true, }).start() }, [fadeAnim, t.visible]) React.useEffect(() => { Animated.spring(posAnim, { toValue: t.visible ? offset : -80, useNativeDriver: true, }).start() }, [posAnim, offset, t.visible]) return ( <Animated.View pointerEvents='none' style={{ position: 'absolute', left: 0, right: 0, zIndex: 9999, alignItems: 'center', opacity: fadeAnim, transform: [ { translateY: posAnim, }, ], }}> <View onLayout={(event) => updateHeight(t.id, event.nativeEvent.layout.height) } style={{ marginTop: 50, backgroundColor: t.type === 'success' ? '#4caf50' : '#f44336', maxWidth: '80%', borderRadius: 30, flexDirection: 'row', alignItems: 'center', paddingVertical: 8, paddingHorizontal: 12, }} key={t.id}> <MaterialIcons name={t.type === 'success' ? 'check-circle-outline' : 'error-outline'} size={24} color='white' /> <Text style={{ color: '#fff', padding: 4, flex: 1, textAlign: 'center', }}> {t.message} </Text> </View> </Animated.View> ) } const Notification = () => { const { toasts, handlers } = useToaster() return ( <View style={{ position: 'absolute', top: 0, left: 0, right: 0, }}> {toasts.map((t) => ( <Toast key={t.id} t={t} updateHeight={handlers.updateHeight} offset={handlers.calculateOffset(t.id, { reverseOrder: false, })} /> ))} </View> ) } export default Notification
and I use that instead of
<Toaster />
Apart from that the only imports I do look like this:
import { toast } from 'react-hot-toast'
The reason why this issue is happening is because, react-hot-toast has a dependency on goober and goober internally uses the HTML Document object which is not present in react native..
I too want to use this library for my react-native projects...
from react-hot-toast.
Same thing here. @timolins thanks for taking a look!
My guess is it's caused by use of setup
, but I'm not sure.
Adding sideEffects: false
to package.json
would help for tree shaking btw. It might also help with this, but not sure.
from react-hot-toast.
Solved it for now by using https://github.com/ds300/patch-package and just removing everything goober
related and rebuilding
from react-hot-toast.
This is weird, I tried to use sideEffect: false
but the issue remains.
I can't seem to find a reason why this should happen when comparing v1.0.0...v1.0.1 - this is the update when it stopped working.
from react-hot-toast.
These are the errors that come when trying to use react-hot-toast in React Native:
from react-hot-toast.
Is react-native working in the latest version of react-hot-toast? Hoping to try it again.
from react-hot-toast.
@timolins I think one solution could be to add this to the the package.json
:
{
"react-native": "./src/index.ts"
}
This would direct native apps to go directly to the source code. This is common practice, since native apps transpile node modules.
To that end, there could be a file that only exports the headless components:
src/headless.ts
export ... // export all the non-web files here
And then in src/index.ts
:
export * from './headless'
// then export the web-only things here
The final step here, would be to let users import from react-hot-toast/headless
Similar to how SWR does this, we could add an exports
field to package.json
:
{
"exports": {
"./package.json": "./package.json",
".": {
"import": "./dist/index.js",
"require": "./dist/index.js",
"types": "./dist/index.d.ts"
},
"./headless": {
"import": "./dist/headless.js",
"require": "./dist/headless.js",
"types": "./dist/headless.d.ts"
},
},
}
I'm not sure what your build script is doing, but it seems like the dist
will output those files. Would you be open to adding this?
from react-hot-toast.
Great idea. Yes I'd be open for that. I'm using TSDX under the hood for the build. I think it should possible to get an output like this. I'm limited on time right now, would you mind submitting a PR? (If not I can have a look in ~2-3 weeks)
from react-hot-toast.
@timolins @nandorojo Were you able to look into this?
from react-hot-toast.
Bump! I'd love to use this in my project. I've gotten used to it.
from react-hot-toast.
Related Issues (20)
- Custom / Position HOT 1
- Property 'document' doesn't exist || Cannot read property 'useToaster' of undefined. React Native HOT 2
- Toaster gives Unhandled RunTime Error on Nextjs HOT 4
- Toasts not firing (help). HOT 2
- How can i pass dynamic variable to toast.promise loading? HOT 1
- Allow customizing slide up/down animation
- Allow customizing exit animation when user manually dismisses toast HOT 2
- toast.loading() not working with nextjs 14 HOT 3
- Pause on Hover does not work with Headless UI HOT 1
- Dismiss toast by matching toastIds with regex
- Custom output direction HOT 1
- Support loading with "mask"
- Element type Error when using with nextjs and redux-toolkit
- Accessibility
- (Suggestion) Enhancing Web Accessibility
- Add delay to toast
- Feature Requests for warning and max toast
- Toast persists after page navigation HOT 1
- Support popover api
- Dismiss a headless toast? HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-hot-toast.