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
2020-12-29 00:21:05 +01:00 · 2020-12-29 00:21:05 +01:00 · 4f0621bbff
parent 83b725b58d
commit 4f0621bbff
39 changed files with 110 additions and 121 deletions
--- a/App.tsx
+++ b/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'
--- a/src/components/Header/Left.tsx
+++ b/src/components/Header/Left.tsx
@ -57,7 +57,7 @@ const styles = StyleSheet.create({
    borderRadius: 100
  },
  text: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
  }
 })

--- a/src/components/Header/Right.tsx
+++ b/src/components/Header/Right.tsx
@ -93,7 +93,7 @@ const styles = StyleSheet.create({
    borderRadius: 100
  },
  text: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
  }
 })

--- a/src/components/Menu/Header.tsx
+++ b/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
  }
 })
--- a/src/components/Menu/Row.tsx
+++ b/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
--- a/src/components/ParseContent.tsx
+++ b/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
-          content={children.toString()}
-          emojis={emojis}
-          size={StyleConstants.Font.Size[size]}
-        />
+        <Emojis content={children.toString()} emojis={emojis} 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
                  }}
                >
--- a/src/components/Timelines/Timeline/Empty.tsx
+++ b/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
  }
--- a/src/components/Timelines/Timeline/Shared/Actioned.tsx
+++ b/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>
--- a/src/components/Timelines/Timeline/Shared/Actions.tsx
+++ b/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
            }}
          >
--- a/src/components/Timelines/Timeline/Shared/Attachment.tsx
+++ b/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
  }
 })

--- a/src/components/Timelines/Timeline/Shared/Attachment/Unsupported.tsx
+++ b/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
  }
--- a/src/components/Timelines/Timeline/Shared/Emojis.tsx
+++ b/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,
-      height: size,
-      paddingTop: 1,
-      marginBottom: -1
+      width: StyleConstants.Font.Size[size],
+      height: StyleConstants.Font.Size[size],
+      marginBottom: -2 // hacking
    }
  })

@ -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%' }}
-              />
-            </View>
+            <Image
+              key={i}
+              resizeMode='contain'
+              source={{ uri: emojis[emojiIndex].url }}
+              style={[styles.image]}
+            />
          )
        } 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
--- a/src/components/Timelines/Timeline/Shared/End.tsx
+++ b/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
  }
 })
--- a/src/components/Timelines/Timeline/Shared/HeaderConversation.tsx
+++ b/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
--- a/src/components/Timelines/Timeline/Shared/HeaderDefault.tsx
+++ b/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: {
-    flexDirection: 'row'
+  nameAndAccount: {
+    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: {
--- a/src/components/Timelines/Timeline/Shared/HeaderNotification.tsx
+++ b/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: {
--- a/src/components/Timelines/Timeline/Shared/Poll.tsx
+++ b/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
  }
 })

--- a/src/components/toast.tsx
+++ b/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
  }
 })
--- a/src/screens/Me/Root/Login.tsx
+++ b/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
--- a/src/screens/Me/Settings.tsx
+++ b/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
  }
 })
--- a/src/screens/Shared/Account/Information/Account.tsx
+++ b/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
          >
--- a/src/screens/Shared/Account/Information/Actions.tsx
+++ b/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
  }
 })

--- a/src/screens/Shared/Account/Information/Created.tsx
+++ b/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', {
--- a/src/screens/Shared/Account/Information/Name.tsx
+++ b/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
              }}
            >
--- a/src/screens/Shared/Account/Information/Stats.tsx
+++ b/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
  }
 })

--- a/src/screens/Shared/Account/Nav.tsx
+++ b/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
              }}
            >
--- a/src/screens/Shared/Announcements.tsx
+++ b/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: {
--- a/src/screens/Shared/Compose.tsx
+++ b/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
  }
 })

--- a/src/screens/Shared/Compose/Actions.tsx
+++ b/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
  }
 })
--- a/src/screens/Shared/Compose/Attachments.tsx
+++ b/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,
--- a/src/screens/Shared/Compose/EditAttachment.tsx
+++ b/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
  }
 })
--- a/src/screens/Shared/Compose/Emojis.tsx
+++ b/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,
--- a/src/screens/Shared/Compose/Poll.tsx
+++ b/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: {
--- a/src/screens/Shared/Compose/Root.tsx
+++ b/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
  },
--- a/src/screens/Shared/Compose/SpoilerInput.tsx
+++ b/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,
--- a/src/screens/Shared/Compose/TextInput.tsx
+++ b/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
  }
 })

--- a/src/screens/Shared/ImagesViewer.tsx
+++ b/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
  }
 })

--- a/src/screens/Shared/Search.tsx
+++ b/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
--- a/src/utils/styles/constants.ts
+++ b/src/utils/styles/constants.ts
@ -2,15 +2,14 @@ const Base = 4

 export const StyleConstants = {
  Font: {
-    Size: {
-      S: 14,
-      M: 16,
-      L: 18
-    },
-    LineHeight: { M: 20, L: 24 },
-    Weight: {
-      Bold: '600' as '600'
-    }
+    Size: { S: 14, M: 16, L: 18 },
+    LineHeight: { S: 16, M: 20, L: 24 },
+    Weight: { Bold: '600' as '600' }
+  },
+  FontStyle: {
+    S: { fontSize: 14, lineHeight: 16 },
+    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: {
-      PagePadding: Base * 4
-    }
+    Global: { PagePadding: Base * 4 }
  },

-  Avatar: {
-    S: 36,
-    M: 52,
-    L: 104
-  }
+  Avatar: { S: 36, M: 52, L: 104 }
 }