Toast component for React Native, supports Android, IOS and Web
- Fully Customizable
- Swipe to close support
- Smooth animation
- Fully typed with TypeScript
Open a Terminal in the project root and run:
yarn add react-native-toast-notificationsWrap your app in the ToastProvider, which provides context for the Toast hook.
import { ToastProvider } from 'react-native-toast-notifications'
export default function App() {
return (
<ToastProvider>
<RestOfYourApp />
<ToastProvider/>
);
}Then use hook like this everywhere in your app:
import { useToast } from "react-native-toast-notifications";
const Component = () => {
const toast = useToast();
useEffect(() => {
toast.show("Hello World");
}, []);
};toast.show("Task finished successfully", {
type: "normal | success | warning | danger | custom",
placement: "top | bottom",
duration: 4000,
offset: 30,
animationType: "slide-in | zoom-in",
});let id = toast.show("Loading...");
toast.update(id, "Loading completed", {type: "success"});let id = toast.show("Loading...");
toast.hide(id);
// or
toast.hideAll();There are lots of props to customize your toast or your can use renderToast to implement your own component.
<ToastProvider
placement="bottom | top"
duration={5000}
animationType='slide-in | zoom-in'
animationDuration={250}
successColor="green"
dangerColor="red"
dangerColor="red"
warningColor="orange"
normalColor="gray"
icon={<Icon />}
successIcon={<SuccessIcon />}
dangerIcon={<DangerIcon />}
warningIcon={<WarningIcon />}
textStyle={{ fontSize: 20 }}
offset={50} // offset for both top and bottom toasts
offsetTop={30}
offsetBottom={40}
swipeEnabled={true}
renderToast={(toastOptions) => JSX.Element} implement custom toast component.
>
...
</>You can implement your own custom types or overwrite the existing ones
<ToastProvider
renderType={{
custom_type: (toast) => (
<View style={{padding: 15, backgroundColor: 'grey'}}>
<Text>{toast.message}</Text>
</View>
)
}}
>
...
</>
// You can pass other data to your custom toast using data property in show method.
toast.show("Show custom toast", {data: { title: 'Toast title' }})To call toasts everywhere (even outside of React components like in redux actions), After you wrapped your app in ToastProvider, You can use the Toast import to call toasts everywhre.
import {Toast} from "react-native-toast-notifications";
// you can call this everywhere
Toast.show('toast message')The Modal component is a native view that sits on top of the rest of react-native application. The only way to put something above it is to put something in the modal itself, or alternately to use a JS only implementation of a Modal.
As a workaround you can put toast inside modal like this:
import Toast from "react-native-toast-notifications";
export Component = () => {
const toastRef = useRef();
return (
<Modal>
.....
<Toast ref={toastRef} />
</Modal>
}
Pull request are welcome.
While developing, you can run the example app to test your changes.
If this project helped you reduce time to develop, you can buy me a cup of coffee :)
Looking for a React/React-Native Expert? Email at alirezarzna@gmail.com
MIT
![@dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?s=64&v=4){kind=small}
