Format large numbers (#556)

src/view/com/profile/ProfileHeader.tsx

@@ -33,6 +33,7 @@ import {NavigationProp} from 'lib/routes/types'
 import {isDesktopWeb} from 'platform/detection'
 import {FollowState} from 'state/models/cache/my-follows'
 import {shareUrl} from 'lib/sharing'
+import {formatCount} from '../util/numeric/format'
 
 const BACK_HITSLOP = {left: 30, top: 30, right: 30, bottom: 30}
 
@@ -364,7 +365,7 @@ const ProfileHeaderLoaded = observer(
                   style={[s.flexRow, s.mr10]}
                   onPress={onPressFollowers}>
                   <Text type="md" style={[s.bold, s.mr2, pal.text]}>
-                    {view.followersCount}
+                    {formatCount(view.followersCount)}
                   </Text>
                   <Text type="md" style={[pal.textLight]}>
                     {pluralize(view.followersCount, 'follower')}
@@ -375,7 +376,7 @@ const ProfileHeaderLoaded = observer(
                   style={[s.flexRow, s.mr10]}
                   onPress={onPressFollows}>
                   <Text type="md" style={[s.bold, s.mr2, pal.text]}>
-                    {view.followsCount}
+                    {formatCount(view.followsCount)}
                   </Text>
                   <Text type="md" style={[pal.textLight]}>
                     following

src/view/com/util/numeric/format.ts

@@ -0,0 +1,5 @@
+export const formatCount = (num: number) =>
+  Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(num)

src/view/shell/Drawer.tsx

@@ -39,6 +39,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'
 
 export const DrawerContent = observer(() => {
   const theme = useTheme()
@@ -133,11 +134,11 @@ export const DrawerContent = observer(() => {
               type="xl"
               style={[pal.textLight, styles.profileCardFollowers]}>
               <Text type="xl-medium" style={pal.text}>
-                {store.me.followersCount || 0}
+                {formatCount(store.me.followersCount ?? 0)}
               </Text>{' '}
               {pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
               <Text type="xl-medium" style={pal.text}>
-                {store.me.followsCount || 0}
+                {formatCount(store.me.followsCount ?? 0)}
               </Text>{' '}
               following
             </Text>