Basic reply and re-edit done

src/@types/mastodon.d.ts

@@ -299,9 +299,9 @@ declare namespace Mastodon {
     url?: string
     in_reply_to_id?: string
     in_reply_to_account_id?: string
-    reblog: Status
+    reblog?: Status
-    poll: Poll
+    poll?: Poll
-    card: Card
+    card?: Card
     language?: string
     text?: string
   }

src/components/Timelines/Timeline/Shared/Actions.tsx

@@ -7,6 +7,8 @@ import client from 'src/api/client'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import { toast } from 'src/components/toast'
 import { StyleConstants } from 'src/utils/styles/constants'
+import { useNavigation } from '@react-navigation/native'
+import getCurrentTab from 'src/utils/getCurrentTab'
 
 const fireMutation = async ({
   id,
@@ -47,6 +49,7 @@ export interface Props {
 }
 
 const TimelineActions: React.FC<Props> = ({ queryKey, status }) => {
+  const navigation = useNavigation()
   const { theme } = useTheme()
   const iconColor = theme.secondary
   const iconColorAction = (state: boolean) =>
@@ -85,7 +88,15 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status }) => {
     }
   })
 
-  const onPressReply = useCallback(() => {}, [])
+  const onPressReply = useCallback(() => {
+    navigation.navigate(getCurrentTab(navigation), {
+      screen: 'Screen-Shared-Compose',
+      params: {
+        type: 'reply',
+        incomingStatus: status
+      }
+    })
+  }, [])
   const onPressReblog = useCallback(
     () =>
       mutateAction({

src/components/Timelines/Timeline/Shared/HeaderDefault.tsx

@@ -41,7 +41,7 @@ const TimelineHeaderDefault: React.FC<Props> = ({ queryKey, status }) => {
 
   const onPressAction = useCallback(() => setBottomSheetVisible(true), [])
   const onPressApplication = useCallback(() => {
-    navigation.navigate('Webview', {
+    navigation.navigate('Screen-Shared-Webview', {
       uri: status.application!.website
     })
   }, [])

src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsStatus.tsx

@@ -1,8 +1,11 @@
+import { useNavigation } from '@react-navigation/native'
 import React from 'react'
+import { Alert } from 'react-native'
 import { useMutation, useQueryCache } from 'react-query'
 import client from 'src/api/client'
 import { MenuContainer, MenuHeader, MenuRow } from 'src/components/Menu'
 import { toast } from 'src/components/toast'
+import getCurrentTab from 'src/utils/getCurrentTab'
 
 const fireMutation = async ({
   id,
@@ -62,6 +65,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
   status,
   setBottomSheetVisible
 }) => {
+  const navigation = useNavigation()
   const queryCache = useQueryCache()
   const [mutateAction] = useMutation(fireMutation, {
     onMutate: ({ id, type, stateKey, prevState }) => {
@@ -119,10 +123,38 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
       />
       <MenuRow
         onPress={() => {
-          console.warn('功能未开发')
+          Alert.alert(
+            '确认删除嘟嘟？',
+            '你确定要删除这条嘟文并重新编辑它吗？所有相关的转嘟和喜欢都会被清除，回复将会失去关联。',
+            [
+              { text: '取消', style: 'cancel' },
+              {
+                text: '删除并重新编辑',
+                style: 'destructive',
+                onPress: async () => {
+                  await client({
+                    method: 'delete',
+                    instance: 'local',
+                    url: `statuses/${status.id}`
+                  })
+                    .then(res => {
+                      queryCache.invalidateQueries(queryKey)
+                      setBottomSheetVisible(false)
+                      navigation.navigate(getCurrentTab(navigation), {
+                        screen: 'Screen-Shared-Compose',
+                        params: { type: 'edit', incomingStatus: res.body }
+                      })
+                    })
+                    .catch(() => {
+                      toast({ type: 'error', content: '删除失败' })
+                    })
+                }
+              }
+            ]
+          )
         }}
         iconFront='trash'
-        title='删除并重发'
+        title='删除并重新编辑'
       />
       <MenuRow
         onPress={() => {

src/screens/Shared/Compose.tsx

@@ -19,10 +19,11 @@ import { getLocalAccountPreferences } from 'src/utils/slices/instancesSlice'
 import { HeaderLeft, HeaderRight } from 'src/components/Header'
 import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
+import formatText from './Compose/formatText'
 
 const Stack = createNativeStackNavigator()
 
-export type PostState = {
+export type ComposeState = {
   spoiler: {
     active: boolean
     count: number
@@ -70,36 +71,37 @@ export type PostState = {
   attachments: { sensitive: boolean; uploads: Mastodon.Attachment[] }
   attachmentUploadProgress: { progress: number; aspect?: number } | undefined
   visibility: 'public' | 'unlisted' | 'private' | 'direct'
+  replyToStatus?: Mastodon.Status
 }
 
 export type PostAction =
   | {
       type: 'spoiler'
-      payload: Partial<PostState['spoiler']>
+      payload: Partial<ComposeState['spoiler']>
     }
   | {
       type: 'text'
-      payload: Partial<PostState['text']>
+      payload: Partial<ComposeState['text']>
     }
   | {
       type: 'tag'
-      payload: PostState['tag']
+      payload: ComposeState['tag']
     }
   | {
       type: 'emoji'
-      payload: PostState['emoji']
+      payload: ComposeState['emoji']
     }
   | {
       type: 'poll'
-      payload: PostState['poll']
+      payload: ComposeState['poll']
     }
   | {
       type: 'attachments'
-      payload: Partial<PostState['attachments']>
+      payload: Partial<ComposeState['attachments']>
     }
   | {
       type: 'attachmentUploadProgress'
-      payload: PostState['attachmentUploadProgress']
+      payload: ComposeState['attachmentUploadProgress']
     }
   | {
       type: 'attachmentEdit'
@@ -107,10 +109,10 @@ export type PostAction =
     }
   | {
       type: 'visibility'
-      payload: PostState['visibility']
+      payload: ComposeState['visibility']
     }
 
-const postInitialState: PostState = {
+const composeInitialState: ComposeState = {
   spoiler: {
     active: false,
     count: 0,
@@ -143,9 +145,75 @@ const postInitialState: PostState = {
   visibility:
     getLocalAccountPreferences(store.getState())[
       'posting:default:visibility'
-    ] || 'public'
+    ] || 'public',
+  replyToStatus: undefined
 }
-const postReducer = (state: PostState, action: PostAction): PostState => {
+const composeExistingState = ({
+  type,
+  incomingStatus
+}: {
+  type: 'reply' | 'edit'
+  incomingStatus: Mastodon.Status
+}): ComposeState => {
+  switch (type) {
+    case 'edit':
+      return {
+        ...composeInitialState,
+        ...(incomingStatus.spoiler_text?.length && {
+          spoiler: {
+            active: true,
+            count: incomingStatus.spoiler_text.length,
+            raw: incomingStatus.spoiler_text,
+            formatted: incomingStatus.spoiler_text,
+            selection: { start: 0, end: 0 }
+          }
+        }),
+        text: {
+          count: incomingStatus.text!.length,
+          raw: incomingStatus.text!,
+          formatted: undefined,
+          selection: { start: 0, end: 0 }
+        },
+        ...(incomingStatus.poll && {
+          poll: {
+            active: true,
+            total: incomingStatus.poll.options.length,
+            options: {
+              '0': incomingStatus.poll.options[0].title || undefined,
+              '1': incomingStatus.poll.options[1].title || undefined,
+              '2': incomingStatus.poll.options[2].title || undefined,
+              '3': incomingStatus.poll.options[3].title || undefined
+            },
+            multiple: incomingStatus.poll.multiple,
+            expire: '86400' // !!!
+          }
+        }),
+        ...(incomingStatus.media_attachments && {
+          attachments: {
+            sensitive: incomingStatus.sensitive,
+            uploads: incomingStatus.media_attachments
+          }
+        }),
+        visibility: incomingStatus.visibility
+      }
+    case 'reply':
+      const replyPlaceholder = `@${
+        incomingStatus.reblog
+          ? incomingStatus.reblog.account.acct
+          : incomingStatus.account.acct
+      } `
+      return {
+        ...composeInitialState,
+        text: {
+          count: replyPlaceholder.length,
+          raw: replyPlaceholder,
+          formatted: undefined,
+          selection: { start: 0, end: 0 }
+        }
+      }
+  }
+}
+const postReducer = (state: ComposeState, action: PostAction): ComposeState => {
   switch (action.type) {
     case 'spoiler':
       return { ...state, spoiler: { ...state.spoiler, ...action.payload } }
@@ -181,11 +249,20 @@ const postReducer = (state: PostState, action: PostAction): PostState => {
   }
 }
 
-const Compose: React.FC = () => {
+export interface Props {
-  const { theme } = useTheme()
+  route: {
-  const navigation = useNavigation()
+    params:
+      | {
+          type?: 'reply' | 'edit'
+          incomingStatus: Mastodon.Status
+        }
+      | undefined
+  }
+}
 
-  const [isSubmitting, setIsSubmitting] = useState(false)
+const Compose: React.FC<Props> = ({ route: { params } }) => {
+  const navigation = useNavigation()
+  const { theme } = useTheme()
 
   const [hasKeyboard, setHasKeyboard] = useState(false)
   useEffect(() => {
@@ -205,11 +282,53 @@ const Compose: React.FC = () => {
     setHasKeyboard(false)
   }
 
-  const [postState, postDispatch] = useReducer(postReducer, postInitialState)
+  const [composeState, composeDispatch] = useReducer(
+    postReducer,
+    params?.type && params?.incomingStatus
+      ? composeExistingState({
+          type: params.type,
+          incomingStatus: params.incomingStatus
+        })
+      : composeInitialState
+  )
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  useEffect(() => {
+    switch (params?.type) {
+      case 'edit':
+        if (params.incomingStatus.spoiler_text) {
+          formatText({
+            origin: 'spoiler',
+            composeDispatch,
+            content: params.incomingStatus.spoiler_text,
+            disableDebounce: true
+          })
+        }
+        formatText({
+          origin: 'text',
+          composeDispatch,
+          content: params.incomingStatus.text!,
+          disableDebounce: true
+        })
+        break
+      case 'reply':
+        formatText({
+          origin: 'text',
+          composeDispatch,
+          content: `@${
+            params.incomingStatus.reblog
+              ? params.incomingStatus.reblog.account.acct
+              : params.incomingStatus.account.acct
+          } `,
+          disableDebounce: true
+        })
+        break
+    }
+  }, [params?.type])
 
   const tootPost = async () => {
     setIsSubmitting(true)
-    if (postState.text.count < 0) {
+    if (composeState.text.count < 0) {
       Alert.alert('字数超限', '', [
         {
           text: '返回继续编辑'
@@ -218,28 +337,31 @@ const Compose: React.FC = () => {
     } else {
       const formData = new FormData()
 
-      if (postState.spoiler.active) {
+      if (composeState.spoiler.active) {
-        formData.append('spoiler_text', postState.spoiler.raw)
+        formData.append('spoiler_text', composeState.spoiler.raw)
       }
 
-      formData.append('status', postState.text.raw)
+      formData.append('status', composeState.text.raw)
 
-      if (postState.poll.active) {
+      if (composeState.poll.active) {
-        Object.values(postState.poll.options)
+        Object.values(composeState.poll.options)
           .filter(e => e?.length)
           .forEach(e => formData.append('poll[options][]', e!))
-        formData.append('poll[expires_in]', postState.poll.expire)
+        formData.append('poll[expires_in]', composeState.poll.expire)
-        formData.append('poll[multiple]', postState.poll.multiple.toString())
+        formData.append('poll[multiple]', composeState.poll.multiple.toString())
       }
 
-      if (postState.attachments.uploads.length) {
+      if (composeState.attachments.uploads.length) {
-        formData.append('sensitive', postState.attachments.sensitive.toString())
+        formData.append(
-        postState.attachments.uploads.forEach(e =>
+          'sensitive',
+          composeState.attachments.sensitive.toString()
+        )
+        composeState.attachments.uploads.forEach(e =>
           formData.append('media_ids[]', e!.id)
         )
       }
 
-      formData.append('visibility', postState.visibility)
+      formData.append('visibility', composeState.visibility)
 
       client({
         method: 'post',
@@ -247,17 +369,17 @@ const Compose: React.FC = () => {
         url: 'statuses',
         headers: {
           'Idempotency-Key': sha256(
-            postState.spoiler.raw +
+            composeState.spoiler.raw +
-              postState.text.raw +
+              composeState.text.raw +
-              postState.poll.options['0'] +
+              composeState.poll.options['0'] +
-              postState.poll.options['1'] +
+              composeState.poll.options['1'] +
-              postState.poll.options['2'] +
+              composeState.poll.options['2'] +
-              postState.poll.options['3'] +
+              composeState.poll.options['3'] +
-              postState.poll.multiple +
+              composeState.poll.multiple +
-              postState.poll.expire +
+              composeState.poll.expire +
-              postState.attachments.sensitive +
+              composeState.attachments.sensitive +
-              postState.attachments.uploads.map(upload => upload.id) +
+              composeState.attachments.uploads.map(upload => upload.id) +
-              postState.visibility
+              composeState.visibility
           ).toString()
         },
         body: formData
@@ -305,8 +427,8 @@ const Compose: React.FC = () => {
   }
 
   const totalTextCount =
-    (postState.spoiler.active ? postState.spoiler.count : 0) +
+    (composeState.spoiler.active ? composeState.spoiler.count : 0) +
-    postState.text.count
+    composeState.text.count
 
   return (
     <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
@@ -354,14 +476,17 @@ const Compose: React.FC = () => {
                     onPress={async () => tootPost()}
                     text='发嘟嘟'
                     disabled={
-                      postState.text.raw.length < 1 || totalTextCount > 500
+                      composeState.text.raw.length < 1 || totalTextCount > 500
                     }
                   />
                 )
             }}
           >
             {() => (
-              <ComposeRoot postState={postState} postDispatch={postDispatch} />
+              <ComposeRoot
+                composeState={composeState}
+                composeDispatch={composeDispatch}
+              />
             )}
           </Stack.Screen>
         </Stack.Navigator>
@@ -377,4 +502,4 @@ const styles = StyleSheet.create({
   }
 })
 
-export default Compose
+export default React.memo(Compose, () => true)

src/screens/Shared/Compose/Actions.tsx

@@ -10,24 +10,24 @@ import {
 } from 'react-native'
 import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-import { PostAction, PostState } from '../Compose'
+import { PostAction, ComposeState } from '../Compose'
 import addAttachments from './addAttachments'
 
 export interface Props {
   textInputRef: React.RefObject<TextInput>
-  postState: PostState
+  composeState: ComposeState
-  postDispatch: Dispatch<PostAction>
+  composeDispatch: Dispatch<PostAction>
 }
 
 const ComposeActions: React.FC<Props> = ({
   textInputRef,
-  postState,
+  composeState,
-  postDispatch
+  composeDispatch
 }) => {
   const { theme } = useTheme()
 
   const getVisibilityIcon = () => {
-    switch (postState.visibility) {
+    switch (composeState.visibility) {
       case 'public':
         return 'globe'
       case 'unlisted':
@@ -40,88 +40,88 @@ const ComposeActions: React.FC<Props> = ({
   }
 
   const attachmentColor = useMemo(() => {
-    if (postState.poll.active) return theme.disabled
+    if (composeState.poll.active) return theme.disabled
-    if (postState.attachmentUploadProgress) return theme.primary
+    if (composeState.attachmentUploadProgress) return theme.primary
 
-    if (postState.attachments.uploads.length) {
+    if (composeState.attachments.uploads.length) {
       return theme.primary
     } else {
       return theme.secondary
     }
   }, [
-    postState.poll.active,
+    composeState.poll.active,
-    postState.attachments.uploads,
+    composeState.attachments.uploads,
-    postState.attachmentUploadProgress
+    composeState.attachmentUploadProgress
   ])
   const attachmentOnPress = useCallback(async () => {
-    if (postState.poll.active) return
+    if (composeState.poll.active) return
-    if (postState.attachmentUploadProgress) return
+    if (composeState.attachmentUploadProgress) return
 
-    if (!postState.attachments.uploads.length) {
+    if (!composeState.attachments.uploads.length) {
-      return await addAttachments({ postState, postDispatch })
+      return await addAttachments({ composeState, composeDispatch })
     }
   }, [
-    postState.poll.active,
+    composeState.poll.active,
-    postState.attachments.uploads,
+    composeState.attachments.uploads,
-    postState.attachmentUploadProgress
+    composeState.attachmentUploadProgress
   ])
 
   const pollColor = useMemo(() => {
-    if (postState.attachments.uploads.length) return theme.disabled
+    if (composeState.attachments.uploads.length) return theme.disabled
-    if (postState.attachmentUploadProgress) return theme.disabled
+    if (composeState.attachmentUploadProgress) return theme.disabled
 
-    if (postState.poll.active) {
+    if (composeState.poll.active) {
       return theme.primary
     } else {
       return theme.secondary
     }
   }, [
-    postState.poll.active,
+    composeState.poll.active,
-    postState.attachments.uploads,
+    composeState.attachments.uploads,
-    postState.attachmentUploadProgress
+    composeState.attachmentUploadProgress
   ])
   const pollOnPress = useCallback(() => {
     if (
-      !postState.attachments.uploads.length &&
+      !composeState.attachments.uploads.length &&
-      !postState.attachmentUploadProgress
+      !composeState.attachmentUploadProgress
     ) {
-      postDispatch({
+      composeDispatch({
         type: 'poll',
-        payload: { ...postState.poll, active: !postState.poll.active }
+        payload: { ...composeState.poll, active: !composeState.poll.active }
       })
     }
-    if (postState.poll.active) {
+    if (composeState.poll.active) {
       textInputRef.current?.focus()
     }
   }, [
-    postState.poll.active,
+    composeState.poll.active,
-    postState.attachments.uploads,
+    composeState.attachments.uploads,
-    postState.attachmentUploadProgress
+    composeState.attachmentUploadProgress
   ])
 
   const emojiColor = useMemo(() => {
-    if (!postState.emoji.emojis) return theme.disabled
+    if (!composeState.emoji.emojis) return theme.disabled
-    if (postState.emoji.active) {
+    if (composeState.emoji.active) {
       return theme.primary
     } else {
       return theme.secondary
     }
-  }, [postState.emoji.active, postState.emoji.emojis])
+  }, [composeState.emoji.active, composeState.emoji.emojis])
   const emojiOnPress = useCallback(() => {
-    if (postState.emoji.emojis) {
+    if (composeState.emoji.emojis) {
-      if (postState.emoji.active) {
+      if (composeState.emoji.active) {
-        postDispatch({
+        composeDispatch({
           type: 'emoji',
-          payload: { ...postState.emoji, active: false }
+          payload: { ...composeState.emoji, active: false }
         })
       } else {
-        postDispatch({
+        composeDispatch({
           type: 'emoji',
-          payload: { ...postState.emoji, active: true }
+          payload: { ...composeState.emoji, active: true }
         })
       }
     }
-  }, [postState.emoji.active, postState.emoji.emojis])
+  }, [composeState.emoji.active, composeState.emoji.emojis])
 
   return (
     <Pressable
@@ -156,16 +156,16 @@ const ComposeActions: React.FC<Props> = ({
             buttonIndex => {
               switch (buttonIndex) {
                 case 0:
-                  postDispatch({ type: 'visibility', payload: 'public' })
+                  composeDispatch({ type: 'visibility', payload: 'public' })
                   break
                 case 1:
-                  postDispatch({ type: 'visibility', payload: 'unlisted' })
+                  composeDispatch({ type: 'visibility', payload: 'unlisted' })
                   break
                 case 2:
-                  postDispatch({ type: 'visibility', payload: 'private' })
+                  composeDispatch({ type: 'visibility', payload: 'private' })
                   break
                 case 3:
-                  postDispatch({ type: 'visibility', payload: 'direct' })
+                  composeDispatch({ type: 'visibility', payload: 'direct' })
                   break
               }
             }
@@ -175,11 +175,11 @@ const ComposeActions: React.FC<Props> = ({
       <Feather
         name='alert-triangle'
         size={24}
-        color={postState.spoiler.active ? theme.primary : theme.secondary}
+        color={composeState.spoiler.active ? theme.primary : theme.secondary}
         onPress={() =>
-          postDispatch({
+          composeDispatch({
             type: 'spoiler',
-            payload: { active: !postState.spoiler.active }
+            payload: { active: !composeState.spoiler.active }
           })
         }
       />

src/screens/Shared/Compose/Attachments.tsx

@@ -8,7 +8,7 @@ import {
   View
 } from 'react-native'
 
-import { PostAction, PostState } from '../Compose'
+import { PostAction, ComposeState } from '../Compose'
 import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import { useNavigation } from '@react-navigation/native'
@@ -20,11 +20,11 @@ import { Feather } from '@expo/vector-icons'
 const DEFAULT_HEIGHT = 200
 
 export interface Props {
-  postState: PostState
+  composeState: ComposeState
-  postDispatch: Dispatch<PostAction>
+  composeDispatch: Dispatch<PostAction>
 }
 
-const ComposeAttachments: React.FC<Props> = ({ postState, postDispatch }) => {
+const ComposeAttachments: React.FC<Props> = ({ composeState, composeDispatch }) => {
   const { theme } = useTheme()
   const navigation = useNavigation()
 
@@ -73,10 +73,10 @@ const ComposeAttachments: React.FC<Props> = ({ postState, postDispatch }) => {
           <ButtonRound
             icon='x'
             onPress={() =>
-              postDispatch({
+              composeDispatch({
                 type: 'attachments',
                 payload: {
-                  uploads: postState.attachments.uploads.filter(
+                  uploads: composeState.attachments.uploads.filter(
                     e => e.id !== item.id
                   )
                 }
@@ -89,7 +89,7 @@ const ComposeAttachments: React.FC<Props> = ({ postState, postDispatch }) => {
             onPress={() =>
               navigation.navigate('Screen-Shared-Compose-EditAttachment', {
                 attachment: item,
-                postDispatch
+                composeDispatch
               })
             }
             styles={styles.edit}
@@ -104,15 +104,15 @@ const ComposeAttachments: React.FC<Props> = ({ postState, postDispatch }) => {
     return (
       <ShimmerPlaceholder
         style={styles.progressContainer}
-        visible={postState.attachmentUploadProgress === undefined}
+        visible={composeState.attachmentUploadProgress === undefined}
         width={
-          (postState.attachmentUploadProgress?.aspect || 3 / 2) * DEFAULT_HEIGHT
+          (composeState.attachmentUploadProgress?.aspect || 3 / 2) * DEFAULT_HEIGHT
         }
         height={200}
       >
-        {postState.attachments.uploads.length > 0 &&
+        {composeState.attachments.uploads.length > 0 &&
-          postState.attachments.uploads[0].type === 'image' &&
+          composeState.attachments.uploads[0].type === 'image' &&
-          postState.attachments.uploads.length < 4 && (
+          composeState.attachments.uploads.length < 4 && (
             <Pressable
               style={{
                 width: DEFAULT_HEIGHT,
@@ -120,13 +120,13 @@ const ComposeAttachments: React.FC<Props> = ({ postState, postDispatch }) => {
                 backgroundColor: theme.border
               }}
               onPress={async () =>
-                await addAttachments({ postState, postDispatch })
+                await addAttachments({ composeState, composeDispatch })
               }
             >
               <ButtonRound
                 icon='upload-cloud'
                 onPress={async () =>
-                  await addAttachments({ postState, postDispatch })
+                  await addAttachments({ composeState, composeDispatch })
                 }
                 styles={{
                   top:
@@ -144,21 +144,21 @@ const ComposeAttachments: React.FC<Props> = ({ postState, postDispatch }) => {
           )}
       </ShimmerPlaceholder>
     )
-  }, [postState.attachmentUploadProgress, postState.attachments.uploads])
+  }, [composeState.attachmentUploadProgress, composeState.attachments.uploads])
 
   return (
     <View style={styles.base}>
       <Pressable
         style={styles.sensitive}
         onPress={() =>
-          postDispatch({
+          composeDispatch({
             type: 'attachments',
-            payload: { sensitive: !postState.attachments.sensitive }
+            payload: { sensitive: !composeState.attachments.sensitive }
           })
         }
       >
         <Feather
-          name={postState.attachments.sensitive ? 'check-circle' : 'circle'}
+          name={composeState.attachments.sensitive ? 'check-circle' : 'circle'}
           size={StyleConstants.Font.Size.L}
           color={theme.primary}
         />
@@ -169,8 +169,8 @@ const ComposeAttachments: React.FC<Props> = ({ postState, postDispatch }) => {
       <View style={styles.imageContainer}>
         <FlatList
           horizontal
-          extraData={postState.attachments.uploads.length}
+          extraData={composeState.attachments.uploads.length}
-          data={postState.attachments.uploads}
+          data={composeState.attachments.uploads}
           renderItem={renderAttachment}
           ListFooterComponent={listFooter}
           showsHorizontalScrollIndicator={false}

src/screens/Shared/Compose/EditAttachment.tsx

@@ -36,14 +36,14 @@ export interface Props {
   route: {
     params: {
       attachment: Mastodon.Attachment & { local_url: string }
-      postDispatch: Dispatch<PostAction>
+      composeDispatch: Dispatch<PostAction>
     }
   }
 }
 
 const ComposeEditAttachment: React.FC<Props> = ({
   route: {
-    params: { attachment, postDispatch }
+    params: { attachment, composeDispatch }
   }
 }) => {
   const navigation = useNavigation()
@@ -72,7 +72,7 @@ const ComposeEditAttachment: React.FC<Props> = ({
         }
       }
       if (needUpdate) {
-        postDispatch({ type: 'attachmentEdit', payload: attachment })
+        composeDispatch({ type: 'attachmentEdit', payload: attachment })
       }
     })
 

src/screens/Shared/Compose/Emojis.tsx

@@ -11,19 +11,19 @@ import {
 import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 
-import { PostAction, PostState } from '../Compose'
+import { PostAction, ComposeState } from '../Compose'
 import updateText from './updateText'
 
 export interface Props {
   textInputRef: React.RefObject<TextInput>
-  postState: PostState
+  composeState: ComposeState
-  postDispatch: Dispatch<PostAction>
+  composeDispatch: Dispatch<PostAction>
 }
 
 const ComposeEmojis: React.FC<Props> = ({
   textInputRef,
-  postState,
+  composeState,
-  postDispatch
+  composeDispatch
 }) => {
   const { theme } = useTheme()
 
@@ -32,7 +32,7 @@ const ComposeEmojis: React.FC<Props> = ({
       <SectionList
         horizontal
         keyboardShouldPersistTaps='handled'
-        sections={postState.emoji.emojis!}
+        sections={composeState.emoji.emojis!}
         keyExtractor={item => item.shortcode}
         renderSectionHeader={({ section: { title } }) => (
           <Text style={[styles.group, { color: theme.secondary }]}>
@@ -51,14 +51,14 @@ const ComposeEmojis: React.FC<Props> = ({
                         origin: textInputRef.current?.isFocused()
                           ? 'text'
                           : 'spoiler',
-                        postState,
+                        composeState,
-                        postDispatch,
+                        composeDispatch,
                         newText: `:${emoji.shortcode}:`,
                         type: 'emoji'
                       })
-                      postDispatch({
+                      composeDispatch({
                         type: 'emoji',
-                        payload: { ...postState.emoji, active: false }
+                        payload: { ...composeState.emoji, active: false }
                       })
                     }}
                   >

src/screens/Shared/Compose/Poll.tsx

@@ -2,18 +2,18 @@ import React, { Dispatch, useEffect, useState } from 'react'
 import { ActionSheetIOS, StyleSheet, TextInput, View } from 'react-native'
 import { Feather } from '@expo/vector-icons'
 
-import { PostAction, PostState } from '../Compose'
+import { PostAction, ComposeState } from '../Compose'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import { StyleConstants } from 'src/utils/styles/constants'
 import { ButtonRow } from 'src/components/Button'
 import { MenuContainer, MenuRow } from 'src/components/Menu'
 
 export interface Props {
-  postState: PostState
+  composeState: ComposeState
-  postDispatch: Dispatch<PostAction>
+  composeDispatch: Dispatch<PostAction>
 }
 
-const ComposePoll: React.FC<Props> = ({ postState, postDispatch }) => {
+const ComposePoll: React.FC<Props> = ({ composeState, composeDispatch }) => {
   const { theme } = useTheme()
 
   const expireMapping: { [key: string]: string } = {
@@ -34,21 +34,21 @@ const ComposePoll: React.FC<Props> = ({ postState, postDispatch }) => {
   return (
     <View style={[styles.base, { borderColor: theme.border }]}>
       <View style={styles.options}>
-        {[...Array(postState.poll.total)].map((e, i) => {
+        {[...Array(composeState.poll.total)].map((e, i) => {
-          const restOptions = Object.keys(postState.poll.options).filter(
+          const restOptions = Object.keys(composeState.poll.options).filter(
-            o => parseInt(o) !== i && parseInt(o) < postState.poll.total
+            o => parseInt(o) !== i && parseInt(o) < composeState.poll.total
           )
           let hasConflict = false
           restOptions.forEach(o => {
             // @ts-ignore
-            if (postState.poll.options[o] === postState.poll.options[i]) {
+            if (composeState.poll.options[o] === composeState.poll.options[i]) {
               hasConflict = true
             }
           })
           return (
             <View key={i} style={styles.option}>
               <Feather
-                name={postState.poll.multiple ? 'square' : 'circle'}
+                name={composeState.poll.multiple ? 'square' : 'circle'}
                 size={StyleConstants.Font.Size.L}
                 color={theme.secondary}
               />
@@ -65,13 +65,13 @@ const ComposePoll: React.FC<Props> = ({ postState, postDispatch }) => {
                 placeholderTextColor={theme.secondary}
                 maxLength={50}
                 // @ts-ignore
-                value={postState.poll.options[i]}
+                value={composeState.poll.options[i]}
                 onChangeText={e =>
-                  postDispatch({
+                  composeDispatch({
                     type: 'poll',
                     payload: {
-                      ...postState.poll,
+                      ...composeState.poll,
-                      options: { ...postState.poll.options, [i]: e }
+                      options: { ...composeState.poll.options, [i]: e }
                     }
                   })
                 }
@@ -84,34 +84,34 @@ const ComposePoll: React.FC<Props> = ({ postState, postDispatch }) => {
         <View style={styles.firstButton}>
           <ButtonRow
             onPress={() =>
-              postState.poll.total > 2 &&
+              composeState.poll.total > 2 &&
-              postDispatch({
+              composeDispatch({
                 type: 'poll',
-                payload: { ...postState.poll, total: postState.poll.total - 1 }
+                payload: { ...composeState.poll, total: composeState.poll.total - 1 }
               })
             }
             icon='minus'
-            disabled={!(postState.poll.total > 2)}
+            disabled={!(composeState.poll.total > 2)}
             buttonSize='S'
           />
         </View>
         <ButtonRow
           onPress={() =>
-            postState.poll.total < 4 &&
+            composeState.poll.total < 4 &&
-            postDispatch({
+            composeDispatch({
               type: 'poll',
-              payload: { ...postState.poll, total: postState.poll.total + 1 }
+              payload: { ...composeState.poll, total: composeState.poll.total + 1 }
             })
           }
           icon='plus'
-          disabled={!(postState.poll.total < 4)}
+          disabled={!(composeState.poll.total < 4)}
           buttonSize='S'
         />
       </View>
       <MenuContainer>
         <MenuRow
           title='可选项'
-          content={postState.poll.multiple ? '多选' : '单选'}
+          content={composeState.poll.multiple ? '多选' : '单选'}
           onPress={() =>
             ActionSheetIOS.showActionSheetWithOptions(
               {
@@ -120,9 +120,9 @@ const ComposePoll: React.FC<Props> = ({ postState, postDispatch }) => {
               },
               index =>
                 index < 2 &&
-                postDispatch({
+                composeDispatch({
                   type: 'poll',
-                  payload: { ...postState.poll, multiple: index === 1 }
+                  payload: { ...composeState.poll, multiple: index === 1 }
                 })
             )
           }
@@ -130,7 +130,7 @@ const ComposePoll: React.FC<Props> = ({ postState, postDispatch }) => {
         />
         <MenuRow
           title='有效期'
-          content={expireMapping[postState.poll.expire]}
+          content={expireMapping[composeState.poll.expire]}
           onPress={() =>
             ActionSheetIOS.showActionSheetWithOptions(
               {
@@ -139,10 +139,10 @@ const ComposePoll: React.FC<Props> = ({ postState, postDispatch }) => {
               },
               index =>
                 index < 7 &&
-                postDispatch({
+                composeDispatch({
                   type: 'poll',
                   payload: {
-                    ...postState.poll,
+                    ...composeState.poll,
                     expire: Object.keys(expireMapping)[index]
                   }
                 })

src/screens/Shared/Compose/Root.tsx

@@ -17,7 +17,7 @@ import { emojisFetch } from 'src/utils/fetches/emojisFetch'
 import { searchFetch } from 'src/utils/fetches/searchFetch'
 import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-import { PostAction, PostState } from '../Compose'
+import { PostAction, ComposeState } from '../Compose'
 import ComposeActions from './Actions'
 import ComposeAttachments from './Attachments'
 import ComposeEmojis from './Emojis'
@@ -28,26 +28,26 @@ import updateText from './updateText'
 import * as Permissions from 'expo-permissions'
 
 export interface Props {
-  postState: PostState
+  composeState: ComposeState
-  postDispatch: Dispatch<PostAction>
+  composeDispatch: Dispatch<PostAction>
 }
 
-const ComposeRoot: React.FC<Props> = ({ postState, postDispatch }) => {
+const ComposeRoot: React.FC<Props> = ({ composeState, composeDispatch }) => {
   const { theme } = useTheme()
 
   const { isFetching, isSuccess, data, refetch } = useQuery(
     [
       'Search',
-      { type: postState.tag?.type, term: postState.tag?.text.substring(1) }
+      { type: composeState.tag?.type, term: composeState.tag?.text.substring(1) }
     ],
     searchFetch,
     { enabled: false }
   )
   useEffect(() => {
-    if (postState.tag?.text) {
+    if (composeState.tag?.text) {
       refetch()
     }
-  }, [postState.tag?.text])
+  }, [composeState.tag?.text])
 
   useEffect(() => {
     ;(async () => {
@@ -71,9 +71,9 @@ const ComposeRoot: React.FC<Props> = ({ postState, postDispatch }) => {
         groupBy(sortBy(emojisData, ['category', 'shortcode']), 'category'),
         (value, key) => sortedEmojis.push({ title: key, data: value })
       )
-      postDispatch({
+      composeDispatch({
         type: 'emoji',
-        payload: { ...postState.emoji, emojis: sortedEmojis }
+        payload: { ...composeState.emoji, emojis: sortedEmojis }
       })
     }
   }, [emojisData])
@@ -89,60 +89,60 @@ const ComposeRoot: React.FC<Props> = ({ postState, postDispatch }) => {
   return (
     <View style={styles.base}>
       <ProgressViewIOS
-        progress={postState.attachmentUploadProgress?.progress || 0}
+        progress={composeState.attachmentUploadProgress?.progress || 0}
         progressViewStyle='bar'
       />
       <FlatList
         keyboardShouldPersistTaps='handled'
         ListHeaderComponent={
           <>
-            {postState.spoiler.active ? (
+            {composeState.spoiler.active ? (
               <ComposeSpoilerInput
-                postState={postState}
+                composeState={composeState}
-                postDispatch={postDispatch}
+                composeDispatch={composeDispatch}
               />
             ) : null}
             <ComposeTextInput
-              postState={postState}
+              composeState={composeState}
-              postDispatch={postDispatch}
+              composeDispatch={composeDispatch}
               textInputRef={textInputRef}
             />
           </>
         }
         ListFooterComponent={
           <>
-            {postState.emoji.active && (
+            {composeState.emoji.active && (
               <View style={styles.emojis}>
                 <ComposeEmojis
                   textInputRef={textInputRef}
-                  postState={postState}
+                  composeState={composeState}
-                  postDispatch={postDispatch}
+                  composeDispatch={composeDispatch}
                 />
               </View>
             )}
 
-            {(postState.attachments.uploads.length > 0 ||
+            {(composeState.attachments.uploads.length > 0 ||
-              postState.attachmentUploadProgress) && (
+              composeState.attachmentUploadProgress) && (
               <View style={styles.attachments}>
                 <ComposeAttachments
-                  postState={postState}
+                  composeState={composeState}
-                  postDispatch={postDispatch}
+                  composeDispatch={composeDispatch}
                 />
               </View>
             )}
 
-            {postState.poll.active && (
+            {composeState.poll.active && (
               <View style={styles.poll}>
                 <ComposePoll
-                  postState={postState}
+                  composeState={composeState}
-                  postDispatch={postDispatch}
+                  composeDispatch={composeDispatch}
                 />
               </View>
             )}
           </>
         }
         ListEmptyComponent={listEmpty}
-        data={postState.tag && isSuccess ? data[postState.tag.type] : []}
+        data={composeState.tag && isSuccess ? data[composeState.tag.type] : []}
         renderItem={({ item, index }) => (
           <Pressable
             key={index}
@@ -152,18 +152,18 @@ const ComposeRoot: React.FC<Props> = ({ postState, postDispatch }) => {
                 : 'spoiler'
               updateText({
                 origin: focusedInput,
-                postState: {
+                composeState: {
-                  ...postState,
+                  ...composeState,
                   [focusedInput]: {
-                    ...postState[focusedInput],
+                    ...composeState[focusedInput],
                     selection: {
-                      start: postState.tag!.offset,
+                      start: composeState.tag!.offset,
                       end:
-                        postState.tag!.offset + postState.tag!.text.length + 1
+                        composeState.tag!.offset + composeState.tag!.text.length + 1
                     }
                   }
                 },
-                postDispatch,
+                composeDispatch,
                 newText: item.acct ? `@${item.acct}` : `#${item.name}`,
                 type: 'suggestion'
               })
@@ -225,8 +225,8 @@ const ComposeRoot: React.FC<Props> = ({ postState, postDispatch }) => {
       />
       <ComposeActions
         textInputRef={textInputRef}
-        postState={postState}
+        composeState={composeState}
-        postDispatch={postDispatch}
+        composeDispatch={composeDispatch}
       />
     </View>
   )

src/screens/Shared/Compose/SpoilerInput.tsx

@@ -2,18 +2,18 @@ import React, { Dispatch, RefObject } from 'react'
 import { StyleSheet, Text, TextInput } from 'react-native'
 import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-import { PostAction, PostState } from '../Compose'
+import { PostAction, ComposeState } from '../Compose'
 import formatText from './formatText'
 
 export interface Props {
-  postState: PostState
+  composeState: ComposeState
-  postDispatch: Dispatch<PostAction>
+  composeDispatch: Dispatch<PostAction>
   // textInputRef: RefObject<TextInput>
 }
 
 const ComposeSpoilerInput: React.FC<Props> = ({
-  postState,
+  composeState,
-  postDispatch,
+  composeDispatch,
   // textInputRef
 }) => {
   const { theme } = useTheme()
@@ -37,7 +37,7 @@ const ComposeSpoilerInput: React.FC<Props> = ({
       onChangeText={content =>
         formatText({
           origin: 'spoiler',
-          postDispatch,
+          composeDispatch,
           content
         })
       }
@@ -46,7 +46,7 @@ const ComposeSpoilerInput: React.FC<Props> = ({
           selection: { start, end }
         }
       }) => {
-        postDispatch({
+        composeDispatch({
           type: 'spoiler',
           payload: { selection: { start, end } }
         })
@@ -54,7 +54,7 @@ const ComposeSpoilerInput: React.FC<Props> = ({
       // ref={textInputRef}
       scrollEnabled
     >
-      <Text>{postState.spoiler.formatted}</Text>
+      <Text>{composeState.spoiler.formatted}</Text>
     </TextInput>
   )
 }
@@ -73,5 +73,5 @@ const styles = StyleSheet.create({
 export default React.memo(
   ComposeSpoilerInput,
   (prev, next) =>
-    prev.postState.spoiler.formatted === next.postState.spoiler.formatted
+    prev.composeState.spoiler.formatted === next.composeState.spoiler.formatted
 )

src/screens/Shared/Compose/TextInput.tsx

@@ -2,18 +2,18 @@ import React, { Dispatch, RefObject } from 'react'
 import { StyleSheet, Text, TextInput } from 'react-native'
 import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-import { PostAction, PostState } from '../Compose'
+import { PostAction, ComposeState } from '../Compose'
 import formatText from './formatText'
 
 export interface Props {
-  postState: PostState
+  composeState: ComposeState
-  postDispatch: Dispatch<PostAction>
+  composeDispatch: Dispatch<PostAction>
   textInputRef: RefObject<TextInput>
 }
 
 const ComposeTextInput: React.FC<Props> = ({
-  postState,
+  composeState,
-  postDispatch,
+  composeDispatch,
   textInputRef
 }) => {
   const { theme } = useTheme()
@@ -37,7 +37,7 @@ const ComposeTextInput: React.FC<Props> = ({
       onChangeText={content =>
         formatText({
           origin: 'text',
-          postDispatch,
+          composeDispatch,
           content
         })
       }
@@ -46,12 +46,12 @@ const ComposeTextInput: React.FC<Props> = ({
           selection: { start, end }
         }
       }) => {
-        postDispatch({ type: 'text', payload: { selection: { start, end } } })
+        composeDispatch({ type: 'text', payload: { selection: { start, end } } })
       }}
       ref={textInputRef}
       scrollEnabled
     >
-      <Text>{postState.text.formatted}</Text>
+      <Text>{composeState.text.formatted}</Text>
     </TextInput>
   )
 }
@@ -70,5 +70,5 @@ const styles = StyleSheet.create({
 export default React.memo(
   ComposeTextInput,
   (prev, next) =>
-    prev.postState.text.formatted === next.postState.text.formatted
+    prev.composeState.text.formatted === next.composeState.text.formatted
 )

src/screens/Shared/Compose/addAttachments.ts

@@ -2,18 +2,18 @@ import { Dispatch } from 'react'
 import { ActionSheetIOS, Alert } from 'react-native'
 import * as ImagePicker from 'expo-image-picker'
 
-import { PostAction, PostState } from '../Compose'
+import { PostAction, ComposeState } from '../Compose'
 import client from 'src/api/client'
 import { ImageInfo } from 'expo-image-picker/build/ImagePicker.types'
 
 const uploadAttachment = async ({
   result,
-  postState,
+  composeState,
-  postDispatch
+  composeDispatch
 }: {
   result: NonNullable<ImageInfo>
-  postState: PostState
+  composeState: ComposeState
-  postDispatch: Dispatch<PostAction>
+  composeDispatch: Dispatch<PostAction>
 }) => {
   const formData = new FormData()
   // @ts-ignore
@@ -30,7 +30,7 @@ const uploadAttachment = async ({
     url: 'media',
     body: formData,
     onUploadProgress: p => {
-      postDispatch({
+      composeDispatch({
         type: 'attachmentUploadProgress',
         payload: {
           progress: p.loaded / p.total,
@@ -40,15 +40,15 @@ const uploadAttachment = async ({
     }
   })
     .then(({ body }: { body: Mastodon.Attachment & { local_url: string } }) => {
-      postDispatch({
+      composeDispatch({
         type: 'attachmentUploadProgress',
         payload: undefined
       })
       if (body.id) {
         body.local_url = result.uri
-        postDispatch({
+        composeDispatch({
           type: 'attachments',
-          payload: { uploads: postState.attachments.uploads.concat([body]) }
+          payload: { uploads: composeState.attachments.uploads.concat([body]) }
         })
         return Promise.resolve()
       } else {
@@ -56,7 +56,7 @@ const uploadAttachment = async ({
           {
             text: '返回重试',
             onPress: () =>
-              postDispatch({
+              composeDispatch({
                 type: 'attachmentUploadProgress',
                 payload: undefined
               })
@@ -70,7 +70,7 @@ const uploadAttachment = async ({
         {
           text: '返回重试',
           onPress: () =>
-            postDispatch({
+            composeDispatch({
               type: 'attachmentUploadProgress',
               payload: undefined
             })
@@ -83,8 +83,8 @@ const uploadAttachment = async ({
 const addAttachments = async ({
   ...params
 }: {
-  postState: PostState
+  composeState: ComposeState
-  postDispatch: Dispatch<PostAction>
+  composeDispatch: Dispatch<PostAction>
 }): Promise<any> => {
   ActionSheetIOS.showActionSheetWithOptions(
     {

src/screens/Shared/Compose/formatText.tsx

@@ -4,11 +4,11 @@ import { Text } from 'react-native'
 import { RefetchOptions } from 'react-query/types/core/query'
 import Autolinker from 'src/modules/autolinker'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-import { PostAction, PostState } from '../Compose'
+import { PostAction, ComposeState } from '../Compose'
 
 export interface Params {
   origin: 'text' | 'spoiler'
-  postDispatch: Dispatch<PostAction>
+  composeDispatch: Dispatch<PostAction>
   content: string
   refetch?: (options?: RefetchOptions | undefined) => Promise<any>
   disableDebounce?: boolean
@@ -25,8 +25,8 @@ const TagText = ({ text }: { text: string }) => {
 }
 
 const debouncedSuggestions = debounce(
-  (postDispatch, tag) => {
+  (composeDispatch, tag) => {
-    postDispatch({ type: 'tag', payload: tag })
+    composeDispatch({ type: 'tag', payload: tag })
   },
   500,
   {
@@ -34,15 +34,15 @@ const debouncedSuggestions = debounce(
   }
 )
 
-let prevTags: PostState['tag'][] = []
+let prevTags: ComposeState['tag'][] = []
 
 const formatText = ({
   origin,
-  postDispatch,
+  composeDispatch,
   content,
   disableDebounce = false
 }: Params) => {
-  const tags: PostState['tag'][] = []
+  const tags: ComposeState['tag'][] = []
   Autolinker.link(content, {
     email: false,
     phone: false,
@@ -74,11 +74,11 @@ const formatText = ({
   const changedTag = differenceWith(tags, prevTags, isEqual)
   if (changedTag.length && !disableDebounce) {
     if (changedTag[0]!.type !== 'url') {
-      debouncedSuggestions(postDispatch, changedTag[0])
+      debouncedSuggestions(composeDispatch, changedTag[0])
     }
   } else {
     debouncedSuggestions.cancel()
-    postDispatch({ type: 'tag', payload: undefined })
+    composeDispatch({ type: 'tag', payload: undefined })
   }
   prevTags = tags
   let _content = content
@@ -107,7 +107,7 @@ const formatText = ({
   children.push(_content)
   contentLength = contentLength + _content.length
 
-  postDispatch({
+  composeDispatch({
     type: origin,
     payload: {
       count: contentLength,

src/screens/Shared/Compose/updateText.ts

@@ -1,27 +1,27 @@
 import { Dispatch } from 'react'
-import { PostAction, PostState } from '../Compose'
+import { PostAction, ComposeState } from '../Compose'
 import formatText from './formatText'
 
 const updateText = ({
   origin,
-  postState,
+  composeState,
-  postDispatch,
+  composeDispatch,
   newText,
   type
 }: {
   origin: 'text' | 'spoiler'
-  postState: PostState
+  composeState: ComposeState
-  postDispatch: Dispatch<PostAction>
+  composeDispatch: Dispatch<PostAction>
   newText: string
   type: 'emoji' | 'suggestion'
 }) => {
-  if (postState[origin].raw.length) {
+  if (composeState[origin].raw.length) {
-    const contentFront = postState[origin].raw.slice(
+    const contentFront = composeState[origin].raw.slice(
       0,
-      postState[origin].selection.start
+      composeState[origin].selection.start
     )
-    const contentRear = postState[origin].raw.slice(
+    const contentRear = composeState[origin].raw.slice(
-      postState[origin].selection.end
+      composeState[origin].selection.end
     )
 
     const whiteSpaceFront = /\s/g.test(contentFront.slice(-1))
@@ -33,14 +33,14 @@ const updateText = ({
 
     formatText({
       origin,
-      postDispatch,
+      composeDispatch,
       content: [contentFront, newTextWithSpace, contentRear].join(''),
       disableDebounce: true
     })
   } else {
     formatText({
       origin,
-      postDispatch,
+      composeDispatch,
       content: `${newText} `,
       disableDebounce: true
     })

src/utils/getCurrentTab.ts

@@ -1,8 +1,7 @@
 const getCurrentTab = (navigation: any) => {
-  const {
+  const { length, [length - 1]: last } =
-    length,
+    navigation.dangerouslyGetState().history ||
-    [length - 1]: last
+    navigation.dangerouslyGetParent()?.dangerouslyGetState().history
-  } = navigation.dangerouslyGetState().history
   return `Screen-${last.key.split(new RegExp(/Screen-(.*?)-/))[1]}`
 }