How to Create Toast Notification in React Native App

Hello developers! Today, we're diving into the world of React Native and adding a sprinkle of user-friendly magic to our apps - toast notifications! If you've ever wondered how to display those subtle yet effective messages in your React Native project, you're in for a treat.

In this article, we'll see how to create toast notifications in the React native app, react native toastr notification, react native toast notification, toast notification in react native, and react native toast.

In this step-by-step guide, we'll use the react-native-toast-notifications package to make our app pop with delightful toasts. Think of toasts as little nuggets of information that appear and disappear with a dash of style.

Follow along, and soon you'll be toasting success messages, warnings, or any information you want to share with your users.

So, grab your code editor, and let's make our React Native app a bit more communicative and fun! 🚀🍞

Start by installing the react-native-toast-notifications package:

npm install react-native-toast-notifications

In your main application file (e.g., App.js), wrap your entire application with the ToastProvider to enable toast notifications globally.

// App.js
import React from 'react';
import { ToastProvider } from 'react-native-toast-notifications';
import YourNavigator from './YourNavigator'; // Import your app's navigator

const App = () => {
  return (
    <ToastProvider>
      <YourNavigator />
    </ToastProvider>
  );
};

export default App;

 

In any component where you want to display a toast, you can use the useToast hook.

// YourComponent.js
import React, { useEffect } from 'react';
import { View, Button } from 'react-native';
import { useToast } from 'react-native-toast-notifications';

const YourComponent = () => {
  const toast = useToast();

  useEffect(() => {
    // Display the toast when the component mounts
    toast.show('Hello World');
  }, []);

  const showToastMessage = () => {
    // You can also trigger the toast on a button press or any other event
    toast.show('Button Pressed!');
  };

  return (
    <View>
      <Button title="Show Toast" onPress={showToastMessage} />
    </View>
  );
};

export default YourComponent;

 

The useToast hook provides various customization options for the toast, such as text1, text2, position, type, etc. You can customize these options to tailor the appearance and behavior of your toasts.

toast.show("Task finished successfully", {
  type: "normal | success | warning | danger | custom",
  placement: "top | bottom",
  duration: 4000,
  offset: 30,
  animationType: "slide-in | zoom-in",
});

Update:

let id = toast.show("Loading...");
toast.update(id, "Loading completed", {type: "success"});

Hide:

let id = toast.show("Loading...");
toast.hide(id);
// or
toast.hideAll();

Customization:

<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.
>
...
</>

 

Save your files and run your React Native app to see the toast notifications in action:

npx react-native run-android

or

npx react-native run-ios

And there you have it! A quick and easy way to integrate toast notifications into your React Native app using the react-native-toast-notifications package.

 

---

You might also like:

• Read Also: 10 Digit Mobile Number Validation in Angular 17
• Read Also: How to Display Push Notifications in React Native
• Read Also: How to Create Login Form using Spring Boot React
• Read Also: How to Upload and Preview an Image in React Native

---