1 files changed, 52 insertions, 15 deletions
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index f7192d10..ac3504d5 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -1,14 +1,21 @@
 import React, {useState} from 'react';
-import {RouteProp} from '@react-navigation/native';
+import {RouteProp, useNavigation} from '@react-navigation/native';
 import {TabsGradient, Friends, CenteredView} from '../../components';
 import {ScrollView} from 'react-native-gesture-handler';
-import {SCREEN_HEIGHT} from '../../utils';
-import {StyleSheet, View} from 'react-native';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {ProfileStackParams} from '../../routes';
 import {ProfilePreviewType} from '../../types';
 import {EMPTY_PROFILE_PREVIEW_LIST} from '../../store/initialStates';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
+import BackIcon from '../../assets/icons/back-arrow.svg';
 
 type FriendsListScreenRouteProp = RouteProp<
   ProfileStackParams,
@@ -20,28 +27,39 @@ interface FriendsListScreenProps {
 
 const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
   const {userXId, screenType} = route.params;
+  const navigation = useNavigation();
 
   const {friends} = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.friends);
 
   return (
-    <CenteredView>
-      <View style={styles.modalView}>
-        <ScrollView
-          keyboardShouldPersistTaps={'always'}
-          stickyHeaderIndices={[4]}
-          contentContainerStyle={styles.contentContainer}
-          showsVerticalScrollIndicator={false}>
-          <Friends result={friends} screenType={screenType} />
-        </ScrollView>
-        <TabsGradient />
-      </View>
-    </CenteredView>
+    <View style={styles.background}>
+      <SafeAreaView>
+        <View style={styles.header}>
+          <TouchableOpacity
+            style={styles.headerButton}
+            onPress={() => {
+              navigation.pop();
+            }}>
+            <BackIcon height={'100%'} width={'100%'} color={'white'} />
+          </TouchableOpacity>
+          <Text style={styles.headerText}>Friends</Text>
+        </View>
+        <View style={styles.body}>
+          <Friends result={friends} screenType={screenType} userXId={userXId} />
+        </View>
+      </SafeAreaView>
+      <TabsGradient />
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  background: {
+    backgroundColor: 'white',
+    height: '100%',
+  },
   contentContainer: {
     paddingBottom: SCREEN_HEIGHT / 15,
     paddingHorizontal: 15,
@@ -66,6 +84,25 @@ const styles = StyleSheet.create({
   modalScrollView: {
     marginBottom: 10,
   },
+  header: {justifyContent: 'center', padding: '3%'},
+  headerText: {
+    position: 'absolute',
+    alignSelf: 'center',
+    fontSize: 20.5,
+    fontWeight: '600',
+  },
+  headerButton: {
+    width: '5%',
+    aspectRatio: 1,
+    padding: 0,
+    marginLeft: '5%',
+    alignSelf: 'flex-start',
+  },
+  body: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT * 0.8,
+    paddingTop: '3%',
+  },
 });
 
 export default FriendsListScreen;