[BUG] Android - show only when hiding

[aloky]

Describe the bug Show only when closing toast

To Reproduce simple

toast.error('Simple');

Expected behavior work like on ios

https://github.com/user-attachments/assets/6b1a985c-708f-4a0a-bd98-614edffe8f68

Library	Version
sonner-native	0.14.2
react-native	0.74.5
react-native-reanimated	3.10.1
react-native-gesture-handler	2.16.1

[gunnartorfis]

Please add code examples, both how you're calling toast.error and the place where you render the <Toaster

[aloky]

app/_layout.tsx

<Providers splashScreen={SplashScreen}>
      <ThemeContext.Provider value={{ theme, setTheme }}>
        <Toaster
          style={{ backgroundColor: themeColor.background }}
          duration={2_500}
          swipeToDismissDirection="up"
        />
        ...
</Providers>

[gunnartorfis]

@aloky what is within the Providers component? Try to strip out the configs for the , like removing that 2_500 duration and swipToDismissDirection - does that change anything? How are you calling toast.error?

[eugustavo]

Hello, @gunnartorfis!

I saw this issue and I'm also facing the same problem, I don't know if you tested it in Expo Go but it seems to me that it doesn't have support for react-native-z-view for me this appeared here and when I researched further I saw that would be for this reason

Is there any way to make toast work on Android with another Wrapper? My src/app/_layout.tsx here:

...
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { ZView } from 'react-native-z-view'
import { Toaster } from 'sonner-native'

<SafeAreaProvider>
     ...
      <GestureHandlerRootView>
        <Toaster
          ToasterOverlayWrapper={ZView}
          position="top-center"
          duration={3000}
          swipeToDismissDirection="up"
        />
      </GestureHandlerRootView>
      ...
</SafeAreaProvider>

Onde estou usando, chamo normalmente o toast e ele fica aparecendo e desaparecendo igual o vídeo acima. Se tiver algo que eu possa fazer para ajudar, estou a disposição.

import { toast } from 'sonner-native'

// inside the function I call it like this
toast.loading('Carregando informações')

Note: I translated all the text with Google Translate, if something is not clear, please let me know.