React Native Toast

In this tutorial I will let you guys know about react native toast.

toast is a type of alert box used by react native to give some information to the user.

for example if user click on the button we can let the user know they have press the button.

Firstly start new react native project by executing following command:

create-react-native-app appname

Once your react native project created just enter into the directory by using following commands:

cd appname

Now here execute npm start command to start the react native expo server for testing.

npm start

After this open your app.js file which is downloaded with the project files.

Here is the code for creating our first toast.

<Container>
<Header/>
<Contentpadder>
<Button onPress={()=> Toast.show({
text: 'Wrong password!',
buttonText: 'Okay'
})}>
<Text>Toast</Text>
</Button>
</Content>
</Container>
You can see in the above code I have  use button and on press function to show a toast on button click.
Toast.show is a keyword to print toast on screen and text keyword is used to print toast message
after text there is buttonText which is shown on the button to dismiss the notification.
Here is the output for the above code :
React Native Toast
React Native Toast
Complete code for app.js file :
import React, { Component } from 'react';
import { Container, Header, Content, Toast, Button, Text } from 'native-base';
export default class ToastExample extends Component {
render() {
return (
<Container>
<Header/>
<Contentpadder>
<ButtononPress={()=> Toast.show({
text: 'Wrong password!',
buttonText: 'Okay'
})}>
<Text>Toast</Text>
</Button>
</Content>
</Container>
);
}
}
you can also download this code from github:
Download project on Github
Download project on Github

9 thoughts on “React Native Toast

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Excellent goods from you, man. I’ve understand your stuff previous to and you’re simply too excellent. I actually like what you’ve acquired here, certainly like what you are saying and the best way in which you are saying it. You are making it enjoyable and you still take care of to stay it smart. I can not wait to learn far more from you. This is actually a wonderful website.

  2. I simply want to say I’m beginner to blogging and certainly liked this page. Very likely I’m likely to bookmark your blog . You certainly come with impressive writings. With thanks for revealing your website page.

  3. Youre so awesome, man! I cant believe I missed this blog for so long. Its just great stuff all round. Your design, man…too amazing! I cant wait to read what youve got next. I love everything that youre saying and want more, more, MORE! Keep this up, man! Its just too good.

  4. I spent four years trying EVERYTHING in Online Dating, and through a huge amount of trial and error, I produced a system that I will share for you. This book will take you, step by step, through everything you need to know to double, triple or even quadruple the number of women you meet online.

  5. A formidable share, I simply given this onto a colleague who was doing somewhat evaluation on this. And he actually bought me breakfast as a result of I discovered it for him.. smile. So let me reword that: Thnx for the deal with! However yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading extra on this topic. If potential, as you turn into expertise, would you mind updating your weblog with more details? It’s highly helpful for me. Massive thumb up for this blog publish!

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.