Add Inbox tab and unread message count: implement Inbox tab with badg…

…e for unread messages, update navigation routes, and enhance state management in useIterableApp

example/src/components/App/Main.tsx

@@ -1,14 +1,42 @@
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useState, useEffect } from 'react';
+
+import { Iterable } from '@iterable/react-native-sdk';
 
 import { colors, Route } from '../../constants';
 import type { MainScreenParamList } from '../../types';
 import { routeIcon } from './App.constants';
 import { getIcon } from './App.utils';
 import { User } from '../User';
+import Inbox from '../Inbox';
+import { useIterableApp } from '../../hooks';
 
 const Tab = createBottomTabNavigator<MainScreenParamList>();
 
 export const Main = () => {
+  const {
+    isInboxTab,
+    isLoggedIn,
+    loginInProgress,
+    returnToInboxTrigger,
+    setIsInboxTab,
+    setReturnToInboxTrigger,
+    userId,
+  } = useIterableApp();
+  const [unreadMessageCount, setUnreadMessageCount] = useState<number>(0);
+
+  useEffect(() => {
+    if (loginInProgress) return;
+    if (isLoggedIn) {
+      Iterable.inAppManager.getMessages().then((messages) => {
+        setUnreadMessageCount(messages.length);
+      });
+    } else {
+      // Reset unread message count when user logs out
+      setUnreadMessageCount(0);
+    }
+  }, [isLoggedIn, loginInProgress, userId]);
+
   return (
     <>
       <Tab.Navigator
@@ -22,7 +50,28 @@ export const Main = () => {
           };
         }}
       >
-        <Tab.Screen name={Route.User} component={User} />
+        <Tab.Screen
+          name={Route.Inbox}
+          component={Inbox}
+          options={
+            unreadMessageCount ? { tabBarBadge: unreadMessageCount } : {}
+          }
+          listeners={() => ({
+            tabPress: () => {
+              if (isInboxTab) {
+                setReturnToInboxTrigger(!returnToInboxTrigger);
+              }
+              setIsInboxTab(true);
+            },
+          })}
+        />
+        <Tab.Screen
+          name={Route.User}
+          component={User}
+          listeners={() => ({
+            tabPress: () => setIsInboxTab(false),
+          })}
+        />
       </Tab.Navigator>
     </>
   );

example/src/hooks/useIterableApp.tsx

@@ -125,7 +125,7 @@ export const IterableAppProvider: FunctionComponent<
       config.inAppDisplayInterval = 1.0; // Min gap between in-apps. No need to set this in production.
 
       config.urlHandler = (url: string) => {
-        const routeNames = [Route.User];
+        const routeNames = [Route.Inbox, Route.User];
         for (const route of routeNames) {
           if (url.includes(route.toLowerCase())) {
             // TODO: Figure out typing for this

src/IterableInboxMessageDisplay.tsx

@@ -213,7 +213,7 @@ export const IterableInboxMessageDisplay = ({
             }}
           >
             <View style={returnButton}>
-              <Icon name="ios-chevron-back" style={returnButtonIcon} />
+              <Icon name="chevron-back-outline" style={returnButtonIcon} />
               <Text style={returnButtonText}>Inbox</Text>
             </View>
           </TouchableWithoutFeedback>

src/IterableInboxMessageList.tsx

@@ -52,9 +52,7 @@ export const IterableInboxMessageList = ({
         swipingCheck={setSwiping}
         messageListItemLayout={messageListItemLayout}
         deleteRow={(messageId: string) => deleteRow(messageId)}
-        handleMessageSelect={(messageId: string, i: number) =>
-          handleMessageSelect(messageId, i)
-        }
+        handleMessageSelect={handleMessageSelect}
         contentWidth={contentWidth}
         isPortrait={isPortrait}
       />