React-Nav-Melon/screens/ProfilePage.js

import {
  FlatList,
  ScrollView,
  Image,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import React, {useState} from 'react';
import images from '../assets/images/images';
import fonts from '../theme/fonts';
import colors from '../theme/colors';
import {ToggleButton} from 'react-native-paper';
import HorizontalNewsCardVariant from '../components/organisms/Cards/HorizontalNewsCardVariant';
import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
import SettingsButton from '../components/organisms/Buttons/SettingsButton';
import EditButton from '../components/organisms/Buttons/EditButton';

const PROFILE_SIZE = 128;

const profileTabs = ['Recently Read', 'Others'];

const ProfilePage = props => {
  const {navigation, route, name, profileQuote, metrics} = props;

  const metricsCount = {
    bookmarks: 158,
    followers: 158,
    following: 158,
  };

  const [categoryValue, setCategoryValue] = useState(
    profileTabs[0].toLowerCase(),
  );

  return (
    <View style={styles.profileContainer}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <NewscoutTitleHeader
          title="My Profile"
          backButtonShown={true}
          onBackClick={() => navigation.goBack()}>
          <View style={{flexDirection: 'row', gap: 16}}>
            <SettingsButton onPress={() => navigation.navigate('Settings')} />
            <EditButton
              onPress={() =>
                navigation.navigate('Profile', {screen: 'EditProfile'})
              }
            />
          </View>
        </NewscoutTitleHeader>

        <View style={styles.profileImageContainer}>
          <Image source={images.imageCard} style={styles.profileImage}></Image>
        </View>
        <Text
          style={{
            alignSelf: 'center',
            paddingVertical: 8,
            fontFamily: fonts.type.semibold,
            fontSize: fonts.getSize(14),
            color: colors.black,
          }}>
          Semina Gurung
        </Text>
        <Text
          style={{
            paddingHorizontal: 16,
            fontFamily: fonts.type.regular,
            fontSize: fonts.getSize(12),
          }}>
          The reason behind their disappointment is that iPhone users have
          been..
        </Text>
        <View style={styles.metricsCountContainer}>
          <View style={styles.metricsCard}>
            <Text style={styles.metricsCount}>158</Text>
            <Text style={styles.metricsTitle}>Bookmarks</Text>
          </View>
          <View style={styles.verticalLine}></View>
          <View style={styles.metricsCard}>
            <Text style={styles.metricsCount}>158</Text>
            <Text style={styles.metricsTitle}>Followers</Text>
          </View>
          <View style={styles.verticalLine}></View>
          <View style={styles.metricsCard}>
            <Text style={styles.metricsCount}>158</Text>
            <Text style={styles.metricsTitle}>Following</Text>
          </View>
        </View>
        <View style={styles.underlinePillContainer}>
          {/* <ScrollView horizontal showsHorizontalScrollIndicator={false}> */}
          <ToggleButton.Group onValueChange={value => setCategoryValue(value)}>
            {profileTabs.map(tab => {
              let valueId = tab.toLowerCase();
              return (
                <ToggleButton
                  icon={() => (
                    <Text
                      style={[
                        valueId === categoryValue
                          ? styles.selectedPillText
                          : styles.pillText,
                        {
                          paddingHorizontal: fonts.getSize(11),
                          fontSize: fonts.getSize(16),
                        },
                      ]}>
                      {tab}
                    </Text>
                  )}
                  style={[styles.underlinePill]}
                  value={valueId}
                />
              );
            })}
          </ToggleButton.Group>
          {/* </ScrollView> */}
        </View>
        <View style={styles.profileCardContainer}>
          <FlatList
            scrollEnabled={false}
            showsVerticalScrollIndicator={false}
            ItemSeparatorComponent={() => (
              <View style={{height: fonts.getSize(8)}}></View>
            )}
            // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
            ListHeaderComponent={() => (
              <View style={{height: fonts.getSize(16)}}></View>
            )}
            data={[{}, {}, {}]}
            renderItem={item => <HorizontalNewsCardVariant onPress={true} />}
            keyExtractor={item => item.index}
          />
        </View>
      </ScrollView>
    </View>
  );
};

export default ProfilePage;

const styles = StyleSheet.create({
  profileContainer: {
    backgroundColor: colors.white,
  },
  profileImageContainer: {
    paddingVertical: 16,
    alignItems: 'center',
  },
  profileImage: {
    borderRadius: PROFILE_SIZE,
    height: PROFILE_SIZE,
    width: PROFILE_SIZE,
  },
  metricsCountContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    paddingVertical: 20,
    paddingHorizontal: 16,
  },
  metricsCard: {},
  metricsTitle: {
    color: colors.primaryColor,
    fontFamily: fonts.type.medium,
    fontSize: 16,
  },
  metricsCount: {
    color: colors.black,
    fontFamily: fonts.type.semibold,
    fontSize: 16,
    textAlign: 'center',
  },
  verticalLine: {
    height: '100%',
    width: 2,
    backgroundColor: colors.grayShade_400,
  },
  underlinePillContainer: {
    paddingVertical: fonts.getSize(8),
    flexDirection: 'row',
    alignItems: 'space-between',
    justifyContent: 'space-around',
    paddingHorizontal: 16,
  },
  selectedPillText: {
    fontFamily: fonts.type.semibold,
    fontSize: fonts.getSize(12),
    color: colors.black,
    borderBottomWidth: fonts.getSize(4),
    borderBottomColor: colors.primaryColor,
    borderRadius: 0,
  },
  pillText: {
    fontFamily: fonts.type.semibold,
    fontSize: fonts.getSize(12),
    color: colors.gray,
  },
  underlinePill: {
    width: 'auto',
  },
  profileCardContainer: {
    paddingHorizontal: 16,
  },
});