[BUG] Custom JSX Component Breaks Animation

oktaysenkan commented 1 week ago

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:

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

https://github.com/user-attachments/assets/6f651abb-fe4b-491c-80ef-53ab83358210

Environment info