Skip to content

Conversation

@ehsemloh
Copy link
Contributor

@ehsemloh ehsemloh commented Jan 3, 2025

Summary:

maxFontSizeMultiplier is not available in new architecture. This poses challenges for app developers when managing UI in the setting of large text.

[Bug]: maxFontSizeMultiplier is not being respected

Changelog:

[IOS] [ADDED] - Support maxFontSizeMultiplier in new architecture.

Test Plan:

1. Set maxFontSizeMultiplier in Text

Steps

  1. Set maxFontSizeMultiplier 1.2 to Text (Snippet 1)
  2. Scale the Text size to value greater than 1.2 in Display & Brightness
  3. Start the sample app
...
  <Text maxFontSizeMultiplier ={1.2}>test text</Text> 
...

[Snippet 1]

Expected behavior

Display text as 1.2 sized

2. Propagate maxFontSizeMultiplier in nested Text

Steps

  1. Set maxFontSizeMultiplier 1.2 to container Text
  2. The container Text has Text nodes as children
  3. All children don't have maxFontSizeMultiplier set (Snippet 2)
  4. Scale the Text size to value greater than 1.2 in Display & Brightness
  5. Start the sample app
...
  <Text maxFontSizeMultiplier ={1.2}>
    test text container <Text>nested text one</Text>
    <Text>nested text two</Text>
    <Text>nested text three</Text>
  </Text>
...

[Snippet 2]

Expected behavior

All texts within container Text are displayed as sized 1.2

3. Propagate maxFontSizeMultiplier in nested Text as sub-component

  1. Set maxFontSizeMultiplier 1.2 to container Text
  2. The container Text has TextWrapper as children
  3. TextWrapper contains Text as sub-component
  4. All children / sub-component don't have maxFontSizeMultiplier set (Snippet 3)
  5. Scale the Text size to value greater than 1.2 in Display & Brightness
  6. Start the sample app
...
const TextWrapper = () => <Text>A subcomponent</Text>
...
  <Text maxFontSizeMultiplier ={1.2}>
    test text container  
    <TextWrapper/>
  </Text>
...

[Snippet 3]

Expected behavior

All texts within container Text are displayed as sized 1.2

4. Propagate maxFontSizeMultiplier in nested Text mixed with View

  1. Set maxFontSizeMultiplier 1.2 to container Text
  2. The container Text has Text alongside View as children
  3. All children don't have maxFontSizeMultiplier set (Snippet 4)
  4. Scale the Text size to value greater than 1.2 in Display & Brightness
  5. Start the sample app
...
  <Text maxFontSizeMultiplier ={1.2}>
    test text container
    <View style={{backgroundColor: 'blue', width: 10, height: 10}} />
    <Text>nested text</Text>
  </Text>
...

[Snippet 4]

5. Set maxFontSizeMultiplier in Animated.Text

  1. Set maxFontSizeMultiplier 1.2 to Animated.Text (Snippet 5)
  2. Scale the Text size to value greater than 1.2 in Display & Brightness
  3. Start the sample app
...
  <Animated.Text maxFontSizeMultiplier ={1.2}>animated text</Animated.Text>
...

[Snippet 5]

Expected behavior

Display text as 1.2 sized

6. Set maxFontSizeMultiplier 0 in nested Text override parent/global default

  1. Set maxFontSizeMultiplier 1.2 to container Text
  2. The container Text has Text nodes as children
  3. One child set maxFontSizeMultiplier 0
  4. Rest children don't have maxFontSizeMultiplier set (Snippet 6)
  5. Scale the Text size to value greater than 1.2 in Display & Brightness
  6. Start the sample app
...
  <Text maxFontSizeMultiplier ={1.2}>
    test text container <Text>{'nested text one\n'}</Text>
    <Text maxFontSizeMultiplier={0}>{'nested text two\n'}</Text>
    <Text>{'nested text three\n'}</Text>
  </Text>
...

[Snippet 6]

Expected behavior

Display text as system size for 'nested text two\n'
Display as 1.2 sized for the rest of the text

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jan 3, 2025
@ehsemloh ehsemloh force-pushed the fix/support-maxfontsizemultiplier branch from e96ff0c to 6e8e787 Compare January 11, 2025 03:45
@ehsemloh ehsemloh force-pushed the fix/support-maxfontsizemultiplier branch from 6e8e787 to 52f0c0a Compare January 11, 2025 04:52
@ehsemloh ehsemloh marked this pull request as ready for review January 11, 2025 04:56
@facebook-github-bot facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jan 11, 2025
@ehsemloh
Copy link
Contributor Author

Seems already addressed by #47614, hence close

@ehsemloh ehsemloh closed this Jan 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants