Use context to provide compose state and dispatch

App.tsx

@@ -16,14 +16,14 @@ setConsole({
   error: console.warn
 })
 
-if (__DEV__) {
+// if (__DEV__) {
-  const whyDidYouRender = require('@welldone-software/why-did-you-render')
+//   const whyDidYouRender = require('@welldone-software/why-did-you-render')
-  whyDidYouRender(React, {
+//   whyDidYouRender(React, {
-    trackAllPureComponents: true,
+//     trackAllPureComponents: true,
-    trackHooks: true,
+//     trackHooks: true,
-    hotReloadBufferMs: 1000
+//     hotReloadBufferMs: 1000
-  })
+//   })
-}
+// }
 
 const App: React.FC = () => {
   return (

src/screens/Shared/Compose.tsx

@@ -1,11 +1,22 @@
-import React, { ReactNode, useEffect, useReducer, useState } from 'react'
+import React, {
+  createContext,
+  createRef,
+  Dispatch,
+  ReactNode,
+  RefObject,
+  useEffect,
+  useReducer,
+  useRef,
+  useState
+} from 'react'
 import {
   ActivityIndicator,
   Alert,
   Keyboard,
   KeyboardAvoidingView,
   StyleSheet,
-  Text
+  Text,
+  TextInput
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
@@ -67,10 +78,17 @@ export type ComposeState = {
       | '604800'
       | string
   }
-  attachments: { sensitive: boolean; uploads: Mastodon.Attachment[] }
+  attachments: {
+    sensitive: boolean
+    uploads: (Mastodon.Attachment & { local_url?: string })[]
+  }
   attachmentUploadProgress?: { progress: number; aspect?: number }
   visibility: 'public' | 'unlisted' | 'private' | 'direct'
   replyToStatus?: Mastodon.Status
+  textInputFocus: {
+    current: 'text' | 'spoiler'
+    refs: { text: RefObject<TextInput>; spoiler: RefObject<TextInput> }
+  }
 }
 
 export type PostAction =
@@ -110,6 +128,10 @@ export type PostAction =
       type: 'visibility'
       payload: ComposeState['visibility']
     }
+  | {
+      type: 'textInputFocus'
+      payload: Partial<ComposeState['textInputFocus']>
+    }
 
 const composeInitialState: ComposeState = {
   spoiler: {
@@ -145,7 +167,11 @@ const composeInitialState: ComposeState = {
     getLocalAccountPreferences(store.getState())[
       'posting:default:visibility'
     ] || 'public',
-  replyToStatus: undefined
+  replyToStatus: undefined,
+  textInputFocus: {
+    current: 'text',
+    refs: { text: createRef(), spoiler: createRef() }
+  }
 }
 const composeExistingState = ({
   type,
@@ -244,11 +270,22 @@ const postReducer = (state: ComposeState, action: PostAction): ComposeState => {
       }
     case 'visibility':
       return { ...state, visibility: action.payload }
+    case 'textInputFocus':
+      return {
+        ...state,
+        textInputFocus: { ...state.textInputFocus, ...action.payload }
+      }
     default:
       throw new Error('Unexpected action')
   }
 }
 
+type ContextType = {
+  composeState: ComposeState
+  composeDispatch: Dispatch<PostAction>
+}
+export const ComposeContext = createContext<ContextType>({} as ContextType)
+
 export interface Props {
   route: {
     params:
@@ -298,14 +335,14 @@ const Compose: React.FC<Props> = ({ route: { params } }) => {
       case 'edit':
         if (params.incomingStatus.spoiler_text) {
           formatText({
-            origin: 'spoiler',
+            textInput: 'spoiler',
             composeDispatch,
             content: params.incomingStatus.spoiler_text,
             disableDebounce: true
           })
         }
         formatText({
-          origin: 'text',
+          textInput: 'text',
           composeDispatch,
           content: params.incomingStatus.text!,
           disableDebounce: true
@@ -313,7 +350,7 @@ const Compose: React.FC<Props> = ({ route: { params } }) => {
         break
       case 'reply':
         formatText({
-          origin: 'text',
+          textInput: 'text',
           composeDispatch,
           content: `@${
             params.incomingStatus.reblog
@@ -429,6 +466,8 @@ const Compose: React.FC<Props> = ({ route: { params } }) => {
   const totalTextCount =
     (composeState.spoiler.active ? composeState.spoiler.count : 0) +
     composeState.text.count
+  // doesn't work
+  const rawCount = composeState.text.raw.length
 
   return (
     <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
@@ -475,18 +514,17 @@ const Compose: React.FC<Props> = ({ route: { params } }) => {
                   <HeaderRight
                     onPress={async () => tootPost()}
                     text='发嘟嘟'
-                    disabled={
+                    disabled={rawCount < 1 || totalTextCount > 500}
-                      composeState.text.raw.length < 1 || totalTextCount > 500
-                    }
                   />
                 )
             }}
           >
             {() => (
-              <ComposeRoot
+              <ComposeContext.Provider
-                composeState={composeState}
+                value={{ composeState, composeDispatch }}
-                composeDispatch={composeDispatch}
+              >
-              />
+                <ComposeRoot />
+              </ComposeContext.Provider>
             )}
           </Stack.Screen>
         </Stack.Navigator>
@@ -502,4 +540,4 @@ const styles = StyleSheet.create({
   }
 })
 
-export default React.memo(Compose, () => true)
+export default Compose

src/screens/Shared/Compose/Actions.tsx

@@ -1,22 +1,13 @@
 import { Feather } from '@expo/vector-icons'
-import React, { Dispatch, useCallback, useMemo } from 'react'
+import React, { useCallback, useContext, useMemo } from 'react'
-import { ActionSheetIOS, StyleSheet, TextInput, View } from 'react-native'
+import { ActionSheetIOS, StyleSheet, View } from 'react-native'
 import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-import { PostAction, ComposeState } from '../Compose'
+import { ComposeContext } from '../Compose'
 import addAttachments from './addAttachments'
 
-export interface Props {
+const ComposeActions: React.FC = () => {
-  textInputRef: React.RefObject<TextInput>
+  const { composeState, composeDispatch } = useContext(ComposeContext)
-  composeState: ComposeState
-  composeDispatch: Dispatch<PostAction>
-}
-
-const ComposeActions: React.FC<Props> = ({
-  textInputRef,
-  composeState,
-  composeDispatch
-}) => {
   const { theme } = useTheme()
 
   const attachmentColor = useMemo(() => {
@@ -71,7 +62,7 @@ const ComposeActions: React.FC<Props> = ({
       })
     }
     if (composeState.poll.active) {
-      textInputRef.current?.focus()
+      composeState.textInputFocus.refs.text.current?.focus()
     }
   }, [
     composeState.poll.active,

src/screens/Shared/Compose/Attachments.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, useCallback } from 'react'
+import React, { useCallback, useContext } from 'react'
 import {
   FlatList,
   Image,
@@ -8,7 +8,7 @@ import {
   View
 } from 'react-native'
 
-import { PostAction, ComposeState } from '../Compose'
+import { ComposeContext } from '../Compose'
 import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import { useNavigation } from '@react-navigation/native'
@@ -19,12 +19,8 @@ import { Feather } from '@expo/vector-icons'
 
 const DEFAULT_HEIGHT = 200
 
-export interface Props {
+const ComposeAttachments: React.FC = () => {
-  composeState: ComposeState
+  const { composeState, composeDispatch } = useContext(ComposeContext)
-  composeDispatch: Dispatch<PostAction>
-}
-
-const ComposeAttachments: React.FC<Props> = ({ composeState, composeDispatch }) => {
   const { theme } = useTheme()
   const navigation = useNavigation()
 
@@ -106,7 +102,8 @@ const ComposeAttachments: React.FC<Props> = ({ composeState, composeDispatch })
         style={styles.progressContainer}
         visible={composeState.attachmentUploadProgress === undefined}
         width={
-          (composeState.attachmentUploadProgress?.aspect || 3 / 2) * DEFAULT_HEIGHT
+          (composeState.attachmentUploadProgress?.aspect || 3 / 2) *
+          DEFAULT_HEIGHT
         }
         height={200}
       >

src/screens/Shared/Compose/EditAttachment.tsx

@@ -349,4 +349,4 @@ const styles = StyleSheet.create({
   }
 })
 
-export default React.memo(ComposeEditAttachment, () => true)
+export default ComposeEditAttachment

src/screens/Shared/Compose/Emojis.tsx

@@ -1,34 +1,22 @@
-import React, { Dispatch, useCallback, useMemo } from 'react'
+import React, { useCallback, useContext, useMemo } from 'react'
 import {
   Image,
   Pressable,
   SectionList,
   StyleSheet,
   Text,
-  TextInput,
   View
 } from 'react-native'
 import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 
-import { PostAction, ComposeState } from '../Compose'
+import { ComposeContext } from '../Compose'
 import updateText from './updateText'
 
-export interface Props {
+const SingleEmoji = ({ emoji }: { emoji: Mastodon.Emoji }) => {
-  textInputRef: React.RefObject<TextInput>
+  const { composeState, composeDispatch } = useContext(ComposeContext)
-  composeState: ComposeState
-  composeDispatch: Dispatch<PostAction>
-}
-
-const SingleEmoji = ({
-  emoji,
-  textInputRef,
-  composeState,
-  composeDispatch
-}: { emoji: Mastodon.Emoji } & Props) => {
   const onPress = useCallback(() => {
     updateText({
-      origin: textInputRef.current?.isFocused() ? 'text' : 'spoiler',
       composeState,
       composeDispatch,
       newText: `:${emoji.shortcode}:`,
@@ -48,7 +36,8 @@ const SingleEmoji = ({
   )
 }
 
-const ComposeEmojis: React.FC<Props> = ({ ...props }) => {
+const ComposeEmojis: React.FC = () => {
+  const { composeState } = useContext(ComposeContext)
   const { theme } = useTheme()
 
   const listHeader = useCallback(
@@ -61,7 +50,7 @@ const ComposeEmojis: React.FC<Props> = ({ ...props }) => {
   const emojiList = useCallback(
     section =>
       section.data.map((emoji: Mastodon.Emoji) => (
-        <SingleEmoji key={emoji.shortcode} emoji={emoji} {...props} />
+        <SingleEmoji key={emoji.shortcode} emoji={emoji} />
       )),
     []
   )
@@ -80,7 +69,7 @@ const ComposeEmojis: React.FC<Props> = ({ ...props }) => {
       <SectionList
         horizontal
         keyboardShouldPersistTaps='handled'
-        sections={props.composeState.emoji.emojis!}
+        sections={composeState.emoji.emojis!}
         keyExtractor={item => item.shortcode}
         renderSectionHeader={listHeader}
         renderItem={listItem}
@@ -116,4 +105,4 @@ const styles = StyleSheet.create({
   }
 })
 
-export default ComposeEmojis
+export default React.memo(ComposeEmojis, () => true)

src/screens/Shared/Compose/Poll.tsx

@@ -1,22 +1,20 @@
-import React, { Dispatch, useCallback, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { ActionSheetIOS, StyleSheet, TextInput, View } from 'react-native'
 import { Feather } from '@expo/vector-icons'
 
-import { PostAction, ComposeState } from '../Compose'
+import { ComposeContext } 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 {
+const ComposePoll: React.FC = () => {
-  poll: ComposeState['poll']
+  const {
-  composeDispatch: Dispatch<PostAction>
+    composeState: {
-}
+      poll: { total, options, multiple, expire }
-
+    },
-const ComposePoll: React.FC<Props> = ({
+    composeDispatch
-  poll: { total, options, multiple, expire },
+  } = useContext(ComposeContext)
-  composeDispatch
-}) => {
   const { theme } = useTheme()
 
   const expireMapping: { [key: string]: string } = {
@@ -34,24 +32,6 @@ const ComposePoll: React.FC<Props> = ({
     setFirstRender(false)
   }, [])
 
-  const minusOnPress = useCallback(
-    () =>
-      total > 2 &&
-      composeDispatch({
-        type: 'poll',
-        payload: { total: total - 1 }
-      }),
-    [total]
-  )
-  console.log('total: ', total)
-  const plusOnPress = useCallback(() => {
-    total < 4 &&
-      composeDispatch({
-        type: 'poll',
-        payload: { total: total + 1 }
-      })
-  }, [total])
-
   return (
     <View style={[styles.base, { borderColor: theme.border }]}>
       <View style={styles.options}>
@@ -101,14 +81,28 @@ const ComposePoll: React.FC<Props> = ({
       <View style={styles.controlAmount}>
         <View style={styles.firstButton}>
           <ButtonRow
-            onPress={minusOnPress}
+            key={total + 'minus'}
+            onPress={() => {
+              total > 2 &&
+                composeDispatch({
+                  type: 'poll',
+                  payload: { total: total - 1 }
+                })
+            }}
             icon='minus'
             disabled={!(total > 2)}
             buttonSize='S'
           />
         </View>
         <ButtonRow
-          onPress={plusOnPress}
+          key={total + 'plus'}
+          onPress={() => {
+            total < 4 &&
+              composeDispatch({
+                type: 'poll',
+                payload: { total: total + 1 }
+              })
+          }}
           icon='plus'
           disabled={!(total < 4)}
           buttonSize='S'

src/screens/Shared/Compose/Reply.tsx

@@ -1,6 +1,5 @@
-import React, { Dispatch, RefObject } from 'react'
+import React, { useContext } from 'react'
-import { StyleSheet, Text, TextInput, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
-import { StyleConstants } from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 
 import TimelineAttachment from 'src/components/Timelines/Timeline/Shared/Attachment'
@@ -8,26 +7,26 @@ import TimelineAvatar from 'src/components/Timelines/Timeline/Shared/Avatar'
 import TimelineCard from 'src/components/Timelines/Timeline/Shared/Card'
 import TimelineContent from 'src/components/Timelines/Timeline/Shared/Content'
 import TimelineHeaderDefault from 'src/components/Timelines/Timeline/Shared/HeaderDefault'
+import { ComposeContext } from '../Compose'
 
-export interface Props {
+const ComposeReply: React.FC = () => {
-  replyToStatus: Mastodon.Status
+  const {
-}
+    composeState: { replyToStatus }
-
+  } = useContext(ComposeContext)
-const ComposeReply: React.FC<Props> = ({ replyToStatus }) => {
   const { theme } = useTheme()
 
   return (
     <View style={styles.status}>
-      <TimelineAvatar account={replyToStatus.account} />
+      <TimelineAvatar account={replyToStatus!.account} />
       <View style={styles.details}>
-        <TimelineHeaderDefault status={replyToStatus} />
+        <TimelineHeaderDefault status={replyToStatus!} />
-        {replyToStatus.content.length > 0 && (
+        {replyToStatus!.content.length > 0 && (
-          <TimelineContent status={replyToStatus} />
+          <TimelineContent status={replyToStatus!} />
         )}
-        {replyToStatus.media_attachments.length > 0 && (
+        {replyToStatus!.media_attachments.length > 0 && (
-          <TimelineAttachment status={replyToStatus} width={200} />
+          <TimelineAttachment status={replyToStatus!} width={200} />
         )}
-        {replyToStatus.card && <TimelineCard card={replyToStatus.card} />}
+        {replyToStatus!.card && <TimelineCard card={replyToStatus!.card} />}
       </View>
     </View>
   )

src/screens/Shared/Compose/Root.tsx

@@ -3,6 +3,7 @@ import React, {
   Dispatch,
   RefObject,
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useRef
@@ -24,21 +25,12 @@ 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, ComposeState } from '../Compose'
+import { PostAction, ComposeState, ComposeContext } from '../Compose'
 import ComposeActions from './Actions'
-import ComposeAttachments from './Attachments'
-import ComposeEmojis from './Emojis'
-import ComposePoll from './Poll'
-import ComposeReply from './Reply'
-import ComposeSpoilerInput from './SpoilerInput'
-import ComposeTextInput from './TextInput'
 import updateText from './updateText'
 import * as Permissions from 'expo-permissions'
-
+import ComposeRootFooter from './Root/Footer'
-export interface Props {
+import ComposeRootHeader from './Root/Header'
-  composeState: ComposeState
-  composeDispatch: Dispatch<PostAction>
-}
 
 const ListItem = React.memo(
   ({
@@ -58,7 +50,6 @@ const ListItem = React.memo(
         ? 'text'
         : 'spoiler'
       updateText({
-        origin: focusedInput,
         composeState: {
           ...composeState,
           [focusedInput]: {
@@ -117,7 +108,9 @@ const ListItem = React.memo(
   () => true
 )
 
-const ComposeRoot: React.FC<Props> = ({ composeState, composeDispatch }) => {
+const ComposeRoot: React.FC = () => {
+  const { composeState, composeDispatch } = useContext(ComposeContext)
+
   const { isFetching, isSuccess, data, refetch } = useQuery(
     [
       'Search',
@@ -172,112 +165,6 @@ const ComposeRoot: React.FC<Props> = ({ composeState, composeDispatch }) => {
     }
   }, [isFetching])
 
-  const listHeader = useMemo(() => {
-    return (
-      <>
-        {composeState.spoiler.active ? (
-          <ComposeSpoilerInput
-            composeState={composeState}
-            composeDispatch={composeDispatch}
-          />
-        ) : null}
-        <ComposeTextInput
-          composeState={composeState}
-          composeDispatch={composeDispatch}
-          textInputRef={textInputRef}
-        />
-      </>
-    )
-  }, [composeState.spoiler.active, composeState.text.formatted])
-
-  const listFooterEmojis = useMemo(
-    () =>
-      composeState.emoji.active && (
-        <View style={styles.emojis}>
-          <ComposeEmojis
-            textInputRef={textInputRef}
-            composeState={composeState}
-            composeDispatch={composeDispatch}
-          />
-        </View>
-      ),
-    [composeState.emoji.active]
-  )
-  const listFooterAttachments = useMemo(
-    () =>
-      (composeState.attachments.uploads.length > 0 ||
-        composeState.attachmentUploadProgress) && (
-        <View style={styles.attachments}>
-          <ComposeAttachments
-            composeState={composeState}
-            composeDispatch={composeDispatch}
-          />
-        </View>
-      ),
-    [composeState.attachments.uploads, composeState.attachmentUploadProgress]
-  )
-  // const listFooterPoll = useMemo(
-  //   () =>
-  //     composeState.poll.active && (
-  //       <View style={styles.poll}>
-  //         <ComposePoll
-  //           poll={composeState.poll}
-  //           composeDispatch={composeDispatch}
-  //         />
-  //       </View>
-  //     ),
-  //   [
-  //     composeState.poll.active,
-  //     composeState.poll.total,
-  //     composeState.poll.options['0'],
-  //     composeState.poll.options['1'],
-  //     composeState.poll.options['2'],
-  //     composeState.poll.options['3'],
-  //     composeState.poll.multiple,
-  //     composeState.poll.expire
-  //   ]
-  // )
-  const listFooterPoll = () =>
-    composeState.poll.active && (
-      <View style={styles.poll}>
-        <ComposePoll
-          poll={composeState.poll}
-          composeDispatch={composeDispatch}
-        />
-      </View>
-    )
-  const listFooterReply = useMemo(
-    () =>
-      composeState.replyToStatus && (
-        <View style={styles.replyTo}>
-          <ComposeReply replyToStatus={composeState.replyToStatus} />
-        </View>
-      ),
-    []
-  )
-  const listFooter = useMemo(() => {
-    return (
-      <>
-        {listFooterEmojis}
-        {listFooterAttachments}
-        {listFooterPoll()}
-        {listFooterReply}
-      </>
-    )
-  }, [
-    composeState.emoji.active,
-    composeState.attachments.uploads,
-    composeState.attachmentUploadProgress,
-    composeState.poll.active,
-    composeState.poll.total,
-    composeState.poll.options['0'],
-    composeState.poll.options['1'],
-    composeState.poll.options['2'],
-    composeState.poll.options['3'],
-    composeState.poll.multiple,
-    composeState.poll.expire
-  ])
-
   const listKey = useCallback(
     (item: Mastodon.Account | Mastodon.Tag) => item.url,
     [isSuccess]
@@ -302,18 +189,14 @@ const ComposeRoot: React.FC<Props> = ({ composeState, composeDispatch }) => {
       />
       <FlatList
         keyboardShouldPersistTaps='handled'
-        ListHeaderComponent={listHeader}
+        ListHeaderComponent={<ComposeRootHeader textInputRef={textInputRef} />}
-        ListFooterComponent={listFooter}
+        ListFooterComponent={<ComposeRootFooter textInputRef={textInputRef} />}
         ListEmptyComponent={listEmpty}
         data={data}
         keyExtractor={listKey}
         renderItem={listItem}
       />
-      <ComposeActions
+      <ComposeActions />
-        textInputRef={textInputRef}
-        composeState={composeState}
-        composeDispatch={composeDispatch}
-      />
     </View>
   )
 }
@@ -323,18 +206,6 @@ const styles = StyleSheet.create({
     flex: 1
   },
   contentView: { flex: 1 },
-
-  attachments: {
-    flex: 1
-  },
-  poll: {
-    flex: 1,
-    padding: StyleConstants.Spacing.Global.PagePadding
-  },
-  replyTo: {
-    flex: 1,
-    padding: StyleConstants.Spacing.Global.PagePadding
-  },
   suggestion: {
     flex: 1
   },
@@ -374,9 +245,6 @@ const styles = StyleSheet.create({
     fontSize: StyleConstants.Font.Size.S,
     fontWeight: StyleConstants.Font.Weight.Bold,
     marginBottom: StyleConstants.Spacing.XS
-  },
-  emojis: {
-    flex: 1
   }
 })
 

src/screens/Shared/Compose/Root/Footer.tsx

@@ -0,0 +1,64 @@
+import React, { useContext } from 'react'
+import { StyleSheet, TextInput, View } from 'react-native'
+import { StyleConstants } from 'src/utils/styles/constants'
+import { ComposeContext } from '../../Compose'
+import ComposeAttachments from '../Attachments'
+import ComposeEmojis from '../Emojis'
+import ComposePoll from '../Poll'
+import ComposeReply from '../Reply'
+
+export interface Props {
+  textInputRef: React.RefObject<TextInput>
+}
+
+const ComposeRootFooter: React.FC<Props> = ({ textInputRef }) => {
+  const { composeState, composeDispatch } = useContext(ComposeContext)
+
+  return (
+    <>
+      {composeState.emoji.active && (
+        <View style={styles.emojis}>
+          <ComposeEmojis textInputRef={textInputRef} />
+        </View>
+      )}
+
+      {(composeState.attachments.uploads.length > 0 ||
+        composeState.attachmentUploadProgress) && (
+        <View style={styles.attachments}>
+          <ComposeAttachments />
+        </View>
+      )}
+
+      {composeState.poll.active && (
+        <View style={styles.poll} key='poll'>
+          <ComposePoll />
+        </View>
+      )}
+
+      {composeState.replyToStatus && (
+        <View style={styles.reply}>
+          <ComposeReply />
+        </View>
+      )}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  emojis: {
+    flex: 1
+  },
+  attachments: {
+    flex: 1
+  },
+  poll: {
+    flex: 1,
+    padding: StyleConstants.Spacing.Global.PagePadding
+  },
+  reply: {
+    flex: 1,
+    padding: StyleConstants.Spacing.Global.PagePadding
+  }
+})
+
+export default ComposeRootFooter

src/screens/Shared/Compose/Root/Header.tsx

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react'
+import { ComposeContext } from '../../Compose'
+import ComposeSpoilerInput from '../SpoilerInput'
+import ComposeTextInput from '../TextInput'
+
+const ComposeRootHeader: React.FC = () => {
+  const { composeState } = useContext(ComposeContext)
+
+  return (
+    <>
+      {composeState.spoiler.active ? <ComposeSpoilerInput /> : null}
+      <ComposeTextInput />
+    </>
+  )
+}
+
+export default ComposeRootHeader

src/screens/Shared/Compose/SpoilerInput.tsx

@@ -1,19 +1,12 @@
-import React, { Dispatch } from 'react'
+import React, { useContext } 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, ComposeState } from '../Compose'
+import { ComposeContext } from '../Compose'
 import formatText from './formatText'
 
-export interface Props {
+const ComposeSpoilerInput: React.FC = () => {
-  composeState: ComposeState
+  const { composeState, composeDispatch } = useContext(ComposeContext)
-  composeDispatch: Dispatch<PostAction>
-}
-
-const ComposeSpoilerInput: React.FC<Props> = ({
-  composeState,
-  composeDispatch,
-}) => {
   const { theme } = useTheme()
 
   return (
@@ -34,7 +27,7 @@ const ComposeSpoilerInput: React.FC<Props> = ({
       placeholderTextColor={theme.secondary}
       onChangeText={content =>
         formatText({
-          origin: 'spoiler',
+          textInput: 'spoiler',
           composeDispatch,
           content
         })
@@ -49,7 +42,7 @@ const ComposeSpoilerInput: React.FC<Props> = ({
           payload: { selection: { start, end } }
         })
       }}
-      // ref={textInputRef}
+      ref={composeState.textInputFocus.refs.spoiler}
       scrollEnabled
     >
       <Text>{composeState.spoiler.formatted}</Text>
@@ -68,8 +61,4 @@ const styles = StyleSheet.create({
   }
 })
 
-export default React.memo(
+export default ComposeSpoilerInput
-  ComposeSpoilerInput,
-  (prev, next) =>
-    prev.composeState.spoiler.formatted === next.composeState.spoiler.formatted
-)

src/screens/Shared/Compose/TextInput.tsx

@@ -1,21 +1,12 @@
-import React, { Dispatch, RefObject } from 'react'
+import React, { useContext } 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, ComposeState } from '../Compose'
+import { ComposeContext } from '../Compose'
 import formatText from './formatText'
 
-export interface Props {
+const ComposeTextInput: React.FC = () => {
-  composeState: ComposeState
+  const { composeState, composeDispatch } = useContext(ComposeContext)
-  composeDispatch: Dispatch<PostAction>
-  textInputRef: RefObject<TextInput>
-}
-
-const ComposeTextInput: React.FC<Props> = ({
-  composeState,
-  composeDispatch,
-  textInputRef
-}) => {
   const { theme } = useTheme()
 
   return (
@@ -36,11 +27,17 @@ const ComposeTextInput: React.FC<Props> = ({
       placeholderTextColor={theme.secondary}
       onChangeText={content =>
         formatText({
-          origin: 'text',
+          textInput: 'text',
           composeDispatch,
           content
         })
       }
+      onFocus={() =>
+        composeDispatch({
+          type: 'textInputFocus',
+          payload: { current: 'text' }
+        })
+      }
       onSelectionChange={({
         nativeEvent: {
           selection: { start, end }
@@ -51,7 +48,7 @@ const ComposeTextInput: React.FC<Props> = ({
           payload: { selection: { start, end } }
         })
       }}
-      ref={textInputRef}
+      ref={composeState.textInputFocus.refs.text}
       scrollEnabled
     >
       <Text>{composeState.text.formatted}</Text>
@@ -70,9 +67,4 @@ const styles = StyleSheet.create({
   }
 })
 
-export default React.memo(
+export default ComposeTextInput
-  ComposeTextInput,
-  (prev, next) =>
-    prev.composeState.text.raw === next.composeState.text.raw &&
-    prev.composeState.text.formatted === next.composeState.text.formatted
-)

src/screens/Shared/Compose/formatText.tsx

@@ -7,7 +7,7 @@ import { useTheme } from 'src/utils/styles/ThemeManager'
 import { PostAction, ComposeState } from '../Compose'
 
 export interface Params {
-  origin: 'text' | 'spoiler'
+  textInput: ComposeState['textInputFocus']['current']
   composeDispatch: Dispatch<PostAction>
   content: string
   refetch?: (options?: RefetchOptions | undefined) => Promise<any>
@@ -33,7 +33,7 @@ const debouncedSuggestions = debounce(
 let prevTags: ComposeState['tag'][] = []
 
 const formatText = ({
-  origin,
+  textInput,
   composeDispatch,
   content,
   disableDebounce = false
@@ -108,7 +108,7 @@ const formatText = ({
   contentLength = contentLength + _content.length
 
   composeDispatch({
-    type: origin,
+    type: textInput,
     payload: {
       count: contentLength,
       raw: content,

src/screens/Shared/Compose/updateText.ts

@@ -3,25 +3,24 @@ import { PostAction, ComposeState } from '../Compose'
 import formatText from './formatText'
 
 const updateText = ({
-  origin,
   composeState,
   composeDispatch,
   newText,
   type
 }: {
-  origin: 'text' | 'spoiler'
   composeState: ComposeState
   composeDispatch: Dispatch<PostAction>
   newText: string
   type: 'emoji' | 'suggestion'
 }) => {
-  if (composeState[origin].raw.length) {
+  const textInput = composeState.textInputFocus.current
-    const contentFront = composeState[origin].raw.slice(
+  if (composeState[textInput].raw.length) {
+    const contentFront = composeState[textInput].raw.slice(
       0,
-      composeState[origin].selection.start
+      composeState[textInput].selection.start
     )
-    const contentRear = composeState[origin].raw.slice(
+    const contentRear = composeState[textInput].raw.slice(
-      composeState[origin].selection.end
+      composeState[textInput].selection.end
     )
 
     const whiteSpaceFront = /\s/g.test(contentFront.slice(-1))
@@ -32,14 +31,14 @@ const updateText = ({
     }${newText}${whiteSpaceRear ? '' : ' '}`
 
     formatText({
-      origin,
+      textInput,
       composeDispatch,
       content: [contentFront, newTextWithSpace, contentRear].join(''),
       disableDebounce: true
     })
   } else {
     formatText({
-      origin,
+      textInput,
       composeDispatch,
       content: `${newText} `,
       disableDebounce: true