https://github.com/tableflip/react-native-toaster
Simple top-pop toast feedback messages for React Native, also Redux compatible
https://github.com/tableflip/react-native-toaster
Last synced: 8 months ago
JSON representation
Simple top-pop toast feedback messages for React Native, also Redux compatible
- Host: GitHub
- URL: https://github.com/tableflip/react-native-toaster
- Owner: tableflip
- License: isc
- Created: 2016-11-29T16:40:03.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T17:36:24.000Z (about 3 years ago)
- Last Synced: 2025-10-18T23:57:27.853Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 62.5 KB
- Stars: 85
- Watchers: 2
- Forks: 29
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-toaster [](https://david-dm.org/tableflip/react-native-toaster)
Simple top-pop toast feedback messages for React Native.
## 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.