gunnartorfis/sonner-native

Partial styling not effected

Closed this issue · 2 comments

i wanted to customize the styles (background color and fonts) but not go fully unstyled. However, the custom fonts get's applied but the background color does not not

To Reproduce

  1. setup sonner native as normal
  2. add default styles to toaster:
        <Toaster
            theme={colorScheme}
            toastOptions={{
              titleStyle: {
                fontFamily: "poppins-semibold",
                color: NavTheme[colorScheme].colors.text,
              },
              descriptionStyle: {
                fontFamily: "poppins-regular",
                color: NavTheme[colorScheme].colors.text,
              },
              toastContainerStyle: {
                backgroundColor: NavTheme[colorScheme].colors.secondary,
              },
            }}
          />

where colors.text = #F9FAFB | #030712
where colors.secondary = #1f2937 | #f3f4f6
based on the current theme

Expected behavior
The background color of the toast should appear as expected instead of casting an off background behind the actual toast.

Screenshots
photo_2024-09-18 7 44 17 PM

Environment info

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

To speed up the fixing process since I don't have time until tomorrow to take a look at this, did you try:

  • Some other style key for the background? I'm on mobile currently but wasn't here some content style too?
  • Did you try passing the style via the toast() call and see if that works? Just to help me diagnose this later.

Yes, I tried some other styles too and even with classnames. 'Nativewind' classnames had no effect at all.
contentStyle was applied to the section of the 'title' and 'description' only, combined with border styles still didn't work.

Tried specifying the styling in different props too:

  • style
  • toastoptions.style