[BUG] Exiting animation triggers at the top despite bottom center position

[natedevxyz]

Describe the bug
When using the bottom position for a custom toast, the exit animation still affects the top of the screen.

To Reproduce

1. Create a custom toast component
2. Pass the component using the custom function.
3. Set position: bottom-center in the options object
4. Trigger the toast and see the error

Expected behavior
The animation moves in the correct direction (down) but starts from the top instead of the bottom.

Screenshots

Environment info

Library	Version
sonner-native	0.16.1
react-native	0.76.2
react-native-reanimated	3.16.1
react-native-gesture-handler	2.20.2

[gunnartorfis]

@natedevxyz can you share with me the JSX (or the whole toast.custom() function call)? Also the rendering.

[natedevxyz]

@natedevxyz can you share with me the JSX (or the whole toast.custom() function call)? Also the rendering.

Yes, of course. Let me know if you need anything else.

toast.custom() function call:

toast.custom(<SystemToast text={`followed @${cast.author.username}`} />, {
        duration: 1000,
        unstyled: true,
        dismissible: false,
      });

component:

export const SystemToast = ({ text }: { text: string }) => {
  return (
    <View style={tw`flex flex-row items-center justify-center py-1`}>
      <View style={tw`bg-brand-black px-4 py-2 rounded-md border`}>
        <Text style={tw`text-brand-white text-sm font-sans-light`}>{text}</Text>
      </View>
    </View>
  );
};

The rendering is the black box you see at the bottom of the GIF. I'm trying to achieve a similar feel to a system toast, like when you copy text to the clipboard. That's why I'm not using the default style.

[gunnartorfis]

@natedevxyz thanks
How's the <Toaster /> rendered?

Not that this animation is perfect, but it is at least not fundamentally broken like the one you're experiencing 😆

Screen.Recording.2025-02-07.at.08.31.49.mov

[natedevxyz]

@natedevxyz thanks How's the <Toaster /> rendered?

Not that this animation is perfect, but it is at least not fundamentally broken like the one you're experiencing 😆

Screen.Recording.2025-02-07.at.08.31.49.mov

I have a root layout that has all the app's providers and a <Slot />

<SafeAreaProvider>
              <Slot />
              <Toaster
                toastOptions={{
                  titleStyle: {
                    fontFamily: 'Inter_400SemiBold',
                  },
                  descriptionStyle: {
                    fontFamily: 'Inter_400Regular',
                  },
                  style: {
                    borderColor: '#111827',
                    borderWidth: StyleSheet.hairlineWidth,
                    borderRadius: 8,
                  },
                }}
              />
            </SafeAreaProvider>

[gunnartorfis]

@natedevxyz hey mate. I suppose in your example, your .custom() call's second argument is missing the position property as bottom-center.

The good thing is that I managed to reproduce this last night and narrowed down where the issue is. This line here is going to the default position, so it moves up like in your animation.

A workaround is to set the toast position in the and not override it via the .custom() call.
I'll take a stab at this soon, quite swamped with work these days!

[natedevxyz]

@natedevxyz hey mate. I suppose in your example, your .custom() call's second argument is missing the position property as bottom-center.

The good thing is that I managed to reproduce this last night and narrowed down where the issue is. This line here is going to the default position, so it moves up like in your animation.

A workaround is to set the toast position in the and not override it via the .custom() call. I'll take a stab at this soon, quite swamped with work these days!

Yes, sorry about that, the issue occurs when adding position: 'bottom-center'. I copied the current code from my codebase because if I add that I get the wrong animation.

No worries about the timing, I appreciate you taking a look at it.