|
|
@@ -1,5 +1,5 @@
|
|
|
import React from 'react';
|
|
|
-import { Text, TouchableOpacity, View, Image } from 'react-native';
|
|
|
+import { Text, TouchableOpacity, View, Image, Dimensions } from 'react-native';
|
|
|
import * as FileSystem from 'expo-file-system';
|
|
|
|
|
|
import { AvatarWithInitials } from '../../../../components';
|
|
|
@@ -10,6 +10,7 @@ import { Colors } from 'src/theme';
|
|
|
import { SeriesRanking } from '../utils/types';
|
|
|
import { ProfileStyles, ScoreStyles } from './styles';
|
|
|
import { useConnection } from 'src/contexts/ConnectionContext';
|
|
|
+import formatNumber from '../../TravelsScreen/utils/formatNumber';
|
|
|
|
|
|
import TickIcon from 'assets/icons/tick.svg';
|
|
|
import UNIcon from 'assets/icons/un_icon.svg';
|
|
|
@@ -27,6 +28,7 @@ const SeriesRankingItem = React.memo(
|
|
|
onPress: (userId: number) => void;
|
|
|
}) => {
|
|
|
const netInfo = useConnection();
|
|
|
+ const isSmallScreen = Dimensions.get('window').width < 383;
|
|
|
|
|
|
const avatarBaseUri = netInfo?.isInternetReachable
|
|
|
? API_HOST + item.avatar
|
|
|
@@ -74,8 +76,8 @@ const SeriesRankingItem = React.memo(
|
|
|
>
|
|
|
{item.first_name ?? ''} {item.last_name ?? ''}
|
|
|
</Text>
|
|
|
- <View style={ProfileStyles.profileDataContainer}>
|
|
|
- <View style={ProfileStyles.profileDataWrapper}>
|
|
|
+ <View style={[ProfileStyles.profileDataContainer, { flex: 1 }]}>
|
|
|
+ <View style={[ProfileStyles.profileDataWrapper, isSmallScreen ? { gap: 6 } : {}]}>
|
|
|
<Text style={ProfileStyles.profileAge}>Age: {item.age ?? ''}</Text>
|
|
|
<Image
|
|
|
source={{ uri: flagBaseUri(item.flag1) }}
|
|
|
@@ -87,23 +89,26 @@ const SeriesRankingItem = React.memo(
|
|
|
style={[ProfileStyles.countryFlag, { marginLeft: -15 }]}
|
|
|
/>
|
|
|
) : null}
|
|
|
- <View style={ProfileStyles.badgesWrapper}>
|
|
|
+ <View style={[ProfileStyles.badgesWrapper, isSmallScreen ? { marginLeft: 4 } : {}]}>
|
|
|
{item.authenticated === 1 ? <TickIcon /> : null}
|
|
|
{item.badge_un === 1 ? <UNIcon /> : null}
|
|
|
{item.badge_nm === 1 ? <NMIcon /> : null}
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
- <View style={ProfileStyles.rightScore}>
|
|
|
+ <View style={[ProfileStyles.rightScore, { flex: 1, justifyContent: 'flex-end' }]}>
|
|
|
<Text
|
|
|
style={[
|
|
|
- { fontWeight: 'bold', fontSize: 16 },
|
|
|
+ {
|
|
|
+ fontWeight: 'bold',
|
|
|
+ fontSize: isSmallScreen ? 12 : 16
|
|
|
+ },
|
|
|
item.recent_score_increase
|
|
|
? { color: Colors.ORANGE }
|
|
|
: { color: Colors.DARK_BLUE }
|
|
|
]}
|
|
|
>
|
|
|
- {item.score}
|
|
|
+ {isSmallScreen ? formatNumber(item.score) : item.score}
|
|
|
</Text>
|
|
|
{item.recent_score_increase ? (
|
|
|
<ArrowIcon stroke={Colors.ORANGE} />
|
