How to Add Notifications to your React Navigation bar

Introduction

This article shows you how to add notifications to your react navbar. It shows you how to show/hide the notifications feature, how to set recent notifications, how to change the bell icon, how to listen to callbacks, and how to do further styling.

Prerequisites

This article assumes that you have read the previous navbar tutorials. In case you haven't you will find a consolidated list in the reference links section. This article assumes that you have installed the Superflows library, have the default navigation bar up and running, have added your brand information, have also customized your menu, have added the search input, have configured the sign-in button, have understood how to insert user profile information into the navbar and have seen how to add a back button to the navbar. This tutorial takes it forward from there.

Step 1 - Display the Notification Section

By default, notifications are visible. To show them, set the showNotification prop to true. You will see that the notification bell is now visible. Go ahead, click on it! A notification list will drop down. This is the default list, you can of course change it.

function Apps(props) {
  
    return (
        <div>
            <SfNav />
            <br />
            <SfNav showNotification={true}/>
        </div>
    );
}

It renders as follows:

Step 2 - Customize the Notification List

The notification list can be customized by passing a json array to the notificationList prop. Look at the example below.

function Apps(props) {
  
    return (
        <div>
            <SfNav showNotification={true} notificationList={[
                {id: 1, title: "New Follower!", description: 'Ram Joshi has started following you', timestampReceived: "2 days ago", read: false},
                {id: 2, title: "Richa reacted to your comment", description: 'Thanks I feel the same', timestampReceived: "5 days ago", read: true}]} />
        </div>
    );
}

It renders as follows:

Step 3 - Change the Bell Icon

The default bell icon is from the unicode character set. You can use any icon and icon library of your choice. To change the bell icon, pass your icon object to the notificationIcon prop.

import {Bell} from 'react-bootstrap-icons';

function Apps(props) {
  
    return (
        <div>
            <SfNav showNotification={true} notificationIcon={<Bell style={{marginTop: '5px'}}/>} />
        </div>
    );
}

It renders as follows:

New Notification Indication

If the notification list contains an unread notification, a red badge notification indicator will be shown on the notification icon. If all the notifications are read, it is not shown.

Step 4 - Listen to the Notification Click Callback

Subscribe to the onNotificationClicked prop to listen to the notification click events.

function Apps(props) {
  
    return (
        <div>
            <SfNav showNotification={true} onNotificationClicked={(value) => {alert('Clicked on notification: ' + value.title)}} />
        </div>
    );
}

Step 5 - Listen to the View All Click Callback

Subscribe to the onViewAllClicked prop to listen to the view all button press event.

function Apps(props) {
  
    return (
        <div>
            <SfNav showNotification={true} onViewAllNotificationsClicked={() => {alert('On View All Clicked')}} />
        </div>
    );
}

Step 6 - Styling

If you are interested in obtaining complete control over the look and feel, you already have it. You can completely override the base css properties of the notification elements according to your requirements. Showing you an example below.

function Apps(props) {
  
    return (
        <div>
            <SfNav 
                showNotification={true} 
                onViewAllNotificationsClicked={() => {alert('On View All Clicked')}} 
                notificationList={[
                    {id: 1, title: "New Follower!", description: 'Ram Joshi has started following you', timestampReceived: "2 days ago", read: false},
                    {id: 2, title: "Richa reacted to your comment", description: 'Thanks I feel the same', timestampReceived: "5 days ago", read: true}]}
                stylesNotificationIcon={{backgroundColor: '#ddd', color: 'black', height: '30px', width: '30px', justifyContent: 'center', borderRadius: '15px'}}
                stylesNotificationUnRead={{backgroundColor: 'black'}}
                stylesNotificationViewAll={{color: 'black'}}
                notificationIcon={<Bell style={{marginTop: '5px'}} />}  />
        </div>
    );
}

It renders as follows:

Video Tutorial

Conclusion

You have already seen how to get started with the navigation bar, how to insert brand information into it, how to customise the menu and now, how to configure the search input, how to use the sign-in button, how to insert profile information into it, how to add a back button and now how to add notifications to it.

This article shows you how to show the notifications section, customize the icon & notification list, listen to callbacks and how to style it.

Originally published