Nativebase: How can I change style of Toast

[ngocdb]

I don't find any option to change the style (e.g opacity, backgroundColor,...) of Toast from the document http://docs.nativebase.io/Components.html#Toast

So how can I do that ?

[SupriyaKalghatgi]

@Jasbir23 Need to document Toast styling
Also its been missing in CheatSheet

[sankhadeeproy007]

you can pass style object

Toast.show({
 text: "Wrong password!",
 type: "success",
 buttonText: "close",
 style: {
  backgroundColor: "blue"
 }
})              

[paranat9221]

@sankhadeeproy007 Can I change fontStyle???

[IbraheemAlSaady]

I'm late for the party, but this is in case someone is having a problem with this, I managed to pull this off by doing something like this

const style = { backgroundColor: 'YOUR_BG_COLOR', ...};
const textStyle = { color: 'YOUR_TEXT_COLOR', fontFamily: 'YOUR_FONT_NAME, ... };

Toast.show({
    text: message,
    position: 'bottom',
    duration,
    style: style, // this style will go on the View
    textStyle: textStyle // this style will go on the Text
  });

These props should be added to the docs

[Aishwarya-Surana]

Can I change button position?

[SupriyaKalghatgi]

@Aishwarya-Surana Yes!
Go through Docs

[eddiesmag]

I'm late for the party, but this is in case someone is having a problem with this, I managed to pull this off by doing something like this

const style = { backgroundColor: 'YOUR_BG_COLOR', ...};
const textStyle = { color: 'YOUR_TEXT_COLOR', fontFamily: 'YOUR_FONT_NAME, ... };

Toast.show({
    text: message,
    position: 'bottom',
    duration,
    style: style, // this style will go on the View
    textStyle: textStyle // this style will go on the Text
  });

These props should be added to the docs

@IbraheemAlSaady

style: style, // this style will go on the View

nice response but can this be applied to native-base's Toast? i don't think so!

[darrylyoung]

@eddiesmag

nice response but can this be applied to native-base's Toast? i don't think so!

Sure, you can add styles like this (thanks for originally sharing, @IbraheemAlSaady). I just used the following with the Toast component.

const style = {
  backgroundColor: "rgba(0,0,0,0.6)",
  marginBottom: 70
}

Toast.show({
  text: `Successfully updated ${detail}`,
  buttonText: "Okay",
  duration: 1500,
  buttonStyle: { backgroundColor: "#5cb85c" },
  style
})