react-native-toaster
Simple top-pop toast feedback messages for React Native.
Example
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 ( <View> <Toaster message={this.state.message} /> </View> ) } }
Properties
Prop | Default | Type | Description |
---|---|---|---|
message | - | object / array | The current toast message to display (see below). 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 | - | string / node | Text message to display, or custom element (see below) |
styles | ToastStyles.info | object | Styles for the container and text (see below) |
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:
text = ( <View> <Text>{text}</Text> </View> )
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:
{ container: { backgroundColor: '#2487DB', paddingTop: 25, paddingRight: 15, paddingBottom: 15, paddingLeft: 15 }, text: { color: '#ffffff', fontWeight: 'bold' } }
Example with Redux
App.jsx
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 ( <View> <Toaster message={this.props.toastMessage} /> <LoginForm /> </View> ) } } const mapStateToProps = ({ toastMessage }) => ({ toastMessage }) export default connect(mapStateToProps)(App)
LoginForm.jsx
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 ( <View> <TextInput onChangeText={this.onEmailChange} value={this.state.email} placeholder='Email' /> <TextInput onChangeText={this.onPasswordChange} value={this.state.password} placeholder='Password' /> <TouchableHighlight onPress={this.onLoginButtonPress}> <Text>Login</Text> </TouchableHighlight> </View> ) } } const mapDispatchToProps = { addToast } export default connect(null, mapDispatchToProps)(LoginForm)
redux/actions.js
export const ADD_TOAST = 'ADD_TOAST' export function addToast (message) { return { type: ADD_TOAST, message } }
redux/reducers.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 or submit PRs.
License
ISC © TABLEFLIP
A (╯°□°)╯︵TABLEFLIP side project.