[BUG] Custom JSX Component Breaks Animation

[oktaysenkan]

Describe the bug
When a custom JSX component is passed to the Toast component, the animations don’t trigger properly. Specifically, the condition

if (jsx) {
  return jsx;
}

short-circuits the rest of the component, preventing any animations from running when a custom component is provided.

To Reproduce
Steps to reproduce the behavior:

1. Create custom toast

toast.custom(
    <View
        style={{
            width: '80%',
            backgroundColor: '#26252A',
            paddingLeft: 24,
            paddingRight: 8,
            paddingVertical: 8,
            borderRadius: 999,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            borderCurve: 'continuous',
        }}>
        <Text
            style={{
                color: '#fff',
                fontWeight: '600',
            }}>
            Custom JSX
        </Text>
        <Touchable
            style={{
                backgroundColor: '#40424B',
                borderWidth: 1,
                borderColor: '#55555C',
                borderRadius: 999,
                padding: 8,
            }}>
            <Text
                style={{
                    color: '#fff',
                    fontWeight: '600',
                }}>
                Press me
            </Text>
        </Touchable>
    </View>,
    {
        duration: 3000,
    }
)

Expected behavior
Animations should still run even when a custom JSX component is provided.

Screenshots

Screen.Recording.2024-10-24.at.10.43.17.mov

Environment info

Library	Version
sonner-native	^0.15.0
react-native	0.74.5
react-native-reanimated	~3.10.1
react-native-gesture-handler	~2.16.1

[mrpmohiburrahman]

Hi, @gunnartorfis,
I want to work on this, if that's ok.

[gunnartorfis]

@mrpmohiburrahman PRs are always welcome.

[mrpmohiburrahman]

@mrpmohiburrahman PRs are always welcome.

I am working on it, full time.

[mrpmohiburrahman]

Hi, @gunnartorfis ,
Please, check this pr: #152