tableflip/react-native-toaster

Name: react-native-toaster

Owner: TABLEFLIP

Description: Simple top-pop toast feedback messages for React Native, also Redux compatible

Created: 2016-11-29 16:40:03.0

Updated: 2018-05-23 09:43:25.0

Pushed: 2018-04-24 09:03:56.0

Homepage:

Size: 31

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-native-toaster

Simple top-pop toast feedback messages for React Native.

Example

rt React, { Component } from 'react'
rt { View } from 'react-native'
rt Toaster, { ToastStyles } from 'react-native-toaster'

s App extends Component {
nstructor (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)
})


nder () {
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:

 = (
iew>
<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:

ntainer: {
backgroundColor: '#2487DB',
paddingTop: 25,
paddingRight: 15,
paddingBottom: 15,
paddingLeft: 15

xt: {
color: '#ffffff',
fontWeight: 'bold'

Example with Redux

App.jsx

rt React, { Component } from 'react'
rt { View } from 'react-native'
rt { connect } from 'react-redux'
rt Toaster from 'react-native-toaster'

s App extends Component {
nder () {
return (
  <View>
    <Toaster message={this.props.toastMessage} />
    <LoginForm />
  </View>
)



t mapStateToProps = ({ toastMessage }) => ({ toastMessage })
rt default connect(mapStateToProps)(App)

LoginForm.jsx

rt React, { Component } from 'react'
rt { View, TextInput, TouchableHighlight } from 'react-native'
rt { connect } from 'react-redux'
rt { ToastStyles } from 'react-native-toaster'
rt { addToast } from './redux/actions'
rt styles from './styles'

s LoginForm extends Component {
ate = { email: '', password: '' }

EmailChange = (email) => this.setState({ email })
PasswordChange = (password) => this.setState({ password })

LoginButtonPress = () => {
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
})


nder () {
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>
)



t mapDispatchToProps = { addToast }
rt default connect(null, mapDispatchToProps)(LoginForm)

redux/actions.js

rt const ADD_TOAST = 'ADD_TOAST'
rt function addToast (message) {
turn { type: ADD_TOAST, message }

redux/reducers.js

rt { combineReducers } from 'redux'
rt { ADD_TOAST } from './actions'

tion toastMessage (state = null, action) {
itch (action.type) {
case ADD_TOAST:
  return action.message
default:
  return state



rt default combineReducers({
pState,
astMessage,
nnect: (state = null) => state

Contribute

Feel free to dive in! Open an issue or submit PRs.

License

ISC © TABLEFLIP

---

A (?°?°???TABLEFLIP side project.