diff options
-rw-r--r-- | src/view/com/util/numeric/format.ts | 10 | ||||
-rw-r--r-- | src/view/shell/Drawer.tsx | 18 |
2 files changed, 21 insertions, 7 deletions
diff --git a/src/view/com/util/numeric/format.ts b/src/view/com/util/numeric/format.ts index f0e90217f..7aa5a4f4d 100644 --- a/src/view/com/util/numeric/format.ts +++ b/src/view/com/util/numeric/format.ts @@ -3,3 +3,13 @@ export const formatCount = (num: number) => notation: 'compact', maximumFractionDigits: 1, }).format(num) + +export function formatCountShortOnly(num: number): string { + if (num >= 1000000) { + return (num / 1000000).toFixed(1) + 'M' + } + if (num >= 1000) { + return (num / 1000).toFixed(1) + 'K' + } + return String(num) +} diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index d00d05f75..5617cd5b8 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -2,6 +2,7 @@ import React, {ComponentProps} from 'react' import { Linking, SafeAreaView, + ScrollView, StyleProp, StyleSheet, TouchableOpacity, @@ -41,7 +42,7 @@ import {getTabState, TabState} from 'lib/routes/helpers' import {NavigationProp} from 'lib/routes/types' import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' import {isWeb} from 'platform/detection' -import {formatCount} from 'view/com/util/numeric/format' +import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format' export const DrawerContent = observer(() => { const theme = useTheme() @@ -154,19 +155,18 @@ export const DrawerContent = observer(() => { type="xl" style={[pal.textLight, styles.profileCardFollowers]}> <Text type="xl-medium" style={pal.text}> - {formatCount(store.me.followersCount ?? 0)} + {formatCountShortOnly(store.me.followersCount ?? 0)} </Text>{' '} {pluralize(store.me.followersCount || 0, 'follower')} ·{' '} <Text type="xl-medium" style={pal.text}> - {formatCount(store.me.followsCount ?? 0)} + {formatCountShortOnly(store.me.followsCount ?? 0)} </Text>{' '} following </Text> </TouchableOpacity> </View> <InviteCodes /> - <View style={s.flex1} /> - <View style={styles.main}> + <ScrollView style={styles.main}> <MenuItem icon={ isAtSearch ? ( @@ -292,8 +292,8 @@ export const DrawerContent = observer(() => { accessibilityHint="" onPress={onPressSettings} /> - </View> - <View style={s.flex1} /> + <View style={styles.smallSpacer} /> + </ScrollView> <View style={styles.footer}> {!isWeb && ( <TouchableOpacity @@ -449,6 +449,10 @@ const styles = StyleSheet.create({ }, main: { paddingLeft: 20, + paddingTop: 20, + }, + smallSpacer: { + height: 20, }, profileCardDisplayName: { |