Nativebase: Toast Message

Created on 16 Jan 2017 · 9Comments · Source: GeekyAnts/NativeBase

I would like to have a toast message component that can be invoked like Toast.show() that would behave like the platform defaults. The modal toast can be closed by calling Toast.hide(). This would be very useful to showcase quick snippets of information.

enhancement

Source

allentv

👍8

Most helpful comment

I'm fairly new to React. First off the library is brilliant. Thanks for all the hard work!
My question - I find it interesting that Toast seems to deviate from the typical declarative pattern. For example, I want a message to appear based on result of an async action such as making a network call. For that to work I would have to trigger Toad from the ajax call back which IMO feels anti-pattern. Any suggestions?

vietnugent on 11 May 2017

👍4

All 9 comments

We have some visibility on Toast. We are going to add it to v2.0 in the coming weeks.

sanketsahu on 14 Feb 2017

Hi, any update about the Toast now that v2.0 is out?

zjaml on 23 Feb 2017

Hi, toast is under current development. Will be shipped with the weekend release!

sankhadeeproy007 on 23 Feb 2017

👍1

Toast has been added to NativeBase 2.0.10. Here's how to use it, till the time the docs go live.

constructor(props) {
    super(props);
    this.state = {
      showToast: false
    }
  }
  render() {

    return (
        <Container>
          <Header>
            <Left>
              <Button transparent>
                <Icon name="arrow-back" />
              </Button>
            </Left>
            <Body>
              <Title>Hello</Title>
            </Body>
            <Right>
              <Button transparent>
                <Icon name="search" />
              </Button>
            </Right>
          </Header>
          <Content padder>
            <Button onPress={()=> {this.setState({
              showToast: !this.state.showToast
            })}} first><Text>Puppies</Text></Button>
          </Content>
          <Toast
            showToast={this.state.showToast}
            buttonText="Okay"
            buttonPress={()=> this.setState({
              showToast: !this.state.showToast
            })}
            position="bottom">
            <Text>Wrong password!</Text>
          </Toast>
        </Container>
    );
  }
}

sankhadeeproy007 on 24 Feb 2017

👎2

@allentv @zjaml @aaray @designorant Toast isn't stable yet! We are changing the API with the next release.

After an internal discussion it was decided that we should be able to call Toast.show() instead of injecting the component in the tree and guiding it by a state variable. It would be easy.

sanketsahu on 28 Feb 2017

👍1

First, thanks for the awesome work on this repo!

@sanketsahusoft Is the current example in the documentation up-to-date? I'm on 2.0.12 and I can't manage to have Toast working.
And in terms of code it looks like there's a duplicate declaration of Toast component.