iOS almost working

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

@@ -0,0 +1,35 @@
+import { getLocalAccount, getLocalUri } from '@utils/slices/instancesSlice'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text } from 'react-native'
+import { useSelector } from 'react-redux'
+
+const ComposePostingAs = React.memo(
+  () => {
+    const { t } = useTranslation('sharedCompose')
+    const { theme } = useTheme()
+
+    const localAccount = useSelector(getLocalAccount)
+    const localUri = useSelector(getLocalUri)
+
+    return (
+      <Text style={[styles.text, { color: theme.secondary }]}>
+        {t('content.root.header.postingAs', {
+          acct: localAccount?.acct,
+          domain: localUri
+        })}
+      </Text>
+    )
+  },
+  () => true
+)
+
+const styles = StyleSheet.create({
+  text: {
+    ...StyleConstants.FontStyle.S
+  }
+})
+
+export default ComposePostingAs

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

@@ -0,0 +1,72 @@
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React, { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text, TextInput } from 'react-native'
+import formatText from '../../formatText'
+import ComposeContext from '../../utils/createContext'
+
+const ComposeSpoilerInput: React.FC = () => {
+  const { composeState, composeDispatch } = useContext(ComposeContext)
+  const { t } = useTranslation('sharedCompose')
+  const { theme } = useTheme()
+
+  return (
+    <TextInput
+      style={[
+        styles.spoilerInput,
+        {
+          color: theme.primary,
+          borderBottomColor: theme.border
+        }
+      ]}
+      autoCapitalize='none'
+      autoCorrect={false}
+      autoFocus
+      enablesReturnKeyAutomatically
+      multiline
+      placeholder={t('content.root.header.spoilerInput.placeholder')}
+      placeholderTextColor={theme.secondary}
+      onChangeText={content =>
+        formatText({
+          textInput: 'spoiler',
+          composeDispatch,
+          content
+        })
+      }
+      onSelectionChange={({
+        nativeEvent: {
+          selection: { start, end }
+        }
+      }) => {
+        composeDispatch({
+          type: 'spoiler',
+          payload: { selection: { start, end } }
+        })
+      }}
+      ref={composeState.textInputFocus.refs.spoiler}
+      scrollEnabled
+      onFocus={() =>
+        composeDispatch({
+          type: 'textInputFocus',
+          payload: { current: 'spoiler' }
+        })
+      }
+    >
+      <Text>{composeState.spoiler.formatted}</Text>
+    </TextInput>
+  )
+}
+
+const styles = StyleSheet.create({
+  spoilerInput: {
+    ...StyleConstants.FontStyle.M,
+    marginTop: StyleConstants.Spacing.S,
+    paddingBottom: StyleConstants.Spacing.M,
+    marginLeft: StyleConstants.Spacing.Global.PagePadding,
+    marginRight: StyleConstants.Spacing.Global.PagePadding,
+    borderBottomWidth: 0.5
+  }
+})
+
+export default ComposeSpoilerInput

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

@@ -0,0 +1,71 @@
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React, { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text, TextInput } from 'react-native'
+import formatText from '../../formatText'
+import ComposeContext from '../../utils/createContext'
+
+const ComposeTextInput: React.FC = () => {
+  const { composeState, composeDispatch } = useContext(ComposeContext)
+  const { t } = useTranslation('sharedCompose')
+  const { theme } = useTheme()
+
+  return (
+    <TextInput
+      style={[
+        styles.textInput,
+        {
+          color: theme.primary,
+          borderBottomColor: theme.border
+        }
+      ]}
+      autoCapitalize='none'
+      autoCorrect={false}
+      autoFocus
+      enablesReturnKeyAutomatically
+      multiline
+      placeholder={t('content.root.header.textInput.placeholder')}
+      placeholderTextColor={theme.secondary}
+      onChangeText={content =>
+        formatText({
+          textInput: 'text',
+          composeDispatch,
+          content
+        })
+      }
+      onFocus={() =>
+        composeDispatch({
+          type: 'textInputFocus',
+          payload: { current: 'text' }
+        })
+      }
+      onSelectionChange={({
+        nativeEvent: {
+          selection: { start, end }
+        }
+      }) => {
+        composeDispatch({
+          type: 'text',
+          payload: { selection: { start, end } }
+        })
+      }}
+      ref={composeState.textInputFocus.refs.text}
+      scrollEnabled
+    >
+      <Text>{composeState.text.formatted}</Text>
+    </TextInput>
+  )
+}
+
+const styles = StyleSheet.create({
+  textInput: {
+    ...StyleConstants.FontStyle.M,
+    marginTop: StyleConstants.Spacing.S,
+    paddingBottom: StyleConstants.Spacing.M,
+    marginLeft: StyleConstants.Spacing.Global.PagePadding,
+    marginRight: StyleConstants.Spacing.Global.PagePadding
+  }
+})
+
+export default ComposeTextInput