1 files changed, 30 insertions, 13 deletions
diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx
index d6effe02..89f2e62f 100644
--- a/src/screens/profile/InviteFriendsScreen.tsx
+++ b/src/screens/profile/InviteFriendsScreen.tsx
@@ -1,4 +1,4 @@
-import {RouteProp} from '@react-navigation/native';
+import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useMemo, useState} from 'react';
 import {
   FlatList,
@@ -16,8 +16,11 @@ import {checkPermission} from 'react-native-contacts';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {SearchBar, TabsGradient} from '../../components';
 import {InviteFriendTile} from '../../components/friends';
-import {MainStackParams} from '../../routes';
-import {usersFromContactsService} from '../../services/UserFriendsService';
+import {headerBarOptions} from '../../routes';
+import {
+  getRemainingInviteCount,
+  usersFromContactsService,
+} from '../../services/UserFriendsService';
 import {ProfilePreviewType} from '../../types';
 import {
   extractContacts,
@@ -40,16 +43,8 @@ export type SearchResultType = {
   pendingUsers: InviteContactType[];
 };
 
-type InviteFriendsScreenRouteProp = RouteProp<
-  MainStackParams,
-  'InviteFriendsScreen'
->;
-
-interface InviteFriendsScreenProps {
-  route: InviteFriendsScreenRouteProp;
-}
-
-const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
+const InviteFriendsScreen: React.FC = () => {
+  const navigation = useNavigation();
   const [usersFromContacts, setUsersFromContacts] = useState<
     ProfilePreviewType[]
   >([]);
@@ -60,6 +55,24 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
     pendingUsers: pendingUsers,
   });
   const [query, setQuery] = useState('');
+  const [invitesLeft, setInvitesLeft] = useState(0);
+
+  useEffect(() => {
+    // Get number of invites from the backend and set the state
+    const getInitialInvitesCount = async () => {
+      const intialInvites = await getRemainingInviteCount();
+      setInvitesLeft(intialInvites);
+    };
+    getInitialInvitesCount();
+  }, []);
+
+  useEffect(
+    () =>
+      navigation.setOptions({
+        ...headerBarOptions('black', `You have ${invitesLeft} Invites`),
+      }),
+    [invitesLeft],
+  );
 
   useEffect(() => {
     const handleFindFriends = () => {
@@ -129,6 +142,8 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
           <InviteFriendTile
             item={item}
             remind={true}
+            invitesLeft={invitesLeft}
+            setInvitesLeft={setInvitesLeft}
             results={results}
             setResults={setResults}
           />
@@ -150,6 +165,8 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
           <InviteFriendTile
             item={item}
             remind={false}
+            invitesLeft={invitesLeft}
+            setInvitesLeft={setInvitesLeft}
             results={results}
             setResults={setResults}
           />