[TMA - 324] Display the correct profile picture when viewing someone's Taggs. (#88)

* Display the correct profile picture when viewing someone's profile

* sc

2 files changed, 25 insertions, 4 deletions

diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx
index e0a34f5b..794700f3 100644
--- a/src/routes/profile/Profile.tsx
+++ b/src/routes/profile/Profile.tsx
@@ -10,7 +10,6 @@ import {
 } from '../../screens';
 import {ProfileStack, ProfileStackParams} from './ProfileStack';
 import {RouteProp} from '@react-navigation/native';
-import {AvatarTitle} from '../../components';
 
 /**
  * What will be the First Screen of the stack depends on value of isProfileView (Search if its true else Profile)
@@ -77,7 +76,6 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
           headerTransparent: true,
           headerBackTitleVisible: false,
           headerTintColor: 'white',
-          headerTitle: () => <AvatarTitle isProfileView={isProfileView} />,
         }}
       />
       {!isProfileView ? (
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index f43c30df..34ad7f48 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -1,8 +1,9 @@
 import {RouteProp} from '@react-navigation/native';
-import React from 'react';
+import React, {useEffect} from 'react';
 import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {
+  AvatarTitle,
   SocialMediaInfo,
   TabsGradient,
   TaggPost,
@@ -12,17 +13,27 @@ import {AVATAR_GRADIENT} from '../../constants';
 import {AuthContext, ProfileContext, ProfileStackParams} from '../../routes';
 import {SimplePostType, TwitterPostType} from '../../types';
 import {headerBarHeightWithImage, SCREEN_HEIGHT} from '../../utils';
+import {StackNavigationProp} from '@react-navigation/stack';
 
 type SocialMediaTaggsRouteProp = RouteProp<
   ProfileStackParams,
   'SocialMediaTaggs'
 >;
 
+type SocialMediaTaggsNavigationProp = StackNavigationProp<
+  ProfileStackParams,
+  'SocialMediaTaggs'
+>;
+
 interface SocialMediaTaggsProps {
   route: SocialMediaTaggsRouteProp;
+  navigation: SocialMediaTaggsNavigationProp;
 }
 
-const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({route}) => {
+const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
+  route,
+  navigation,
+}) => {
   const {socialMediaType, isProfileView} = route.params;
   const context = isProfileView
     ? React.useContext(ProfileContext)
@@ -34,6 +45,18 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({route}) => {
   const headerHeight = headerBarHeightWithImage();
   let accountData = socialAccounts[socialMediaType];
 
+  /**
+   * Skip setting the header while defining routes and instead let the component itself handle it.
+   * This lets us pass props dynamically to the header.
+   */
+  useEffect(() => {
+    navigation.setOptions({
+      headerTitle: () => {
+        return <AvatarTitle isProfileView={isProfileView} />;
+      },
+    });
+  }, []);
+
   return (
     <LinearGradient
       useAngle={true}