Better sized and more informative character counter

src/view/com/composer/ComposePost.tsx

@@ -15,7 +15,10 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete-view'
 import {Autocomplete} from './Autocomplete'
 import * as Toast from '../util/Toast'
-import ProgressCircle from '../util/ProgressCircle'
+// @ts-ignore no type definition -prf
+import ProgressCircle from 'react-native-progress/Circle'
+// @ts-ignore no type definition -prf
+import ProgressPie from 'react-native-progress/Pie'
 import {TextLink} from '../util/Link'
 import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from '../../../state'
@@ -252,10 +255,26 @@ export const ComposePost = observer(function ComposePost({
             {MAX_TEXT_LENGTH - text.length}
           </Text>
           <View>
-            <ProgressCircle
+            {text.length > DANGER_TEXT_LENGTH ? (
-              color={progressColor}
+              <ProgressPie
-              progress={text.length / MAX_TEXT_LENGTH}
+                size={30}
-            />
+                borderWidth={4}
+                borderColor={progressColor}
+                color={progressColor}
+                progress={Math.min(
+                  (text.length - MAX_TEXT_LENGTH) / MAX_TEXT_LENGTH,
+                  1,
+                )}
+              />
+            ) : (
+              <ProgressCircle
+                size={30}
+                borderWidth={1}
+                borderColor={colors.gray2}
+                color={progressColor}
+                progress={text.length / MAX_TEXT_LENGTH}
+              />
+            )}
           </View>
         </View>
         <Autocomplete

src/view/com/util/ProgressCircle.native.tsx

@@ -1,3 +0,0 @@
-// @ts-ignore no type definition -prf
-import ProgressCircle from 'react-native-progress/Circle'
-export default ProgressCircle

src/view/com/util/ProgressCircle.tsx

@@ -1,20 +0,0 @@
-import {View} from 'react-native'
-import {CircularProgressbar, buildStyles} from 'react-circular-progressbar'
-
-const ProgressCircle = ({
-  color,
-  progress,
-}: {
-  color?: string
-  progress: number
-}) => {
-  return (
-    <View style={{width: 20, height: 20}}>
-      <CircularProgressbar
-        value={progress * 100}
-        styles={buildStyles({pathColor: color || '#00f'})}
-      />
-    </View>
-  )
-}
-export default ProgressCircle