1 files changed, 29 insertions, 4 deletions
diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx
index bf91e8f3..24a4c821 100644
--- a/src/screens/profile/InviteFriendsScreen.tsx
+++ b/src/screens/profile/InviteFriendsScreen.tsx
@@ -1,4 +1,4 @@
-import {RouteProp} from '@react-navigation/native';
+import {RouteProp, useNavigation} from '@react-navigation/native';
 import React, {useEffect, useMemo, useState} from 'react';
 import {
   FlatList,
@@ -18,8 +18,11 @@ import Animated from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/Feather';
 import {TabsGradient} from '../../components';
 import {InviteFriendTile} from '../../components/friends';
-import {MainStackParams} from '../../routes';
-import {usersFromContactsService} from '../../services/UserFriendsService';
+import {headerBarOptions, MainStackParams} from '../../routes';
+import {
+  getRemainingInviteCount,
+  usersFromContactsService,
+} from '../../services/UserFriendsService';
 import {ProfilePreviewType} from '../../types';
 import {
   extractContacts,
@@ -52,7 +55,8 @@ interface InviteFriendsScreenProps {
   route: InviteFriendsScreenRouteProp;
 }
 
-const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
+const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
+  const navigation = useNavigation();
   const [usersFromContacts, setUsersFromContacts] = useState<
     ProfilePreviewType[]
   >([]);
@@ -63,7 +67,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 = () => {
       extractContacts().then(async (retrievedContacts) => {
@@ -132,6 +153,8 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
           <InviteFriendTile
             item={item}
             remind={true}
+            invitesLeft={invitesLeft}
+            setInvitesLeft={setInvitesLeft}
             results={results}
             setResults={setResults}
           />
@@ -153,6 +176,8 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
           <InviteFriendTile
             item={item}
             remind={false}
+            invitesLeft={invitesLeft}
+            setInvitesLeft={setInvitesLeft}
             results={results}
             setResults={setResults}
           />