rnheroes / react-native-toastable

🍞 Blazingly fast and fully customizable Toaster component for React Native
https://www.npmjs.com/package/react-native-toastable
MIT License
91 stars 4 forks source link

Dont work right. #10

Closed gabriel-logan closed 6 months ago

gabriel-logan commented 6 months ago

image

image

I've already tried involving it in a safeareaprovider, it doesn't work. I made it work without the offset, but when I click on show and hide several times at the same time, toast crashes and stays open forever.

enestatli commented 6 months ago

Hello, you have to wrap your whole app with SafeAreaProvider, I cannot see that in the attached images. If you are not sure how to do it, I can show you an example.

gabriel-logan commented 6 months ago

Show me please, then

enestatli commented 6 months ago

export default function RootNavigation() {
    const { top } = useSafeAreaInsets();

    return (
        <RootProvider>
            <NavigationContainer />
            <Toastable
                statusMap={{
                    success: 'red'
                    danger: 'yellow'
                    warning: 'green'
                    info: 'blue'
                }}
                offset={top}
            />
        </RootProvider>
    );
}

import { SafeAreaProvider } from 'react-native-safe-area-context';

export const RootProvider = ({ children }: PropsWithChildren) => (
    <SafeAreaProvider>
        { /* your other providers */ }
            {children}
    </SafeAreaProvider>
);
gabriel-logan commented 6 months ago

Ok, it works, I tested it with your settings, just a note, it is saving the state and not providing security in the rendering, if the user clicks several times to run the show toast, it saves the state and even if the user stops clicking it keeps spawning on the screen continuously.

Another thing, I tested it within redux saga and it didn't work, is there any way to make it work there?

enestatli commented 6 months ago

Can you show me the code? It should work within React context or outside.

It will be shown as much as user clicks the button. What's wrong with this?

gabriel-logan commented 6 months ago

I suggest you add a takeLatest, so if the user clicks several times, the component will only execute based on the last one, not causing an overload crash.

About redux, in a common redux, I tested it and it worked in react components, but trying to run it in the saga generator function, it simply wouldn't open. But anyway, I'm not using your lib anymore, thank you.