Added font size settings

src/components/Instance/Info.tsx

@@ -1,8 +1,6 @@
-import { ParseHTML } from '@components/Parse'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { PlaceholderLine } from 'rn-placeholder'
 
@@ -15,19 +13,15 @@ export interface Props {
 
 const InstanceInfo = React.memo(
   ({ style, header, content, potentialWidth }: Props) => {
-    const { t } = useTranslation('componentInstance')
     const { theme } = useTheme()
 
     return (
       <View style={[styles.base, style]}>
         <Text style={[styles.header, { color: theme.primary }]}>{header}</Text>
         {content ? (
-          <ParseHTML
-            content={content}
-            size={'M'}
-            numberOfLines={5}
-            expandHint={t('server.information.description.expandHint')}
-          />
+          <Text style={[styles.content, { color: theme.primary }]}>
+            {content}
+          </Text>
         ) : (
           <PlaceholderLine
             width={
@@ -58,6 +52,9 @@ const styles = StyleSheet.create({
     ...StyleConstants.FontStyle.S,
     fontWeight: StyleConstants.Font.Weight.Bold,
     marginBottom: StyleConstants.Spacing.XS
+  },
+  content: {
+    ...StyleConstants.FontStyle.M
   }
 })
 

src/components/Parse/Emojis.tsx

@@ -1,8 +1,10 @@
-import { StyleConstants } from '@utils/styles/constants'
+import { getSettingsFontsize } from '@utils/slices/settingsSlice'
+import { adaptiveScale, StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
 import { StyleSheet, Text } from 'react-native'
 import FastImage from 'react-native-fast-image'
+import { useSelector } from 'react-redux'
 
 const regexEmoji = new RegExp(/(:[A-Za-z0-9_]+:)/)
 
@@ -10,26 +12,44 @@ export interface Props {
   content: string
   emojis?: Mastodon.Emoji[]
   size?: 'S' | 'M' | 'L'
+  adaptiveSize?: boolean
   fontBold?: boolean
 }
 
 const ParseEmojis = React.memo(
-  ({ content, emojis, size = 'M', fontBold = false }: Props) => {
+  ({
+    content,
+    emojis,
+    size = 'M',
+    adaptiveSize = false,
+    fontBold = false
+  }: Props) => {
+    const adaptiveFontsize = useSelector(getSettingsFontsize)
+    const adaptedFontsize = adaptiveScale(
+      StyleConstants.Font.Size[size],
+      adaptiveSize ? adaptiveFontsize : 0
+    )
+    const adaptedLineheight = adaptiveScale(
+      StyleConstants.Font.LineHeight[size],
+      adaptiveSize ? adaptiveFontsize : 0
+    )
+
     const { mode, theme } = useTheme()
     const styles = useMemo(() => {
       return StyleSheet.create({
         text: {
           color: theme.primary,
-          ...StyleConstants.FontStyle[size],
+          fontSize: adaptedFontsize,
+          lineHeight: adaptedLineheight,
           ...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold })
         },
         image: {
-          width: StyleConstants.Font.Size[size],
-          height: StyleConstants.Font.Size[size],
-          transform: [{ translateY: size === 'L' ? -3 : -1 }]
+          width: adaptedFontsize,
+          height: adaptedFontsize,
+          transform: [{ translateY: -2 }]
         }
       })
-    }, [mode])
+    }, [mode, adaptiveFontsize])
 
     return (
       <Text style={styles.text}>
@@ -50,6 +70,7 @@ const ParseEmojis = React.memo(
                     {/* When emoji starts a paragraph, lineHeight will break */}
                     {i === 0 ? <Text> </Text> : null}
                     <FastImage
+                      key={adaptiveFontsize}
                       source={{ uri: emojis[emojiIndex].url }}
                       style={styles.image}
                     />

src/components/Parse/HTML.tsx

@@ -4,7 +4,8 @@ import openLink from '@components/openLink'
 import ParseEmojis from '@components/Parse/Emojis'
 import { useNavigation, useRoute } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
-import { StyleConstants } from '@utils/styles/constants'
+import { getSettingsFontsize } from '@utils/slices/settingsSlice'
+import { adaptiveScale, StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { LinearGradient } from 'expo-linear-gradient'
@@ -12,6 +13,7 @@ import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform, Pressable, Text, View } from 'react-native'
 import HTMLView from 'react-native-htmlview'
+import { useSelector } from 'react-redux'
 
 // Prevent going to the same hashtag multiple times
 const renderNode = ({
@@ -19,7 +21,8 @@ const renderNode = ({
   theme,
   node,
   index,
-  size,
+  adaptedFontsize,
+  adaptedLineheight,
   navigation,
   mentions,
   tags,
@@ -30,7 +33,8 @@ const renderNode = ({
   theme: any
   node: any
   index: number
-  size: 'S' | 'M' | 'L'
+  adaptedFontsize: number
+  adaptedLineheight: number
   navigation: StackNavigationProp<Nav.TabLocalStackParamList>
   mentions?: Mastodon.Mention[]
   tags?: Mastodon.Tag[]
@@ -52,7 +56,8 @@ const renderNode = ({
               key={index}
               style={{
                 color: theme.blue,
-                ...StyleConstants.FontStyle[size]
+                fontSize: adaptedFontsize,
+                lineHeight: adaptedLineheight
               }}
               onPress={() => {
                 analytics('status_hashtag_press')
@@ -79,7 +84,8 @@ const renderNode = ({
               key={index}
               style={{
                 color: accountIndex !== -1 ? theme.blue : undefined,
-                ...StyleConstants.FontStyle[size]
+                fontSize: adaptedFontsize,
+                lineHeight: adaptedLineheight
               }}
               onPress={() => {
                 analytics('status_mention_press')
@@ -108,8 +114,9 @@ const renderNode = ({
             key={index}
             style={{
               color: theme.blue,
-              ...StyleConstants.FontStyle[size],
-              alignItems: 'center'
+              alignItems: 'center',
+              fontSize: adaptedFontsize,
+              lineHeight: adaptedLineheight
             }}
             onPress={async () => {
               analytics('status_link_press')
@@ -125,9 +132,9 @@ const renderNode = ({
               <Icon
                 color={theme.blue}
                 name='ExternalLink'
-                size={StyleConstants.Font.Size[size]}
+                size={adaptedFontsize}
                 style={{
-                  transform: [{ translateY: size === 'L' ? -3 : -1 }]
+                  transform: [{ translateY: -2 }]
                 }}
               />
             ) : null}
@@ -146,6 +153,7 @@ const renderNode = ({
 export interface Props {
   content: string
   size?: 'S' | 'M' | 'L'
+  adaptiveSize?: boolean
   emojis?: Mastodon.Emoji[]
   mentions?: Mastodon.Mention[]
   tags?: Mastodon.Tag[]
@@ -158,6 +166,7 @@ export interface Props {
 const ParseHTML: React.FC<Props> = ({
   content,
   size = 'M',
+  adaptiveSize = false,
   emojis,
   mentions,
   tags,
@@ -166,6 +175,16 @@ const ParseHTML: React.FC<Props> = ({
   expandHint,
   disableDetails = false
 }) => {
+  const adaptiveFontsize = useSelector(getSettingsFontsize)
+  const adaptedFontsize = adaptiveScale(
+    StyleConstants.Font.Size[size],
+    adaptiveSize ? adaptiveFontsize : 0
+  )
+  const adaptedLineheight = adaptiveScale(
+    StyleConstants.Font.LineHeight[size],
+    adaptiveSize ? adaptiveFontsize : 0
+  )
+
   const navigation = useNavigation<
     StackNavigationProp<Nav.TabLocalStackParamList>
   >()
@@ -183,7 +202,8 @@ const ParseHTML: React.FC<Props> = ({
         theme,
         node,
         index,
-        size,
+        adaptedFontsize,
+        adaptedLineheight,
         navigation,
         mentions,
         tags,
@@ -199,6 +219,7 @@ const ParseHTML: React.FC<Props> = ({
           content={children.toString()}
           emojis={emojis}
           size={size}
+          adaptiveSize={adaptiveSize}
         />
       )
     } else {
@@ -208,7 +229,6 @@ const ParseHTML: React.FC<Props> = ({
   const rootComponent = useCallback(
     ({ children }) => {
       const { t } = useTranslation('componentParse')
-      const lineHeight = StyleConstants.Font.LineHeight[size]
 
       const [expandAllow, setExpandAllow] = useState(false)
       const [expanded, setExpanded] = useState(false)
@@ -234,10 +254,6 @@ const ParseHTML: React.FC<Props> = ({
             children={children}
             onTextLayout={onTextLayout}
             numberOfLines={expanded ? 999 : numberOfLines + 1}
-            style={{
-              ...StyleConstants.FontStyle[size],
-              color: theme.primary
-            }}
           />
           {expandAllow ? (
             <Pressable
@@ -249,7 +265,7 @@ const ParseHTML: React.FC<Props> = ({
               style={{
                 marginTop: expanded
                   ? 0
-                  : -lineHeight * (numberOfLines === 0 ? 1 : 2)
+                  : -adaptedLineheight * (numberOfLines === 0 ? 1 : 2)
               }}
             >
               <LinearGradient
@@ -257,10 +273,7 @@ const ParseHTML: React.FC<Props> = ({
                   theme.backgroundGradientStart,
                   theme.backgroundGradientEnd
                 ]}
-                locations={[
-                  0,
-                  lineHeight / (StyleConstants.Font.Size[size] * 5)
-                ]}
+                locations={[0, adaptedLineheight / (adaptedFontsize * 5)]}
                 style={{
                   paddingTop: StyleConstants.Font.Size.S * 2,
                   paddingBottom: StyleConstants.Font.Size.S

src/components/Timeline/Shared/Content.tsx

@@ -28,6 +28,7 @@ const TimelineContent = React.memo(
               <ParseHTML
                 content={status.spoiler_text}
                 size={highlighted ? 'L' : 'M'}
+                adaptiveSize
                 emojis={status.emojis}
                 mentions={status.mentions}
                 tags={status.tags}
@@ -38,6 +39,7 @@ const TimelineContent = React.memo(
             <ParseHTML
               content={status.content}
               size={highlighted ? 'L' : 'M'}
+              adaptiveSize
               emojis={status.emojis}
               mentions={status.mentions}
               tags={status.tags}
@@ -50,6 +52,7 @@ const TimelineContent = React.memo(
           <ParseHTML
             content={status.content}
             size={highlighted ? 'L' : 'M'}
+            adaptiveSize
             emojis={status.emojis}
             mentions={status.mentions}
             tags={status.tags}