Force all tex to have both font size and line height

https://github.com/facebook/react-native/issues/19193 describes the issue. But https://github.com/facebook/react-native/issues/19193#issuecomment-467852112 suggestion does not look well with PingFang and English

App.tsx

@@ -7,6 +7,7 @@ import ThemeManager from '@utils/styles/ThemeManager'
 import chalk from 'chalk'
 import * as SplashScreen from 'expo-splash-screen'
 import React, { useCallback, useEffect, useState } from 'react'
+import { Platform, Text } from 'react-native'
 import { enableScreens } from 'react-native-screens'
 import { onlineManager, QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'

src/components/Header/Left.tsx

@@ -57,7 +57,7 @@ const styles = StyleSheet.create({
     borderRadius: 100
   },
   text: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   }
 })
 

src/components/Header/Right.tsx

@@ -93,7 +93,7 @@ const styles = StyleSheet.create({
     borderRadius: 100
   },
   text: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   }
 })
 

src/components/Menu/Header.tsx

@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
     paddingBottom: StyleConstants.Spacing.S
   },
   text: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     fontWeight: StyleConstants.Font.Weight.Bold
   }
 })

src/components/Menu/Row.tsx

@@ -133,10 +133,10 @@ const styles = StyleSheet.create({
   },
   text: {
     flex: 1,
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   },
   content: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   },
   iconBack: {
     marginLeft: 8

src/components/ParseContent.tsx

@@ -40,7 +40,7 @@ const renderNode = ({
             key={index}
             style={{
               color: theme.blue,
-              fontSize: StyleConstants.Font.Size[size]
+              ...StyleConstants.FontStyle[size]
             }}
             onPress={() => {
               const tag = href.split(new RegExp(/\/tag\/(.*)|\/tags\/(.*)/))
@@ -59,7 +59,7 @@ const renderNode = ({
             key={index}
             style={{
               color: theme.blue,
-              fontSize: StyleConstants.Font.Size[size]
+              ...StyleConstants.FontStyle[size]
             }}
             onPress={() => {
               const username = href.split(new RegExp(/@(.*)/))
@@ -79,13 +79,14 @@ const renderNode = ({
     } else {
       const domain = href.split(new RegExp(/:\/\/(.[^\/]+)/))
       const content = node.children && node.children[0].data
-      const shouldBeTag = tags && tags.filter(tag => `#${tag.name}` === content)
+      const shouldBeTag =
+        tags && tags.filter(tag => `#${tag.name}` === content).length > 0
       return (
         <Text
           key={index}
           style={{
             color: theme.blue,
-            fontSize: StyleConstants.Font.Size[size]
+            ...StyleConstants.FontStyle[size]
           }}
           onPress={async () =>
             !shouldBeTag
@@ -158,13 +159,9 @@ const ParseContent: React.FC<Props> = ({
   const textComponent = useCallback(({ children }) => {
     if (children) {
       return emojis ? (
-        <Emojis
+        <Emojis content={children.toString()} emojis={emojis} size={size} />
-          content={children.toString()}
-          emojis={emojis}
-          size={StyleConstants.Font.Size[size]}
-        />
       ) : (
-        <Text>{children}</Text>
+        <Text style={{ ...StyleConstants.FontStyle[size] }}>{children}</Text>
       )
     } else {
       return null
@@ -198,7 +195,7 @@ const ParseContent: React.FC<Props> = ({
       return (
         <View>
           <Text
-            style={{ lineHeight, color: theme.primary, overflow: 'hidden' }}
+            style={{ color: theme.primary, overflow: 'hidden' }}
             children={children}
             numberOfLines={calNumberOfLines}
             onLayout={({ nativeEvent }) => {
@@ -237,7 +234,7 @@ const ParseContent: React.FC<Props> = ({
                 <Text
                   style={{
                     textAlign: 'center',
-                    fontSize: StyleConstants.Font.Size.S,
+                    ...StyleConstants.FontStyle.S,
                     color: theme.primary
                   }}
                 >

src/components/Timelines/Timeline/Empty.tsx

@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   error: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginTop: StyleConstants.Spacing.S,
     marginBottom: StyleConstants.Spacing.L
   }

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

@@ -90,7 +90,7 @@ const TimelineActioned: React.FC<Props> = ({
             <Emojis
               content={content}
               emojis={account.emojis}
-              size={StyleConstants.Font.Size.S}
+              size='S'
             />
           ) : (
             <Text>{content}</Text>

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

@@ -194,7 +194,7 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
           <Text
             style={{
               color: theme.secondary,
-              fontSize: StyleConstants.Font.Size.M,
+              ...StyleConstants.FontStyle.M,
               marginLeft: StyleConstants.Spacing.XS
             }}
           >

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

@@ -152,7 +152,7 @@ const styles = StyleSheet.create({
     borderRadius: 6
   },
   sensitiveText: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   }
 })
 

src/components/Timelines/Timeline/Shared/Attachment/Unsupported.tsx

@@ -57,7 +57,7 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   text: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     textAlign: 'center',
     marginBottom: StyleConstants.Spacing.S
   }

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Image, StyleSheet, Text, View } from 'react-native'
+import { Image, StyleSheet, Text } from 'react-native'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { StyleConstants } from '@utils/styles/constants'
 
@@ -8,7 +8,7 @@ const regexEmoji = new RegExp(/(:[a-z0-9_]+:)/)
 export interface Props {
   content: string
   emojis: Mastodon.Emoji[]
-  size: number
+  size?: 'S' | 'M' | 'L'
   fontBold?: boolean
   numberOfLines?: number
 }
@@ -16,22 +16,21 @@ export interface Props {
 const Emojis: React.FC<Props> = ({
   content,
   emojis,
-  size,
+  size = 'M',
   fontBold = false,
   numberOfLines
 }) => {
   const { theme } = useTheme()
   const styles = StyleSheet.create({
     text: {
-      fontSize: size,
       color: theme.primary,
+      ...StyleConstants.FontStyle[size],
       ...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold })
     },
     image: {
-      width: size,
+      width: StyleConstants.Font.Size[size],
-      height: size,
+      height: StyleConstants.Font.Size[size],
-      paddingTop: 1,
+      marginBottom: -2 // hacking
-      marginBottom: -1
     }
   })
 
@@ -48,14 +47,12 @@ const Emojis: React.FC<Props> = ({
               {emojiShortcode}
             </Text>
           ) : (
-            <View key={i} style={styles.image}>
             <Image
               key={i}
               resizeMode='contain'
               source={{ uri: emojis[emojiIndex].url }}
-                style={{ width: '100%', height: '100%' }}
+              style={[styles.image]}
             />
-            </View>
           )
         } else {
           return str ? (
@@ -71,4 +68,5 @@ const Emojis: React.FC<Props> = ({
   )
 }
 
-export default React.memo(Emojis, () => true)
+// export default React.memo(Emojis, () => true)
+export default Emojis

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

@@ -39,7 +39,7 @@ const styles = StyleSheet.create({
     padding: StyleConstants.Spacing.M
   },
   text: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginLeft: StyleConstants.Spacing.S
   }
 })

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

@@ -85,7 +85,7 @@ const HeaderConversation: React.FC<Props> = ({ queryKey, conversation }) => {
                 conversation.accounts[0].username
               }
               emojis={conversation.accounts[0].emojis}
-              size={StyleConstants.Font.Size.M}
+              size='M'
               fontBold={true}
             />
           ) : (
@@ -141,7 +141,7 @@ const styles = StyleSheet.create({
     marginLeft: StyleConstants.Spacing.XS
   },
   nameWithoutEmoji: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     fontWeight: StyleConstants.Font.Weight.Bold
   },
   meta: {
@@ -151,7 +151,7 @@ const styles = StyleSheet.create({
     marginBottom: StyleConstants.Spacing.S
   },
   created_at: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   },
   unread: {
     marginLeft: StyleConstants.Spacing.XS

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

@@ -68,12 +68,12 @@ const TimelineHeaderDefault: React.FC<Props> = ({
   return (
     <View style={styles.base}>
       <View style={queryKey ? { flexBasis: '80%' } : { flexBasis: '100%' }}>
-        <View style={styles.name}>
+        <View style={styles.nameAndAccount}>
           {emojis?.length ? (
             <Emojis
               content={name}
               emojis={emojis}
-              size={StyleConstants.Font.Size.M}
+              size='M'
               fontBold={true}
             />
           ) : (
@@ -168,11 +168,12 @@ const styles = StyleSheet.create({
   nameAndMeta: {
     flexBasis: '80%'
   },
-  name: {
+  nameAndAccount: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    alignItems: 'center'
   },
   nameWithoutEmoji: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     fontWeight: StyleConstants.Font.Weight.Bold
   },
   account: {
@@ -186,13 +187,13 @@ const styles = StyleSheet.create({
     marginBottom: StyleConstants.Spacing.S
   },
   created_at: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   },
   visibility: {
     marginLeft: StyleConstants.Spacing.S
   },
   application: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginLeft: StyleConstants.Spacing.S
   },
   action: {

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

@@ -128,7 +128,7 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
             <Emojis
               content={name}
               emojis={emojis}
-              size={StyleConstants.Font.Size.M}
+              size='M'
               fontBold={true}
             />
           ) : (
@@ -194,7 +194,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row'
   },
   nameWithoutEmoji: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     fontWeight: StyleConstants.Font.Weight.Bold
   },
   account: {
@@ -208,13 +208,13 @@ const styles = StyleSheet.create({
     marginBottom: StyleConstants.Spacing.S
   },
   created_at: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   },
   visibility: {
     marginLeft: StyleConstants.Spacing.S
   },
   application: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginLeft: StyleConstants.Spacing.S
   },
   relationship: {

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

@@ -178,7 +178,7 @@ const TimelinePoll: React.FC<Props> = ({
                 <Emojis
                   content={option.title}
                   emojis={poll.emojis}
-                  size={StyleConstants.Font.Size.M}
+                  size='M'
                   numberOfLines={2}
                 />
               </View>
@@ -238,7 +238,7 @@ const TimelinePoll: React.FC<Props> = ({
                 <Emojis
                   content={option.title}
                   emojis={poll.emojis}
-                  size={StyleConstants.Font.Size.M}
+                  size='M'
                   numberOfLines={2}
                 />
               </View>
@@ -293,7 +293,7 @@ const styles = StyleSheet.create({
     paddingRight: StyleConstants.Spacing.S
   },
   percentage: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   },
   background: {
     height: StyleConstants.Spacing.XS,
@@ -313,10 +313,10 @@ const styles = StyleSheet.create({
     marginRight: StyleConstants.Spacing.M
   },
   votes: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   },
   expiration: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   }
 })
 

src/components/toast.tsx

@@ -111,10 +111,10 @@ const styles = StyleSheet.create({
     marginLeft: StyleConstants.Spacing.S
   },
   text1: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   },
   text2: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginTop: StyleConstants.Spacing.S
   }
 })

src/screens/Me/Root/Login.tsx

@@ -294,7 +294,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     paddingLeft: StyleConstants.Spacing.Global.PagePadding,
     paddingRight: StyleConstants.Spacing.Global.PagePadding,
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginRight: StyleConstants.Spacing.S
   },
   instanceInfo: {
@@ -303,11 +303,11 @@ const styles = StyleSheet.create({
     paddingRight: StyleConstants.Spacing.Global.PagePadding
   },
   instanceInfoHeader: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     fontWeight: StyleConstants.Font.Weight.Bold,
     marginBottom: StyleConstants.Spacing.XS
   },
-  instanceInfoContent: { fontSize: StyleConstants.Font.Size.M },
+  instanceInfoContent: { ...StyleConstants.FontStyle.M },
   instanceStats: {
     flex: 1,
     flexDirection: 'row',
@@ -320,7 +320,7 @@ const styles = StyleSheet.create({
     flex: 1
   },
   disclaimer: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     paddingLeft: StyleConstants.Spacing.Global.PagePadding,
     paddingRight: StyleConstants.Spacing.Global.PagePadding,
     marginBottom: StyleConstants.Spacing.M

src/screens/Me/Settings.tsx

@@ -147,7 +147,7 @@ const ScreenMeSettings: React.FC = () => {
 const styles = StyleSheet.create({
   version: {
     textAlign: 'center',
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginTop: StyleConstants.Spacing.M
   }
 })

src/screens/Shared/Account/Information/Account.tsx

@@ -31,7 +31,7 @@ const AccountInformationAccount = forwardRef<ShimmerPlaceholder, Props>(
           <Text
             style={{
               color: theme.secondary,
-              fontSize: StyleConstants.Font.Size.M
+              ...StyleConstants.FontStyle.M
             }}
             selectable
           >

src/screens/Shared/Account/Information/Actions.tsx

@@ -153,7 +153,7 @@ const styles = StyleSheet.create({
   },
   actionConversation: { marginRight: StyleConstants.Spacing.S },
   error: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   }
 })
 

src/screens/Shared/Account/Information/Created.tsx

@@ -38,7 +38,7 @@ const AccountInformationCreated = forwardRef<ShimmerPlaceholder, Props>(
           <Text
             style={{
               color: theme.secondary,
-              fontSize: StyleConstants.Font.Size.S
+              ...StyleConstants.FontStyle.S
             }}
           >
             {t('content.created_at', {

src/screens/Shared/Account/Information/Name.tsx

@@ -33,14 +33,14 @@ const AccountInformationName = forwardRef<ShimmerPlaceholder, Props>(
             <Emojis
               content={account?.display_name || account?.username}
               emojis={account.emojis}
-              size={StyleConstants.Font.Size.L}
+              size='L'
               fontBold={true}
             />
           ) : (
             <Text
               style={{
                 color: theme.primary,
-                fontSize: StyleConstants.Font.Size.L,
+                ...StyleConstants.FontStyle.L,
                 fontWeight: StyleConstants.Font.Weight.Bold
               }}
             >

src/screens/Shared/Account/Information/Stats.tsx

@@ -88,7 +88,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between'
   },
   stat: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   }
 })
 

src/screens/Shared/Account/Nav.tsx

@@ -63,14 +63,14 @@ const AccountNav: React.FC<Props> = ({ accountState, scrollY, account }) => {
             <Emojis
               content={account?.display_name || account?.username}
               emojis={account.emojis}
-              size={StyleConstants.Font.Size.L}
+              size='L'
               fontBold={true}
             />
           ) : (
             <Text
               style={{
                 color: theme.primary,
-                fontSize: StyleConstants.Font.Size.L,
+                ...StyleConstants.FontStyle.L,
                 fontWeight: StyleConstants.Font.Weight.Bold
               }}
             >

src/screens/Shared/Announcements.tsx

@@ -238,7 +238,7 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   headerText: {
-    fontSize: StyleConstants.Font.Size.M * 1.5,
+    ...StyleConstants.FontStyle.L,
     fontWeight: StyleConstants.Font.Weight.Bold
   },
   announcementContainer: {
@@ -247,7 +247,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   },
   published: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginBottom: StyleConstants.Spacing.S
   },
   pressable: { ...StyleSheet.absoluteFillObject },
@@ -280,10 +280,10 @@ const styles = StyleSheet.create({
     height: StyleConstants.Font.LineHeight.M
   },
   reactionText: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M,
   },
   reactionCount: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginLeft: StyleConstants.Spacing.S
   },
   indicators: {

src/screens/Shared/Compose.tsx

@@ -611,7 +611,7 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
 const styles = StyleSheet.create({
   count: {
     textAlign: 'center',
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   }
 })
 

src/screens/Shared/Compose/Actions.tsx

@@ -196,7 +196,7 @@ const styles = StyleSheet.create({
   },
   count: {
     textAlign: 'center',
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     fontWeight: StyleConstants.Font.Weight.Bold
   }
 })

src/screens/Shared/Compose/Attachments.tsx

@@ -209,7 +209,7 @@ const styles = StyleSheet.create({
     marginLeft: StyleConstants.Spacing.Global.PagePadding
   },
   sensitiveText: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginLeft: StyleConstants.Spacing.S
   },
   imageContainer: {
@@ -226,7 +226,7 @@ const styles = StyleSheet.create({
     bottom:
       StyleConstants.Spacing.Global.PagePadding + StyleConstants.Spacing.S,
     left: StyleConstants.Spacing.Global.PagePadding + StyleConstants.Spacing.S,
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     paddingLeft: StyleConstants.Spacing.S,
     paddingRight: StyleConstants.Spacing.S,
     paddingTop: StyleConstants.Spacing.XS,

src/screens/Shared/Compose/EditAttachment.tsx

@@ -328,17 +328,17 @@ const ComposeEditAttachment: React.FC<Props> = ({
 
 const styles = StyleSheet.create({
   imageFocusText: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     padding: StyleConstants.Spacing.Global.PagePadding
   },
   altTextContainer: { padding: StyleConstants.Spacing.Global.PagePadding },
   altTextInputHeading: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     fontWeight: StyleConstants.Font.Weight.Bold
   },
   altTextInput: {
     height: 200,
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginTop: StyleConstants.Spacing.M,
     marginBottom: StyleConstants.Spacing.S,
     padding: StyleConstants.Spacing.Global.PagePadding,
@@ -348,7 +348,7 @@ const styles = StyleSheet.create({
   altTextLength: {
     textAlign: 'right',
     marginRight: StyleConstants.Spacing.S,
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginBottom: StyleConstants.Spacing.M
   }
 })

src/screens/Shared/Compose/Emojis.tsx

@@ -89,7 +89,7 @@ const styles = StyleSheet.create({
   group: {
     position: 'absolute',
     left: StyleConstants.Spacing.L,
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   },
   emojis: {
     flex: 1,

src/screens/Shared/Compose/Poll.tsx

@@ -172,7 +172,7 @@ const styles = StyleSheet.create({
     padding: StyleConstants.Spacing.S,
     borderWidth: StyleSheet.hairlineWidth,
     borderRadius: 6,
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginLeft: StyleConstants.Spacing.S
   },
   controlAmount: {

src/screens/Shared/Compose/Root.tsx

@@ -73,7 +73,7 @@ const ListItem = React.memo(
                   <Emojis
                     content={item.display_name || item.username}
                     emojis={item.emojis}
-                    size={StyleConstants.Font.Size.S}
+                    size='S'
                   />
                 ) : (
                   item.display_name || item.username
@@ -229,12 +229,12 @@ const styles = StyleSheet.create({
     borderRadius: StyleConstants.Avatar.M
   },
   accountName: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     fontWeight: StyleConstants.Font.Weight.Bold,
     marginBottom: StyleConstants.Spacing.XS
   },
   accountAccount: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   },
   hashtag: {
     flex: 1,
@@ -245,7 +245,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: StyleSheet.hairlineWidth
   },
   hashtagText: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     fontWeight: StyleConstants.Font.Weight.Bold,
     marginBottom: StyleConstants.Spacing.XS
   },

src/screens/Shared/Compose/SpoilerInput.tsx

@@ -58,7 +58,7 @@ const ComposeSpoilerInput: React.FC = () => {
 
 const styles = StyleSheet.create({
   spoilerInput: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginTop: StyleConstants.Spacing.S,
     paddingBottom: StyleConstants.Spacing.M,
     marginLeft: StyleConstants.Spacing.Global.PagePadding,

src/screens/Shared/Compose/TextInput.tsx

@@ -58,12 +58,11 @@ const ComposeTextInput: React.FC = () => {
 
 const styles = StyleSheet.create({
   textInput: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginTop: StyleConstants.Spacing.S,
     paddingBottom: StyleConstants.Spacing.M,
     marginLeft: StyleConstants.Spacing.Global.PagePadding,
     marginRight: StyleConstants.Spacing.Global.PagePadding
-    // borderBottomWidth: 0.5
   }
 })
 

src/screens/Shared/ImagesViewer.tsx

@@ -123,7 +123,7 @@ const ScreenSharedImagesViewer: React.FC<Props> = ({
 const styles = StyleSheet.create({
   headerCenter: {
     color: 'white',
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   }
 })
 

src/screens/Shared/Search.tsx

@@ -177,7 +177,7 @@ const ScreenSharedSearch: React.FC = () => {
                 <Emojis
                   content={item.display_name || item.username}
                   emojis={item.emojis}
-                  size={StyleConstants.Font.Size.S}
+                  size='S'
                   fontBold={true}
                 />
               ) : (
@@ -233,7 +233,7 @@ const ScreenSharedSearch: React.FC = () => {
                 <Emojis
                   content={item.account.display_name || item.account.username}
                   emojis={item.account.emojis}
-                  size={StyleConstants.Font.Size.S}
+                  size='S'
                   fontBold={true}
                 />
               ) : (
@@ -352,7 +352,7 @@ const styles = StyleSheet.create({
   textInput: {
     flex: 1,
     padding: StyleConstants.Spacing.S,
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginRight: StyleConstants.Spacing.S
   },
 
@@ -364,7 +364,7 @@ const styles = StyleSheet.create({
       StyleConstants.Spacing.S
   },
   loading: { flex: 1, alignItems: 'center' },
-  emptyFontSize: { fontSize: StyleConstants.Font.Size.S },
+  emptyFontSize: { ...StyleConstants.FontStyle.S },
   emptyFontBold: {
     fontWeight: StyleConstants.Font.Weight.Bold
   },
@@ -379,7 +379,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: StyleSheet.hairlineWidth
   },
   sectionHeaderText: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     fontWeight: StyleConstants.Font.Weight.Bold,
     textAlign: 'center'
   },
@@ -387,7 +387,7 @@ const styles = StyleSheet.create({
     padding: StyleConstants.Spacing.S
   },
   sectionFooterText: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     textAlign: 'center'
   },
   itemDefault: {
@@ -406,12 +406,12 @@ const styles = StyleSheet.create({
     marginRight: StyleConstants.Spacing.S
   },
   nameWithoutEmoji: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     fontWeight: StyleConstants.Font.Weight.Bold
   },
   itemAccountAcct: { marginTop: StyleConstants.Spacing.XS },
   itemHashtag: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   },
   itemStatus: {
     marginTop: StyleConstants.Spacing.S

src/utils/styles/constants.ts

@@ -2,15 +2,14 @@ const Base = 4
 
 export const StyleConstants = {
   Font: {
-    Size: {
+    Size: { S: 14, M: 16, L: 18 },
-      S: 14,
+    LineHeight: { S: 16, M: 20, L: 24 },
-      M: 16,
+    Weight: { Bold: '600' as '600' }
-      L: 18
   },
-    LineHeight: { M: 20, L: 24 },
+  FontStyle: {
-    Weight: {
+    S: { fontSize: 14, lineHeight: 16 },
-      Bold: '600' as '600'
+    M: { fontSize: 16, lineHeight: 20 },
-    }
+    L: { fontSize: 20, lineHeight: 24 }
   },
 
   Spacing: {
@@ -19,14 +18,8 @@ export const StyleConstants = {
     M: Base * 4,
     L: Base * 6,
     XL: Base * 10,
-    Global: {
+    Global: { PagePadding: Base * 4 }
-      PagePadding: Base * 4
-    }
   },
 
-  Avatar: {
+  Avatar: { S: 36, M: 52, L: 104 }
-    S: 36,
-    M: 52,
-    L: 104
-  }
 }