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

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

* sc

1 files changed, 25 insertions, 2 deletions

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}