fix: profile screen

src/screens/InAppScreens/ProfileScreen/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, ReactNode } from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import React, { FC, ReactNode, useState } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { Image } from 'expo-image';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import { CommonActions, NavigationProp, useNavigation } from '@react-navigation/native';
@@ -9,6 +9,7 @@ import { type Score, type Series, type SocialData, usePostGetProfileInfoQuery }
 import { BigText, Button, PageWrapper } from '../../../components';
 import { Colors } from '../../../theme';
 import { styles } from './styles';
+import { ButtonVariants } from '../../../types/components';
 
 import { API_HOST } from '../../../constants';
 
@@ -27,7 +28,6 @@ import IconGlobe from '../../../../assets/icons/bottom-navigation/globe.svg';
 import IconLink from '../../../../assets/icons/link.svg';
 import GearIcon from '../../../../assets/icons/gear.svg';
 import Loading from '../../../components/Loading';
-import { ButtonVariants } from '../../../types/components';
 
 const Tab = createMaterialTopTabNavigator();
 
@@ -139,8 +139,14 @@ type PersonalInfoProps = {
 };
 
 const PersonalInfo: FC<PersonalInfoProps> = ({ data }) => {
+  const [showMoreSeries, setShowMoreSeries] = useState(false);
+
   return (
-    <View style={{ marginTop: 20, gap: 20 }}>
+    <ScrollView
+      showsVerticalScrollIndicator={false}
+      contentContainerStyle={{ gap: 20 }}
+      style={{ marginTop: 20 }}
+    >
       <InfoItem inline={true} title={'RANKING'}>
         {data.scores?.map((data) => {
           if (!data.score) return null;
@@ -154,14 +160,21 @@ const PersonalInfo: FC<PersonalInfoProps> = ({ data }) => {
           );
         })}
       </InfoItem>
-      <InfoItem inline={true} title={'SERIES BADGES'}>
-        {data.series?.map((data) => (
+      <InfoItem showMore={showMoreSeries} inline={true} title={'SERIES BADGES'}>
+        {data.series?.slice(0, showMoreSeries ? data.series.length : 8).map((data) => (
           <View style={{ display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'center' }}>
             <Image source={{ uri: API_HOST + data.icon_png }} style={{ width: 28, height: 28 }} />
             <Text style={[styles.headerText, { flex: 0 }]}>{data.score}</Text>
           </View>
         ))}
       </InfoItem>
+      {data.series?.length > 8 ? (
+        <Button
+          children={showMoreSeries ? 'Hide series' : 'Show more'}
+          variant={ButtonVariants.TEXT}
+          onPress={() => setShowMoreSeries(!showMoreSeries)}
+        />
+      ) : null}
       <View style={{ display: 'flex', flexDirection: 'row' }}>
         <Text style={styles.headerText}>DATE OF BIRTH</Text>
         <Text style={styles.titleText}>{new Date(data.date_of_birth).toDateString()}</Text>
@@ -189,24 +202,28 @@ const PersonalInfo: FC<PersonalInfoProps> = ({ data }) => {
           {data.links.other?.link ? <IconLink fill={Colors.DARK_BLUE} /> : null}
         </View>
       </InfoItem>
-    </View>
+    </ScrollView>
   );
 };
 
-const InfoItem: FC<{ title: string; inline?: boolean; children: ReactNode }> = ({
-  title,
-  inline,
-  children
-}) => (
+const InfoItem: FC<{
+  title: string;
+  inline?: boolean;
+  children: ReactNode;
+  showMore?: boolean;
+}> = ({ title, inline, children, showMore }) => (
   <View>
     <Text style={[styles.headerText, { flex: 0 }]}>{title}</Text>
     <View
-      style={{
-        display: 'flex',
-        flexDirection: inline ? 'row' : 'column',
-        justifyContent: 'space-evenly',
-        marginTop: 10
-      }}
+      style={[
+        {
+          display: 'flex',
+          flexDirection: inline ? 'row' : 'column',
+          justifyContent: 'space-evenly',
+          marginTop: 10
+        },
+        showMore ? { flexWrap: 'wrap', gap: 8 } : {}
+      ]}
     >
       {children}
     </View>