Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-toaster
Advanced tools
Readme
Simple top-pop toast feedback messages for React Native.
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>
)
}
}
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'
}
}
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
})
Feel free to dive in! Open an issue or submit PRs.
ISC © TABLEFLIP
A (╯°□°)╯︵TABLEFLIP side project.
FAQs
Simple top-pop toast feedback messages for React Native
The npm package react-native-toaster receives a total of 497 weekly downloads. As such, react-native-toaster popularity was classified as not popular.
We found that react-native-toaster demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.