1 files changed, 61 insertions, 66 deletions
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index c7ce3f4c7..57dc0ef86 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -1,9 +1,8 @@
 import React, {useState, forwardRef, useImperativeHandle} from 'react'
 import {observer} from 'mobx-react-lite'
 import {KeyboardAvoidingView, StyleSheet, TextInput, View} from 'react-native'
-import Toast from 'react-native-root-toast'
-// @ts-ignore no type definition -prf
-import ProgressCircle from 'react-native-progress/Circle'
+import Toast from '../util/Toast'
+import ProgressCircle from '../util/ProgressCircle'
 import {useStores} from '../../../state'
 import {s} from '../../lib/styles'
 import * as apilib from '../../../state/lib/api'
@@ -12,75 +11,71 @@ const MAX_TEXT_LENGTH = 256
 const WARNING_TEXT_LENGTH = 200
 const DANGER_TEXT_LENGTH = 255
 
-export const Composer = observer(
-  forwardRef(function Composer(
-    {
-      replyTo,
-    }: {
-      replyTo: string | undefined
-    },
-    ref,
-  ) {
-    const store = useStores()
-    const [text, setText] = useState('')
+export const Composer = forwardRef(function Composer(
+  {
+    replyTo,
+  }: {
+    replyTo: string | undefined
+  },
+  ref,
+) {
+  const store = useStores()
+  const [text, setText] = useState('')
 
-    const onChangeText = (newText: string) => {
-      if (newText.length > MAX_TEXT_LENGTH) {
-        setText(newText.slice(0, MAX_TEXT_LENGTH))
-      } else {
-        setText(newText)
-      }
+  const onChangeText = (newText: string) => {
+    if (newText.length > MAX_TEXT_LENGTH) {
+      setText(newText.slice(0, MAX_TEXT_LENGTH))
+    } else {
+      setText(newText)
     }
+  }
 
-    useImperativeHandle(ref, () => ({
-      async publish() {
-        if (text.trim().length === 0) {
-          return false
-        }
-        await apilib.post(store.api, 'alice.com', text, replyTo)
-        Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been created`, {
-          duration: Toast.durations.LONG,
-          position: Toast.positions.TOP,
-          shadow: true,
-          animation: true,
-          hideOnPress: true,
-        })
-        return true
-      },
-    }))
+  useImperativeHandle(ref, () => ({
+    async publish() {
+      if (text.trim().length === 0) {
+        return false
+      }
+      await apilib.post(store.api, 'alice.com', text, replyTo)
+      Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been created`, {
+        duration: Toast.durations.LONG,
+        position: Toast.positions.TOP,
+        shadow: true,
+        animation: true,
+        hideOnPress: true,
+      })
+      return true
+    },
+  }))
 
-    const progressColor =
-      text.length > DANGER_TEXT_LENGTH
-        ? '#e60000'
-        : text.length > WARNING_TEXT_LENGTH
-        ? '#f7c600'
-        : undefined
+  const progressColor =
+    text.length > DANGER_TEXT_LENGTH
+      ? '#e60000'
+      : text.length > WARNING_TEXT_LENGTH
+      ? '#f7c600'
+      : undefined
 
-    return (
-      <KeyboardAvoidingView style={styles.outer} behavior="padding">
-        <TextInput
-          multiline
-          scrollEnabled
-          onChangeText={text => onChangeText(text)}
-          value={text}
-          placeholder={
-            replyTo ? 'Write your reply' : "What's new in the scene?"
-          }
-          style={styles.textInput}
-        />
-        <View style={[s.flexRow, s.pt10, s.pb10, s.pr5]}>
-          <View style={s.flex1} />
-          <View>
-            <ProgressCircle
-              color={progressColor}
-              progress={text.length / MAX_TEXT_LENGTH}
-            />
-          </View>
+  return (
+    <KeyboardAvoidingView style={styles.outer} behavior="padding">
+      <TextInput
+        multiline
+        scrollEnabled
+        onChangeText={text => onChangeText(text)}
+        value={text}
+        placeholder={replyTo ? 'Write your reply' : "What's new in the scene?"}
+        style={styles.textInput}
+      />
+      <View style={[s.flexRow, s.pt10, s.pb10, s.pr5]}>
+        <View style={s.flex1} />
+        <View>
+          <ProgressCircle
+            color={progressColor}
+            progress={text.length / MAX_TEXT_LENGTH}
+          />
         </View>
-      </KeyboardAvoidingView>
-    )
-  }),
-)
+      </View>
+    </KeyboardAvoidingView>
+  )
+})
 
 const styles = StyleSheet.create({
   outer: {