react-native-magic-toast
v0.3.1
Published
A beautiful, imperative, toast you can call from anywhere!
Downloads
288
Maintainers
Readme
React Native Magic Toast 🦄
A beautiful Toast library that can be called imperatively from anywhere!
| IOS | Android | | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | | |
Installation
yarn add react-native-magic-toast react-native-magic-modal react-native-safe-area-context
This toast uses react-native-magic-modal as a base for displaying it anywhere. react-native-safe-area-context is here to prevent the modal message from being underneath safe areas.
Usage
Insert a SafeAreaProvider encapsulating your app and a MagicModalPortal right beneath it
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { MagicModalPortal } from 'react-native-magic-modal';
export default function App() {
return (
<SafeAreaProvider>
<MagicModalPortal />
// <Router />
</SafeAreaProvider>
);
}
Then, you are free to use the magicToast as shown from anywhere you want.
import { magicToast } from 'react-native-magic-toast';
// ...
magicToast.alert('Oops! Something went wrong 😬');
magicToast.success('Hurray! Saved successfully');
// You can also use the show method to render a custom toast
magicToast.show(() => (
/**
* Toast.Container is obligatory as it handles the duration, but you are free
* to customize the View as you wish. You can change the default background color,
* padding, everything! The rest of the components are optional and just help you
* to build a toast faster.
*/
<Toast.Container duration={1000}>
<MyCustomIcon />
<Toast.Message>My custom toast</Toast.Message>
</Toast.Container>
));
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
Made with 💖 by Gabriel Taveira