Snackbar Opacity

[lnickdnguyen]

Ask your Question

I am using dark theme and for some reason my snackbars have an opacity less than one (making the content below visible). Is there a way to make the snackbar a solid color (opacity = 1)?

[mohanyadav]

Use the onSurface color property in theme to edit the color of the Snackbar

Here I am reducing the opacity of the Snackbar

theme={{
    colors: {
        onSurface: "rgba(0, 0, 0, 0.4)",
    },
}}

Output

In your case, you can set the opacity to 1 in the onSurface property to make it a solid color
In the example below I have changed the color of the Snackbar and the Text

theme={{
    colors: {
      onSurface: "rgba(0, 204, 204, 1)",
      surface: "black",
    },
}}

Output

Snackbar Code for Reference

<Snackbar
    visible={visible}
    onDismiss={this._onDismissSnackBar}
    action={{
        label: "Undo",
        onPress: () => {
            // Do something
            console.log("Hello");
        },
    }}

    theme={{
        colors: {
            onSurface: "rgba(0, 0, 0, 1)",
        },
    }}
>
    I'm a Snackbar.
</Snackbar>

Output

[lnickdnguyen]

@mohanyadav Hey thanks for the tip! Unfortunately, I still am seeing items beneath the snackbar, even after setting the opacity to 1 as you mentioned. Any other ideas?

[TheHuns]

Thanks @mohanyadav! I could not figure out how to change the text color of my message...why would that call it surface...Thanks for the post!

[ShivamGoyal26]

Thank you very much! it has solved my problem :)

[Malik-Usman17]

Use the onSurface color property in theme to edit the color of the Snackbar

Here I am reducing the opacity of the Snackbar

theme={{
    colors: {
        onSurface: "rgba(0, 0, 0, 0.4)",
    },
}}

Output

In your case, you can set the opacity to 1 in the onSurface property to make it a solid color In the example below I have changed the color of the Snackbar and the Text

theme={{
    colors: {
      onSurface: "rgba(0, 204, 204, 1)",
      surface: "black",
    },
}}

Output

Snackbar Code for Reference

<Snackbar
    visible={visible}
    onDismiss={this._onDismissSnackBar}
    action={{
        label: "Undo",
        onPress: () => {
            // Do something
            console.log("Hello");
        },
    }}

    theme={{
        colors: {
            onSurface: "rgba(0, 0, 0, 1)",
        },
    }}
>
    I'm a Snackbar.
</Snackbar>

Output

Looking for this , thanks,
Can you please tell me how I can change the height and width of snackbar.