# react-native-toaster [![dependencies Status](https://david-dm.org/tableflip/react-native-toaster/status.svg)](https://david-dm.org/tableflip/react-native-toaster) Simple top-pop toast feedback messages for React Native. ![demo](https://cloud.githubusercontent.com/assets/152863/20730697/fb6bf4e0-b67e-11e6-9964-591fb7a1dc78.gif) ## Example ```js import React, { Component } from 'react' import { View } from 'react-native' import Toaster, { ToastStyles } from 'react-native-toaster' class App extends Component { constructor (props) { super(props) this.state = { message: null } const messages = [ { text: 'FYI' }, { text: 'Hooray!', styles: ToastStyles.success }, { text: 'Eek', styles: ToastStyles.warning }, { text: 'Oh noe!', styles: ToastStyles.error } ] // Send each message 1 second apart messages.forEach((message, i) => { setTimeout(() => this.setState({ message }), i * 1000) }) } render () { return ( ) } } ``` ## Properties | Prop | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | [message](#message) | - | `object` / `array` | The current toast message to display ([see below](#message)). Multiple messages are shown one at a time after each other. | | onShow | null | `func` | Callback called when a message is shown, passed the message as the first parameter | | onHide | null | `func` | Callback called when a message is hidden, passed the message as the first parameter | | onPress | null | `func` | Callback called when the user press a message, passed the message as the first parameter | ### `message` | Prop | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | [text](#text) | - | `string` / `node` | Text message to display, or custom element ([see below](#text)) | | [styles](#styles) | ToastStyles.info | `object` | Styles for the container and text ([see below](#styles)) | | duration | 3000 | `number` | Duration in ms the toast is shown for | | height | 100 | `number` | Height of the toast message | | onShow | null | `func` | Callback called when this message is shown | | onHide | null | `func` | Callback called when this message is hidden | | onPress | null | `func` | Callback called when this message is pressed | #### `text` The `text` property can be either a simple string or a custom element to be rendered. If a string is passed, it is wrapped in a container `View` and `Text` element: ```js text = ( {text} ) ``` Both the container `View` and `Text` element can be styled using the `styles` property. #### `styles` An object used to style the container `View` and `Text` elements when `message.text` is a `string`. Defaults to `ToastStyles.info` if not set and should look like this: ```js { container: { backgroundColor: '#2487DB', paddingTop: 25, paddingRight: 15, paddingBottom: 15, paddingLeft: 15 }, text: { color: '#ffffff', fontWeight: 'bold' } } ``` ## Example with Redux **App.jsx** ```js import React, { Component } from 'react' import { View } from 'react-native' import { connect } from 'react-redux' import Toaster from 'react-native-toaster' class App extends Component { render () { return ( ) } } const mapStateToProps = ({ toastMessage }) => ({ toastMessage }) export default connect(mapStateToProps)(App) ``` **LoginForm.jsx** ```js import React, { Component } from 'react' import { View, TextInput, TouchableHighlight } from 'react-native' import { connect } from 'react-redux' import { ToastStyles } from 'react-native-toaster' import { addToast } from './redux/actions' import styles from './styles' class LoginForm extends Component { state = { email: '', password: '' } onEmailChange = (email) => this.setState({ email }) onPasswordChange = (password) => this.setState({ password }) onLoginButtonPress = () => { const { email, password } = this.state // TODO: Send to server, on response call addToast: this.props.addToast({ text: 'Successfully logged in', styles: ToastStyles.success }) // --- or --- this.props.addToast({ text: 'Login failed, check your email or password', styles: ToastStyles.error }) } render () { return ( Login ) } } const mapDispatchToProps = { addToast } export default connect(null, mapDispatchToProps)(LoginForm) ``` **redux/actions.js** ```js export const ADD_TOAST = 'ADD_TOAST' export function addToast (message) { return { type: ADD_TOAST, message } } ``` **redux/reducers.js** ```js import { combineReducers } from 'redux' import { ADD_TOAST } from './actions' function toastMessage (state = null, action) { switch (action.type) { case ADD_TOAST: return action.message default: return state } } export default combineReducers({ appState, toastMessage, connect: (state = null) => state }) ``` ## Contribute Feel free to dive in! [Open an issue](https://github.com/tableflip/react-native-toaster/issues/new) or submit PRs. ## License [ISC](LICENSE) © TABLEFLIP ---- A [(╯°□°）╯︵TABLEFLIP](https://tableflip.io) side project.

	Stars	Issues	Version	Updated	Created
react-native-snackbar	808	28	2.6.2	a year ago	7 years ago
react-native-toast			1.0.1	8 years ago	8 years ago
react-native-toast-native			1.2.1	7 years ago	7 years ago
react-native-toaster	86	17	1.2.2	6 years ago	7 years ago

react-native-snackbar vs react-native-toast vs react-native-toast-native vs react-native-toaster

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past