Gathering detailed insights and metrics for react-native-toasted
Gathering detailed insights and metrics for react-native-toasted
npm install react-native-toasted
Typescript
Module System
Node Version
NPM Version
JavaScript (100%)
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
2,548
Last Day
1
Last Week
2
Last Month
8
Last Year
1,498
MIT License
30 Commits
1 Watchers
19 Branches
2 Contributors
Updated on Jan 13, 2024
Latest Version
1.2.0
Package Id
react-native-toasted@1.2.0
Unpacked Size
748.97 kB
Size
216.31 kB
File Count
214
NPM Version
6.13.4
Node Version
12.10.0
Cumulative downloads
Total Downloads
Last Day
0%
1
Compared to previous day
Last Week
100%
2
Compared to previous week
Last Month
-65.2%
8
Compared to previous month
Last Year
267.2%
1,498
Compared to previous year
2
2
3
This React-Native toast library offers style and layout customization by supplying your own display components.
By supplying your own display component, you can pass any props you need, and structure the contents however you want.
yarn add react-native-toasted
If Toasted.add
is called with a string or React node,
it will be passed into the display component as the content
prop.
1import Toasted from 'react-native-toasted'; 2 3Toasted.add('Get Toasted!'); 4Toasted.add(<Text>Get Toasted!</Text>);
To override the duration or display component for a single toast, use the full-props syntax.
1Toasted.add({ 2 content: 'Get Toasted!', 3 duration: 3500, 4 ToastComponent: ({ content }) => <View><Text>{content}</Text></View> 5});
Also use the full-props syntax to implement your own custom props.
1Toasted.add({ 2 icon: 'star', 3 text: 'Get Toasted!', 4 duration: 3500, 5 ToastComponent: ({ icon, text }) => ( 6 <View> 7 <Icon name={icon} /> 8 <Text>{text}</Text> 9 </View> 10 ) 11});
Assign a falsy value for duration
to keep the toast open indefinitely.
Dismiss a toast at any time by calling the close
function, provided as a prop.
1Toasted.add({ 2 content: 'Get Toasted!', 3 duration: null, 4 ToastComponent: ({ content, id }) => ( 5 <View> 6 <Text>{content}</Text> 7 <Button title="Dismiss" onPress={() => Toasted.remove(id)} /> 8 </View> 9 ) 10});
Note: You may also remove a toast at any time by calling the global Toasted.remove
method with the toast's id
(this is also available as a prop).
To set the default props and display components for all toasts,
call Toasted.configure
once in your app (before calling Toasted.add
).
(Here we import the default components for demonstration, but you can supply your own.)
1import Toasted, { DefaultToast, DefaultToastContainer } from 'react-native-toasted'; 2 3Toasted.configure({ 4 5 // Set default props for every toast 6 defaultToastProps: { 7 duration: 3500, 8 ToastComponent: DefaultToast, 9 }, 10 11 // Override the container (controls stacking and position) 12 ToastContainerComponent: DefaultToastContainer, 13});
You can find an Expo app in the examples
directory.
Run it with yarn install && yarn start
.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
67 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-03-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More