Allow custom exit

src/screens/Compose/EditAttachment.tsx

@@ -1,7 +1,7 @@
 import { HeaderLeft } from '@components/Header'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { ScreenComposeStackScreenProps } from '@utils/navigation/navigators'
-import React, { useCallback } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { KeyboardAvoidingView, Platform } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'

src/screens/Compose/Root.tsx

@@ -1,9 +1,7 @@
 import ComponentSeparator from '@components/Separator'
-import { useEmojisQuery } from '@utils/queryHooks/emojis'
 import { useSearchQuery } from '@utils/queryHooks/search'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { chunk, forEach, groupBy, sortBy } from 'lodash'
 import React, { useContext, useEffect, useMemo, useRef } from 'react'
 import { AccessibilityInfo, findNodeHandle, FlatList, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
@@ -14,19 +12,13 @@ import ComposeRootHeader from './Root/Header'
 import ComposeRootSuggestion from './Root/Suggestion'
 import ComposeContext from './utils/createContext'
 import ComposeDrafts from './Root/Drafts'
-import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { useSelector } from 'react-redux'
-import {
-  getInstanceConfigurationStatusCharsURL,
-  getInstanceFrequentEmojis
-} from '@utils/slices/instancesSlice'
-import { useTranslation } from 'react-i18next'
+import { getInstanceConfigurationStatusCharsURL } from '@utils/slices/instancesSlice'
 
 export let instanceConfigurationStatusCharsURL = 23
 
 const ComposeRoot = React.memo(
   () => {
-    const { reduceMotionEnabled } = useAccessibility()
     const { colors } = useTheme()
 
     instanceConfigurationStatusCharsURL = useSelector(
@@ -42,7 +34,7 @@ const ComposeRoot = React.memo(
       tagDrafts && AccessibilityInfo.setAccessibilityFocus(tagDrafts)
     }, [accessibleRefDrafts.current])
 
-    const { composeState, composeDispatch } = useContext(ComposeContext)
+    const { composeState } = useContext(ComposeContext)
 
     const mapSchemaToType = () => {
       if (composeState.tag) {
@@ -71,30 +63,6 @@ const ComposeRoot = React.memo(
       }
     }, [composeState.tag])
 
-    const { t } = useTranslation()
-    const { data: emojisData } = useEmojisQuery({})
-    const frequentEmojis = useSelector(getInstanceFrequentEmojis, () => true)
-    useEffect(() => {
-      if (emojisData && emojisData.length) {
-        const sortedEmojis: {
-          title: string
-          data: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>[][]
-        }[] = []
-        forEach(groupBy(sortBy(emojisData, ['category', 'shortcode']), 'category'), (value, key) =>
-          sortedEmojis.push({ title: key, data: chunk(value, 5) })
-        )
-        if (frequentEmojis.length) {
-          sortedEmojis.unshift({
-            title: t('componentEmojis:frequentUsed'),
-            data: chunk(
-              frequentEmojis.map(e => e.emoji),
-              5
-            )
-          })
-        }
-      }
-    }, [emojisData, reduceMotionEnabled])
-
     const listEmpty = useMemo(() => {
       if (isFetching) {
         return (

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

@@ -21,6 +21,7 @@ const ComposeSpoilerInput: React.FC = () => {
 
   return (
     <TextInput
+      ref={composeState.textInputFocus.refs.spoiler}
       keyboardAppearance={mode}
       style={{
         ...StyleConstants.FontStyle.M,

src/screens/Compose/utils/initialState.ts

@@ -39,7 +39,7 @@ const composeInitialState: Omit<ComposeState, 'timestamp'> = {
   replyToStatus: undefined,
   textInputFocus: {
     current: 'text',
-    refs: { text: createRef() },
+    refs: { text: createRef(), spoiler: createRef() },
     isFocused: { text: createRef(), spoiler: createRef() }
   }
 }

src/screens/Compose/utils/types.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from 'react';
 import { Asset } from 'react-native-image-picker'
 
 export type ExtendedAttachment = {
@@ -39,10 +40,6 @@ export type ComposeState = {
     index: number
     lastIndex: number
     raw: string
-    // type: 'url' | 'accounts' | 'hashtags'
-    // text: string
-    // offset: number
-    // length: number
   }
   poll: {
     active: boolean
@@ -62,7 +59,7 @@ export type ComposeState = {
   replyToStatus?: Mastodon.Status
   textInputFocus: {
     current: 'text' | 'spoiler'
-    refs: { text: RefObject<TextInput> }
+    refs: { text: RefObject<TextInput>, spoiler: RefObject<TextInput> }
     isFocused: { text: MutableRefObject<boolean>, spoiler: MutableRefObject<boolean> }
   }
 }