2 files changed, 43 insertions, 7 deletions
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index 38a987f7..a14f1576 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -5,6 +5,8 @@ import {useSelector, useDispatch} from 'react-redux';
 import {RootState} from '../store/rootReducer';
 import {userLogin} from '../utils';
 import SplashScreen from 'react-native-splash-screen';
+import messaging from '@react-native-firebase/messaging';
+import {updateNewNotificationReceived} from '../store/actions';
 
 const Routes: React.FC = () => {
   const {
@@ -24,7 +26,12 @@ const Routes: React.FC = () => {
    * SplashScreen is the actual react-native's splash screen.
    * We can hide / show it depending on our application needs.
    */
+
   useEffect(() => {
+    messaging().onMessage(() => {
+      dispatch(updateNewNotificationReceived(true));
+    });
+
     if (!userId) {
       userLogin(dispatch, {userId: '', username: ''});
     } else {
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index 3757c56b..7d29ab67 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -1,15 +1,36 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import React, {Fragment} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 import {useSelector} from 'react-redux';
 import {NavigationIcon} from '../../components';
+import {NO_NOTIFICATIONS} from '../../store/initialStates';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
+import {haveUnreadNotifications} from '../../utils';
 import MainStackScreen from '../main/MainStackScreen';
 
 const Tabs = createBottomTabNavigator();
 
 const NavigationBar: React.FC = () => {
-  const {isOnboardedUser} = useSelector((state: RootState) => state.user);
+  const {isOnboardedUser, newNotificationReceived} = useSelector(
+    (state: RootState) => state.user,
+  );
+
+  const {notifications: {notifications} = NO_NOTIFICATIONS} = useSelector(
+    (state: RootState) => state,
+  );
+
+  const [unreadNotificationsPresent, setUnreadNotificationsPresent] = useState<
+    boolean
+  >(false);
+
+  useEffect(() => {
+    const determine = async () => {
+      setUnreadNotificationsPresent(
+        await haveUnreadNotifications(notifications),
+      );
+    };
+    determine();
+  }, [notifications]);
 
   return (
     <Tabs.Navigator
@@ -23,7 +44,15 @@ const NavigationBar: React.FC = () => {
             case 'Upload':
               return <NavigationIcon tab="Upload" disabled={!focused} />;
             case 'Notifications':
-              return <NavigationIcon tab="Notifications" disabled={!focused} />;
+              return (
+                <NavigationIcon
+                  newIcon={
+                    newNotificationReceived || unreadNotificationsPresent
+                  }
+                  tab="Notifications"
+                  disabled={!focused}
+                />
+              );
             case 'Profile':
               return <NavigationIcon tab="Profile" disabled={!focused} />;
             default:
@@ -44,14 +73,14 @@ const NavigationBar: React.FC = () => {
         },
       }}>
       <Tabs.Screen
-        name="Notifications"
+        name="Search"
         component={MainStackScreen}
-        initialParams={{screenType: ScreenType.Notifications}}
+        initialParams={{screenType: ScreenType.Search}}
       />
       <Tabs.Screen
-        name="Search"
+        name="Notifications"
         component={MainStackScreen}
-        initialParams={{screenType: ScreenType.Search}}
+        initialParams={{screenType: ScreenType.Notifications}}
       />
       <Tabs.Screen
         name="Profile"