[Android] Bad fontFamily and color styles merging with 3 Text nesting levels

[jsamr]

Description

Under very specific conditions, nested text styles such as color and fontSize are not applied correctly on Android. Below are screenshots of the same component rendered in Android (left) and iOS (right). Notice the following inconsistencies in Android:

• Text elements in lines 2 to 7 have a wrong fontSize;
• Text elements in line 8 are painted white despite given a non-white color style.

The code to reproduce those screens is provided in the "reproduction" section

React Native version:

System:
    OS: Linux 5.12 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8809G CPU @ 3.10GHz
    Memory: 6.09 GB / 31.28 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.0 - /usr/bin/node
    Yarn: 2.4.0 - /usr/bin/yarn
    npm: 7.16.0 - /usr/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 28.0.3, 29.0.0, 29.0.2, 29.0.3, 30.0.0, 30.0.1, 30.0.3, 31.0.0, 31.0.0
      System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7351085
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: ^0.64.2 => 0.64.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Open this snack
2. Run the Snack on Android

Expected Results

The rendered components should look identical on iOS and Android (see screenshots above).

Snack, code example, screenshot, or link to a repository:

The bug requires a specific set of conditions to happen. The following tests have been performed on the referred snack:

• Remove fontFamily monospace for all styles → could not reproduce bug.
• Remove one Text nesting level (Text → Text → Text) → could not reproduce bug.
• Remove empty text elements (those with children="") → could not reproduce bug.

LINK TO SNACK

NB: I want to stress that the reproduction might look a bit "heavy" in terms of rendered nodes, but try to cut some nodes off and the issue vanishes.

[safaiyeh]

Thanks for the issue & the reproduction @jsamr. I've seen many issues with weird behaviors when it comes to fonts. Labeling the issue correctly for it to be tracked.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.