Try to fix font size does not adapat

src/components/Parse/Emojis.tsx

@@ -1,5 +1,6 @@
 import { getSettingsFontsize } from '@utils/slices/settingsSlice'
-import { adaptiveScale, StyleConstants } from '@utils/styles/constants'
+import { StyleConstants } from '@utils/styles/constants'
+import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
 import { StyleSheet, Text } from 'react-native'

src/components/Parse/HTML.tsx

@@ -5,8 +5,9 @@ import ParseEmojis from '@components/Parse/Emojis'
 import { useNavigation, useRoute } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { getSettingsFontsize } from '@utils/slices/settingsSlice'
-import { adaptiveScale, StyleConstants } from '@utils/styles/constants'
+import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
+import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { LinearGradient } from 'expo-linear-gradient'
 import React, { useCallback, useState } from 'react'

src/i18n/en/screens/meSettingsFontsize.ts

@@ -2,6 +2,8 @@ export default {
   heading: 'Toot font size',
   content: {
     showcase: 'Example toot',
+    demo:
+    '<p>This is a demo toot😊. You can choose from several options from below.<br /><br />This setting only affects the main content of toots, but not other font sizes.</p>',
     availableSizes: 'Available sizes',
     sizes: { S: 'S', M: 'M - Default', L: 'L', XL: 'XL', XXL: 'XXL' }
   }

src/i18n/zh-Hans/screens/meSettingsFontsize.ts

@@ -2,6 +2,8 @@ export default {
   heading: '嘟文字号',
   content: {
     showcase: '嘟文示例',
+    demo:
+      '<p>这是一条测试用的嘟文😊。以下是可供选择的字号，从小号至超大号。<br /><br />这个设置仅会调整嘟文的正文字号，不影响其它字号。</p>',
     availableSizes: '可选字号',
     sizes: { S: '小号', M: '默认', L: '大号', XL: '特大号', XXL: '超大号' }
   }

src/screens/Tabs/Me/Fontsize.tsx

@@ -8,7 +8,8 @@ import {
   getSettingsFontsize,
   SettingsState
 } from '@utils/slices/settingsSlice'
-import { adaptiveScale, StyleConstants } from '@utils/styles/constants'
+import { StyleConstants } from '@utils/styles/constants'
+import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -53,8 +54,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
     reblogged: false,
     muted: false,
     bookmarked: false,
-    content:
-      '<p>- tooot supports multiple accounts<br />- tooot supports browsing external instance<br />- tooot aims to support multiple languages</p>',
+    content: t('content.demo'),
     reblog: null,
     application: {
       name: 'tooot',
@@ -77,6 +77,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
       <>
         {([-1, 0, 1, 2, 3] as [-1, 0, 1, 2, 3]).map(size => (
           <Text
+            key={size}
             style={[
               styles.size,
               {

src/utils/styles/constants.ts

@@ -1,15 +1,3 @@
-import { Dimensions } from 'react-native'
-
-const { width } = Dimensions.get('screen')
-
-const guidelineBaseWidth = 375
-// const guidelineBaseHeight = 667
-
-const scale = (size: number) => (width / guidelineBaseWidth) * size
-// const verticalScale = (size: number) => (height / guidelineBaseHeight) * size
-export const adaptiveScale = (size: number, factor: number = 0) =>
-  size + (scale(size) - size) * factor
-
 const Base = 4
 
 export const StyleConstants = {

src/utils/styles/scaling.ts

@@ -0,0 +1,13 @@
+import { Dimensions } from 'react-native'
+
+const { width } = Dimensions.get('screen')
+
+const guidelineBaseWidth = 375
+// const guidelineBaseHeight = 667
+
+const scale = (size: number) => (width / guidelineBaseWidth) * size
+// const verticalScale = (size: number) => (height / guidelineBaseHeight) * size
+const adaptiveScale = (size: number, factor: number = 0) =>
+  size + (scale(size) - size) * factor
+
+export { adaptiveScale }