Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
saaf-rn-toast
Advanced tools
Readme
npm install react-native-root-toast
react-native-root-toast >= 2.1.0 only supports react-native >= 0.47.0 , for lower version choose 2.0.0 or below.
In react native >= 0.62, the new LogBox component would impact this component's initialization. To make it work we have to explicitly insert a mount point in your app like this:
// in your entry file like `App.js`
// In theory you don't have to install `react-native-root-siblings` because it's a dep of root-toast
// But you can install it explicitly if your editor complains about it.
import { RootSiblingParent } from 'react-native-root-siblings';
// in your render function
return (
<RootSiblingParent> // <- use RootSiblingParent to wrap your root component
<App />
</RootSiblingParent>
);
You can skip this step if your react-native is lower than 0.62. And actually you can inject RootSiblingParent into anywhere like a react portal, for example if you have multiple rootviews you can choose where to display the root toast.
Read more about react-native-root-siblings
which powers react-native-root-toast
.
There are two different ways to manage a Toast.
import Toast from 'react-native-root-toast';
// Add a Toast on screen.
let toast = Toast.show('This is a message', {
duration: Toast.durations.LONG,
position: Toast.positions.BOTTOM,
shadow: true,
animation: true,
hideOnPress: true,
delay: 0,
onShow: () => {
// calls on toast\`s appear animation start
},
onShown: () => {
// calls on toast\`s appear animation end.
},
onHide: () => {
// calls on toast\`s hide animation start.
},
onHidden: () => {
// calls on toast\`s hide animation end.
}
});
// You can manually hide the Toast, or it will automatically disappear after a `duration` ms timeout.
setTimeout(function () {
Toast.hide(toast);
}, 500);
NOTE:
Showing a toast by using a Component inside render, The toast will be automatically disappeared when the <Toast />
is unmounted.
import React, {Component} from 'react-native';
import Toast from 'react-native-root-toast';
class Example extends Component{
constructor() {
super(...arguments);
this.state = {
visible: false
};
}
componentDidMount() {
setTimeout(() => this.setState({
visible: true
}), 2000); // show toast after 2s
setTimeout(() => this.setState({
visible: false
}), 5000); // hide toast after 5s
};
render() {
return <Toast
visible={this.state.visible}
position={50}
shadow={false}
animation={false}
hideOnPress={true}
>This is a message</Toast>;
}
}
Name | Default | Type | Description |
---|---|---|---|
duration | Toast.durations.SHORT | Number | The duration of the toast. (Only for api calling method) |
visible | false | Bool | The visibility of toast. (Only for Toast Component) |
position | Toast.positions.BOTTOM | Number | The position of toast showing on screen (A negative number represents the distance from the bottom of screen. A positive number represents the distance form the top of screen. 0 will position the toast to the middle of screen.) |
animation | true | Bool | Should preform an animation on toast appearing or disappearing. |
shadow | true | Bool | Should drop shadow around Toast element. |
backgroundColor | null | String | The background color of the toast. |
shadowColor | null | String | The shadow color of the toast. |
textColor | null | String | The text color of the toast. |
delay | 0 | Number | The delay duration before toast start appearing on screen. |
hideOnPress | true | Bool | Should hide toast that appears by pressing on the toast. |
opacity | 0.8 | Number | The Toast opacity. |
onShow | null | Function | Callback for toast`s appear animation start |
onShown | null | Function | Callback for toast`s appear animation end |
onHide | null | Function | Callback for toast`s hide animation start |
onHidden | null | Function | Callback for toast`s hide animation end |
presets of duration of the toast.
Toast.durations.SHORT (equals to 2000)
Toast.durations.LONG (equals to 3500)
presets of position of toast.
Toast.positions.TOP (equals to 20)
Toast.positions.BOTTOM (equals to -20)
Toast.positions.CENTER (equals to 0)
FAQs
react native toast like component, pure javascript solution
We found that saaf-rn-toast 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
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).