Using new text component

Need to use global accessibility checks rather than per text component which is not efficient

src/screens/Compose/DraftsList/Root.tsx

@@ -1,6 +1,7 @@
 import apiInstance from '@api/instance'
 import Icon from '@components/Icon'
 import ComponentSeparator from '@components/Separator'
+import CustomText from '@components/Text'
 import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created'
 import { useNavigation } from '@react-navigation/native'
 import { useAppDispatch } from '@root/store'
@@ -18,8 +19,6 @@ import {
   Modal,
   Platform,
   Pressable,
-  StyleSheet,
-  Text,
   View
 } from 'react-native'
 import { PanGestureHandler } from 'react-native-gesture-handler'
@@ -54,10 +53,15 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
 
   const renderItem = useCallback(
     ({ item }: { item: ComposeStateDraft }) => {
+      console.log('timestamp', item.timestamp)
       return (
         <Pressable
           accessibilityHint={t('content.draftsList.content.accessibilityHint')}
-          style={[styles.draft, { backgroundColor: colors.backgroundDefault }]}
+          style={{
+            flex: 1,
+            padding: StyleConstants.Spacing.Global.PagePadding,
+            backgroundColor: colors.backgroundDefault
+          }}
           onPress={async () => {
             setCheckingAttachments(true)
             let tempDraft = item
@@ -103,23 +107,42 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
         >
           <View style={{ flex: 1 }}>
             <HeaderSharedCreated created_at={item.timestamp} />
-            <Text
+            <CustomText
+              fontStyle='M'
               numberOfLines={2}
-              style={[styles.text, { color: colors.primaryDefault }]}
+              style={{
+                marginTop: StyleConstants.Spacing.XS,
+                color: colors.primaryDefault
+              }}
             >
               {item.text ||
                 item.spoiler ||
                 t('content.draftsList.content.textEmpty')}
-            </Text>
+            </CustomText>
             {item.attachments?.uploads.length ? (
-              <View style={styles.attachments}>
+              <View
+                style={{
+                  flex: 1,
+                  flexDirection: 'row',
+                  marginTop: StyleConstants.Spacing.S
+                }}
+              >
                 {item.attachments.uploads.map((attachment, index) => (
                   <Image
                     key={index}
-                    style={[
-                      styles.attachment,
-                      { marginLeft: index !== 0 ? StyleConstants.Spacing.S : 0 }
-                    ]}
+                    style={{
+                      width:
+                        (Dimensions.get('screen').width -
+                          StyleConstants.Spacing.Global.PagePadding * 2 -
+                          StyleConstants.Spacing.S * 3) /
+                        4,
+                      height:
+                        (Dimensions.get('screen').width -
+                          StyleConstants.Spacing.Global.PagePadding * 2 -
+                          StyleConstants.Spacing.S * 3) /
+                        4,
+                      marginLeft: index !== 0 ? StyleConstants.Spacing.S : 0
+                    }}
                     source={{
                       uri:
                         attachment.local?.local_thumbnail ||
@@ -138,10 +161,21 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
   const renderHiddenItem = useCallback(
     ({ item }) => (
       <View
-        style={[styles.hiddenBase, { backgroundColor: colors.red }]}
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          justifyContent: 'flex-end',
+          backgroundColor: colors.red
+        }}
         children={
           <Pressable
-            style={styles.action}
+            style={{
+              flexBasis:
+                StyleConstants.Font.Size.L +
+                StyleConstants.Spacing.Global.PagePadding * 4,
+              justifyContent: 'center',
+              alignItems: 'center'
+            }}
             onPress={() => removeDraft(item.timestamp)}
             children={
               <Icon
@@ -183,17 +217,17 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
         visible={checkingAttachments}
         children={
           <View
-            style={[
-              styles.modal,
-              { backgroundColor: colors.backgroundOverlayInvert }
-            ]}
+            style={{
+              flex: 1,
+              justifyContent: 'center',
+              alignItems: 'center',
+              backgroundColor: colors.backgroundOverlayInvert
+            }}
             children={
-              <Text
-                children='检查附件在服务器的状态…'
-                style={{
-                  ...StyleConstants.FontStyle.M,
-                  color: colors.primaryOverlay
-                }}
+              <CustomText
+                fontStyle='M'
+                children={t('content.draftsList.checkAttachment')}
+                style={{ color: colors.primaryOverlay }}
               />
             }
           />
@@ -203,49 +237,4 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
   )
 }
 
-const styles = StyleSheet.create({
-  draft: {
-    flex: 1,
-    padding: StyleConstants.Spacing.Global.PagePadding
-  },
-  text: {
-    marginTop: StyleConstants.Spacing.XS,
-    ...StyleConstants.FontStyle.M
-  },
-  attachments: {
-    flex: 1,
-    flexDirection: 'row',
-    marginTop: StyleConstants.Spacing.S
-  },
-  attachment: {
-    width:
-      (Dimensions.get('screen').width -
-        StyleConstants.Spacing.Global.PagePadding * 2 -
-        StyleConstants.Spacing.S * 3) /
-      4,
-    height:
-      (Dimensions.get('screen').width -
-        StyleConstants.Spacing.Global.PagePadding * 2 -
-        StyleConstants.Spacing.S * 3) /
-      4
-  },
-  hiddenBase: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'flex-end'
-  },
-  action: {
-    flexBasis:
-      StyleConstants.Font.Size.L +
-      StyleConstants.Spacing.Global.PagePadding * 4,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  modal: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-})
-
 export default ComposeDraftsListRoot

src/screens/Compose/EditAttachment/Image.tsx

@@ -1,9 +1,10 @@
+import CustomText from '@components/Text'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Dimensions, Image, StyleSheet, Text, View } from 'react-native'
+import { Dimensions, Image, View } from 'react-native'
 import { PanGestureHandler } from 'react-native-gesture-handler'
 import Animated, {
   Extrapolate,
@@ -120,7 +121,7 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
 
   return (
     <>
-      <View style={styles.base}>
+      <View style={{ overflow: 'hidden', flex: 1, alignItems: 'center' }}>
         <Image
           style={{
             width: imageDimensionis.width,
@@ -168,20 +169,18 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
         </PanGestureHandler>
       </View>
       {screenReaderEnabled ? null : (
-        <Text style={[styles.imageFocusText, { color: colors.primaryDefault }]}>
+        <CustomText
+          fontStyle='M'
+          style={{
+            padding: StyleConstants.Spacing.Global.PagePadding,
+            color: colors.primaryDefault
+          }}
+        >
           {t('content.editAttachment.content.imageFocus')}
-        </Text>
+        </CustomText>
       )}
     </>
   )
 }
 
-const styles = StyleSheet.create({
-  base: { overflow: 'hidden', flex: 1, alignItems: 'center' },
-  imageFocusText: {
-    ...StyleConstants.FontStyle.M,
-    padding: StyleConstants.Spacing.Global.PagePadding
-  }
-})
-
 export default ComposeEditAttachmentImage

src/screens/Compose/EditAttachment/Root.tsx

@@ -1,9 +1,10 @@
+import CustomText from '@components/Text'
 import AttachmentVideo from '@components/Timeline/Shared/Attachment/Video'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ScrollView, StyleSheet, Text, TextInput, View } from 'react-native'
+import { ScrollView, StyleSheet, TextInput, View } from 'react-native'
 import ComposeContext from '../utils/createContext'
 import ComposeEditAttachmentImage from './Image'
 
@@ -60,17 +61,28 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
   return (
     <ScrollView ref={scrollViewRef}>
       {mediaDisplay}
-      <View style={styles.altTextContainer}>
-        <Text
-          style={[styles.altTextInputHeading, { color: colors.primaryDefault }]}
+      <View style={{ padding: StyleConstants.Spacing.Global.PagePadding }}>
+        <CustomText
+          fontStyle='M'
+          style={{
+            fontWeight: StyleConstants.Font.Weight.Bold,
+            color: colors.primaryDefault
+          }}
         >
           {t('content.editAttachment.content.altText.heading')}
-        </Text>
+        </CustomText>
         <TextInput
-          style={[
-            styles.altTextInput,
-            { borderColor: colors.border, color: colors.primaryDefault }
-          ]}
+          style={{
+            height: 200,
+            ...StyleConstants.FontStyle.M,
+            marginTop: StyleConstants.Spacing.M,
+            marginBottom: StyleConstants.Spacing.S,
+            padding: StyleConstants.Spacing.Global.PagePadding,
+            paddingTop: StyleConstants.Spacing.S * 1.5,
+            borderWidth: StyleSheet.hairlineWidth,
+            borderColor: colors.border,
+            color: colors.primaryDefault
+          }}
           onFocus={() => scrollViewRef.current?.scrollToEnd()}
           autoCapitalize='none'
           autoCorrect={false}
@@ -83,35 +95,20 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
           value={theAttachment.description}
           keyboardAppearance={mode}
         />
-        <Text style={[styles.altTextLength, { color: colors.secondary }]}>
+        <CustomText
+          fontStyle='S'
+          style={{
+            textAlign: 'right',
+            marginRight: StyleConstants.Spacing.S,
+            marginBottom: StyleConstants.Spacing.M,
+            color: colors.secondary
+          }}
+        >
           {theAttachment.description?.length || 0} / 1500
-        </Text>
+        </CustomText>
       </View>
     </ScrollView>
   )
 }
 
-const styles = StyleSheet.create({
-  altTextContainer: { padding: StyleConstants.Spacing.Global.PagePadding },
-  altTextInputHeading: {
-    ...StyleConstants.FontStyle.M,
-    fontWeight: StyleConstants.Font.Weight.Bold
-  },
-  altTextInput: {
-    height: 200,
-    ...StyleConstants.FontStyle.M,
-    marginTop: StyleConstants.Spacing.M,
-    marginBottom: StyleConstants.Spacing.S,
-    padding: StyleConstants.Spacing.Global.PagePadding,
-    paddingTop: StyleConstants.Spacing.S * 1.5,
-    borderWidth: StyleSheet.hairlineWidth
-  },
-  altTextLength: {
-    textAlign: 'right',
-    marginRight: StyleConstants.Spacing.S,
-    ...StyleConstants.FontStyle.S,
-    marginBottom: StyleConstants.Spacing.M
-  }
-})
-
 export default ComposeEditAttachmentRoot

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

@@ -2,6 +2,7 @@ import analytics from '@components/analytics'
 import Button from '@components/Button'
 import haptics from '@components/haptics'
 import Icon from '@components/Icon'
+import CustomText from '@components/Text'
 import { useActionSheet } from '@expo/react-native-action-sheet'
 import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
@@ -16,14 +17,7 @@ import React, {
   useRef
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  FlatList,
-  Image,
-  Pressable,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native'
+import { FlatList, Image, Pressable, StyleSheet, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import ComposeContext from '../../utils/createContext'
 import { ExtendedAttachment } from '../../utils/types'
@@ -122,33 +116,46 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
       return (
         <View
           key={index}
-          style={[styles.container, { width: calculateWidth(item) }]}
+          style={{
+            height: DEFAULT_HEIGHT,
+            marginLeft: StyleConstants.Spacing.Global.PagePadding,
+            marginTop: StyleConstants.Spacing.Global.PagePadding,
+            marginBottom: StyleConstants.Spacing.Global.PagePadding,
+            width: calculateWidth(item)
+          }}
         >
           <Image
-            style={styles.image}
+            style={{ width: '100%', height: '100%' }}
             source={{
               uri: item.local?.local_thumbnail || item.remote?.preview_url
             }}
           />
           {item.remote?.meta?.original?.duration ? (
-            <Text
-              style={[
-                styles.duration,
-                {
-                  color: colors.backgroundDefault,
-                  backgroundColor: colors.backgroundOverlayInvert
-                }
-              ]}
+            <CustomText
+              fontStyle='S'
+              style={{
+                position: 'absolute',
+                bottom: StyleConstants.Spacing.S,
+                left: StyleConstants.Spacing.S,
+                paddingLeft: StyleConstants.Spacing.S,
+                paddingRight: StyleConstants.Spacing.S,
+                paddingTop: StyleConstants.Spacing.XS,
+                paddingBottom: StyleConstants.Spacing.XS,
+                color: colors.backgroundDefault,
+                backgroundColor: colors.backgroundOverlayInvert
+              }}
             >
               {item.remote.meta.original.duration}
-            </Text>
+            </CustomText>
           ) : null}
           {item.uploading ? (
             <View
-              style={[
-                styles.uploading,
-                { backgroundColor: colors.backgroundOverlayInvert }
-              ]}
+              style={{
+                ...StyleSheet.absoluteFillObject,
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: colors.backgroundOverlayInvert
+              }}
             >
               <Circle
                 size={StyleConstants.Font.Size.L}
@@ -156,7 +163,15 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
               />
             </View>
           ) : (
-            <View style={styles.actions}>
+            <View
+              style={{
+                ...StyleSheet.absoluteFillObject,
+                justifyContent: 'space-between',
+                alignContent: 'flex-end',
+                alignItems: 'flex-end',
+                padding: StyleConstants.Spacing.S
+              }}
+            >
               <Button
                 accessibilityLabel={t(
                   'content.root.footer.attachments.remove.accessibilityLabel',
@@ -209,16 +224,20 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
         accessibilityLabel={t(
           'content.root.footer.attachments.upload.accessibilityLabel'
         )}
-        style={[
-          styles.container,
-          {
-            width: DEFAULT_HEIGHT,
-            backgroundColor: colors.backgroundOverlayInvert
-          }
-        ]}
+        style={{
+          height: DEFAULT_HEIGHT,
+          marginLeft: StyleConstants.Spacing.Global.PagePadding,
+          marginTop: StyleConstants.Spacing.Global.PagePadding,
+          marginBottom: StyleConstants.Spacing.Global.PagePadding,
+          width: DEFAULT_HEIGHT,
+          backgroundColor: colors.backgroundOverlayInvert
+        }}
         onPress={async () => {
           analytics('compose_attachment_add_container_press')
-          await chooseAndUploadAttachment({ composeDispatch, showActionSheetWithOptions })
+          await chooseAndUploadAttachment({
+            composeDispatch,
+            showActionSheetWithOptions
+          })
         }}
       >
         <Button
@@ -229,7 +248,10 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
           overlay
           onPress={async () => {
             analytics('compose_attachment_add_button_press')
-            await chooseAndUploadAttachment({ composeDispatch, showActionSheetWithOptions })
+            await chooseAndUploadAttachment({
+              composeDispatch,
+              showActionSheetWithOptions
+            })
           }}
           style={{
             position: 'absolute',
@@ -250,16 +272,38 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
     []
   )
   return (
-    <View style={styles.base} ref={accessibleRefAttachments} accessible>
-      <Pressable style={styles.sensitive} onPress={sensitiveOnPress}>
+    <View
+      style={{
+        flex: 1,
+        marginRight: StyleConstants.Spacing.Global.PagePadding,
+        marginTop: StyleConstants.Spacing.M
+      }}
+      ref={accessibleRefAttachments}
+      accessible
+    >
+      <Pressable
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginLeft: StyleConstants.Spacing.Global.PagePadding
+        }}
+        onPress={sensitiveOnPress}
+      >
         <Icon
           name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}
           size={StyleConstants.Font.Size.L}
           color={colors.primaryDefault}
         />
-        <Text style={[styles.sensitiveText, { color: colors.primaryDefault }]}>
+        <CustomText
+          fontStyle='M'
+          style={{
+            marginLeft: StyleConstants.Spacing.S,
+            color: colors.primaryDefault
+          }}
+        >
           {t('content.root.footer.attachments.sensitive')}
-        </Text>
+        </CustomText>
       </Pressable>
       <FlatList
         horizontal
@@ -283,54 +327,4 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
   )
 }
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    marginRight: StyleConstants.Spacing.Global.PagePadding,
-    marginTop: StyleConstants.Spacing.M
-  },
-  sensitive: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginLeft: StyleConstants.Spacing.Global.PagePadding
-  },
-  sensitiveText: {
-    ...StyleConstants.FontStyle.M,
-    marginLeft: StyleConstants.Spacing.S
-  },
-  container: {
-    height: DEFAULT_HEIGHT,
-    marginLeft: StyleConstants.Spacing.Global.PagePadding,
-    marginTop: StyleConstants.Spacing.Global.PagePadding,
-    marginBottom: StyleConstants.Spacing.Global.PagePadding
-  },
-  image: {
-    width: '100%',
-    height: '100%'
-  },
-  duration: {
-    position: 'absolute',
-    bottom: StyleConstants.Spacing.S,
-    left: StyleConstants.Spacing.S,
-    ...StyleConstants.FontStyle.S,
-    paddingLeft: StyleConstants.Spacing.S,
-    paddingRight: StyleConstants.Spacing.S,
-    paddingTop: StyleConstants.Spacing.XS,
-    paddingBottom: StyleConstants.Spacing.XS
-  },
-  uploading: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  actions: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'space-between',
-    alignContent: 'flex-end',
-    alignItems: 'flex-end',
-    padding: StyleConstants.Spacing.S
-  }
-})
-
 export default React.memo(ComposeAttachments, () => true)

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

@@ -1,4 +1,5 @@
 import haptics from '@components/haptics'
+import CustomText from '@components/Text'
 import { useAppDispatch } from '@root/store'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { countInstanceEmoji } from '@utils/slices/instancesSlice'
@@ -11,8 +12,6 @@ import {
   findNodeHandle,
   Pressable,
   SectionList,
-  StyleSheet,
-  Text,
   View
 } from 'react-native'
 import FastImage from 'react-native-fast-image'
@@ -40,7 +39,16 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
 
   const listHeader = useCallback(
     ({ section: { title } }) => (
-      <Text style={[styles.group, { color: colors.secondary }]}>{title}</Text>
+      <CustomText
+        fontStyle='S'
+        style={{
+          position: 'absolute',
+          left: StyleConstants.Spacing.L,
+          color: colors.secondary
+        }}
+      >
+        {title}
+      </CustomText>
     ),
     []
   )
@@ -48,7 +56,15 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
   const listItem = useCallback(
     ({ index, item }: { item: Mastodon.Emoji[]; index: number }) => {
       return (
-        <View key={index} style={styles.emojis}>
+        <View
+          key={index}
+          style={{
+            flex: 1,
+            flexWrap: 'wrap',
+            marginTop: StyleConstants.Spacing.M,
+            marginLeft: StyleConstants.Spacing.M
+          }}
+        >
           {item.map(emoji => {
             const uri = reduceMotionEnabled ? emoji.static_url : emoji.url
             if (validUrl.isHttpsUri(uri)) {
@@ -77,7 +93,12 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
                       'screenCompose:content.root.footer.emojis.accessibilityHint'
                     )}
                     source={{ uri }}
-                    style={styles.emoji}
+                    style={{
+                      width: 32,
+                      height: 32,
+                      padding: StyleConstants.Spacing.S,
+                      margin: StyleConstants.Spacing.S
+                    }}
                   />
                 </Pressable>
               )
@@ -92,7 +113,15 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
   )
 
   return (
-    <View style={styles.base}>
+    <View
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-around',
+        height: 260
+      }}
+    >
       <SectionList
         accessible
         ref={accessibleRefEmojis}
@@ -108,31 +137,4 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
   )
 }
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-around',
-    height: 260
-  },
-  group: {
-    position: 'absolute',
-    left: StyleConstants.Spacing.L,
-    ...StyleConstants.FontStyle.S
-  },
-  emojis: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: StyleConstants.Spacing.M,
-    marginLeft: StyleConstants.Spacing.M
-  },
-  emoji: {
-    width: 32,
-    height: 32,
-    padding: StyleConstants.Spacing.S,
-    margin: StyleConstants.Spacing.S
-  }
-})
-
 export default React.memo(ComposeEmojis, () => true)

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

@@ -2,13 +2,14 @@ import analytics from '@components/analytics'
 import Button from '@components/Button'
 import Icon from '@components/Icon'
 import { MenuRow } from '@components/Menu'
+import CustomText from '@components/Text'
 import { useActionSheet } from '@expo/react-native-action-sheet'
 import { getInstanceConfigurationPoll } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet, Text, TextInput, View } from 'react-native'
+import { StyleSheet, TextInput, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import ComposeContext from '../../utils/createContext'
 
@@ -39,8 +40,21 @@ const ComposePoll: React.FC = () => {
   }, [])
 
   return (
-    <View style={[styles.base, { borderColor: colors.border }]}>
-      <View style={styles.options}>
+    <View
+      style={{
+        flex: 1,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 6,
+        margin: StyleConstants.Spacing.Global.PagePadding,
+        borderColor: colors.border
+      }}
+    >
+      <View
+        style={{
+          marginTop: StyleConstants.Spacing.M,
+          marginBottom: StyleConstants.Spacing.S
+        }}
+      >
         {[...Array(total)].map((e, i) => {
           const restOptions = Object.keys(options).filter(
             o => parseInt(o) !== i && parseInt(o) < total
@@ -66,13 +80,16 @@ const ComposePoll: React.FC = () => {
                 )}
                 keyboardAppearance={mode}
                 {...(i === 0 && firstRender && { autoFocus: true })}
-                style={[
-                  styles.textInput,
-                  {
-                    borderColor: colors.border,
-                    color: hasConflict ? colors.red : colors.primaryDefault
-                  }
-                ]}
+                style={{
+                  flex: 1,
+                  padding: StyleConstants.Spacing.S,
+                  borderWidth: StyleSheet.hairlineWidth,
+                  borderRadius: 6,
+                  ...StyleConstants.FontStyle.M,
+                  marginLeft: StyleConstants.Spacing.S,
+                  borderColor: colors.border,
+                  color: hasConflict ? colors.red : colors.primaryDefault
+                }}
                 placeholder={
                   multiple
                     ? t('content.root.footer.poll.option.placeholder.multiple')
@@ -93,7 +110,15 @@ const ComposePoll: React.FC = () => {
           )
         })}
       </View>
-      <View style={styles.controlAmount}>
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          marginRight: StyleConstants.Spacing.M
+        }}
+      >
         <Button
           {...(total > 2
             ? {
@@ -121,9 +146,14 @@ const ComposePoll: React.FC = () => {
           round
           disabled={!(total > 2)}
         />
-        <Text style={[styles.controlCount, { color: colors.secondary }]}>
+        <CustomText
+          style={{
+            marginHorizontal: StyleConstants.Spacing.S,
+            color: colors.secondary
+          }}
+        >
           {total} / {MAX_OPTIONS}
-        </Text>
+        </CustomText>
         <Button
           {...(total < MAX_OPTIONS
             ? {
@@ -152,7 +182,9 @@ const ComposePoll: React.FC = () => {
           disabled={!(total < MAX_OPTIONS)}
         />
       </View>
-      <View style={styles.controlOptions}>
+      <View
+        style={{ paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}
+      >
         <MenuRow
           title={t('content.root.footer.poll.multiple.heading')}
           content={
@@ -238,43 +270,12 @@ const ComposePoll: React.FC = () => {
 }
 
 const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: 6,
-    margin: StyleConstants.Spacing.Global.PagePadding
-  },
-  options: {
-    marginTop: StyleConstants.Spacing.M,
-    marginBottom: StyleConstants.Spacing.S
-  },
   option: {
     marginLeft: StyleConstants.Spacing.M,
     marginRight: StyleConstants.Spacing.M,
     marginBottom: StyleConstants.Spacing.S,
     flexDirection: 'row',
     alignItems: 'center'
-  },
-  textInput: {
-    flex: 1,
-    padding: StyleConstants.Spacing.S,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: 6,
-    ...StyleConstants.FontStyle.M,
-    marginLeft: StyleConstants.Spacing.S
-  },
-  controlAmount: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    marginRight: StyleConstants.Spacing.M
-  },
-  controlOptions: {
-    paddingHorizontal: StyleConstants.Spacing.Global.PagePadding
-  },
-  controlCount: {
-    marginHorizontal: StyleConstants.Spacing.S
   }
 })
 

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

@@ -1,12 +1,11 @@
+import CustomText from '@components/Text'
 import {
   getInstanceAccount,
   getInstanceUri
 } 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(
@@ -21,21 +20,15 @@ const ComposePostingAs = React.memo(
     const instanceUri = useSelector(getInstanceUri)
 
     return (
-      <Text style={[styles.text, { color: colors.secondary }]}>
+      <CustomText fontStyle='S' style={{ color: colors.secondary }}>
         {t('content.root.header.postingAs', {
           acct: instanceAccount?.acct,
           domain: instanceUri
         })}
-      </Text>
+      </CustomText>
     )
   },
   () => true
 )
 
-const styles = StyleSheet.create({
-  text: {
-    ...StyleConstants.FontStyle.S
-  }
-})
-
 export default ComposePostingAs

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

@@ -1,8 +1,9 @@
+import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet, Text, TextInput } from 'react-native'
+import { TextInput } from 'react-native'
 import formatText from '../../formatText'
 import ComposeContext from '../../utils/createContext'
 
@@ -14,13 +15,16 @@ const ComposeSpoilerInput: React.FC = () => {
   return (
     <TextInput
       keyboardAppearance={mode}
-      style={[
-        styles.spoilerInput,
-        {
-          color: colors.primaryDefault,
-          borderBottomColor: colors.border
-        }
-      ]}
+      style={{
+        ...StyleConstants.FontStyle.M,
+        marginTop: StyleConstants.Spacing.S,
+        paddingBottom: StyleConstants.Spacing.M,
+        marginLeft: StyleConstants.Spacing.Global.PagePadding,
+        marginRight: StyleConstants.Spacing.Global.PagePadding,
+        borderBottomWidth: 0.5,
+        color: colors.primaryDefault,
+        borderBottomColor: colors.border
+      }}
       autoCapitalize='none'
       autoCorrect={false}
       autoFocus
@@ -53,20 +57,9 @@ const ComposeSpoilerInput: React.FC = () => {
         })
       }
     >
-      <Text>{composeState.spoiler.formatted}</Text>
+      <CustomText>{composeState.spoiler.formatted}</CustomText>
     </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

@@ -1,8 +1,9 @@
+import CustomText from '@components/Text'
 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 { TextInput } from 'react-native'
 import formatText from '../../formatText'
 import ComposeContext from '../../utils/createContext'
 
@@ -14,13 +15,15 @@ const ComposeTextInput: React.FC = () => {
   return (
     <TextInput
       keyboardAppearance={mode}
-      style={[
-        styles.textInput,
-        {
-          color: colors.primaryDefault,
-          borderBottomColor: colors.border
-        }
-      ]}
+      style={{
+        ...StyleConstants.FontStyle.M,
+        marginTop: StyleConstants.Spacing.S,
+        paddingBottom: StyleConstants.Spacing.M,
+        marginLeft: StyleConstants.Spacing.Global.PagePadding,
+        marginRight: StyleConstants.Spacing.Global.PagePadding,
+        color: colors.primaryDefault,
+        borderBottomColor: colors.border
+      }}
       autoFocus
       enablesReturnKeyAutomatically
       multiline
@@ -52,19 +55,9 @@ const ComposeTextInput: React.FC = () => {
       ref={composeState.textInputFocus.refs.text}
       scrollEnabled={false}
     >
-      <Text>{composeState.text.formatted}</Text>
+      <CustomText>{composeState.text.formatted}</CustomText>
     </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

src/screens/Compose/formatText.tsx

@@ -1,11 +1,11 @@
 import { debounce, differenceWith, isEqual } from 'lodash'
 import React, { createElement, Dispatch } from 'react'
-import { Text } from 'react-native'
 import { FetchOptions } from 'react-query/types/core/query'
 import Autolinker from '@root/modules/autolinker'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { ComposeAction, ComposeState } from './utils/types'
 import { instanceConfigurationStatusCharsURL } from './Root'
+import CustomText from '@components/Text'
 
 export interface Params {
   textInput: ComposeState['textInputFocus']['current']
@@ -18,7 +18,7 @@ export interface Params {
 const TagText = ({ text }: { text: string }) => {
   const { colors } = useTheme()
 
-  return <Text style={{ color: colors.blue }}>{text}</Text>
+  return <CustomText style={{ color: colors.blue }}>{text}</CustomText>
 }
 
 const debouncedSuggestions = debounce(
@@ -120,7 +120,7 @@ const formatText = ({
     payload: {
       count: contentLength,
       raw: content,
-      formatted: createElement(Text, null, children)
+      formatted: createElement(CustomText, null, children)
     }
   })
 }