Skip to content

Nested Text on Android broken with fontWeight and fontStyle #34554

Closed
@danilobuerger

Description

@danilobuerger

Description

When nesting Text

<Text style={{fontWeight: 'bold'}}>
  bold<Text style={{fontStyle: 'italic'}}>bold & italic</Text>bold
</Text>

on Android, the font weight will not be applied to the inner Text:

Screenshot 2022-09-01 at 08 16 27

on iOS it renders as expected:

Screenshot 2022-09-01 at 08 25 01

Version

0.69.5 (also 0.70.0 rc4)

Output of npx react-native info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 124.08 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
    Watchman: 2022.08.15.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/danilo/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8193401
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.16 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0 
    react-native: 0.69.5 => 0.69.5 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

  1. npx react-native init rn69 --version 0.69.5
  2. Apply this diff:
diff --git a/App.js b/App.js
index f85f38d..5fd3491 100644
--- a/App.js
+++ b/App.js
@@ -75,7 +75,9 @@ const App: () => Node = () => {
             screen and then come back to see your edits.
           </Section>
           <Section title="See Your Changes">
-            <ReloadInstructions />
+            <Text style={{fontWeight: 'bold'}}>
+              bold<Text style={{fontStyle: 'italic'}}>bold & italic</Text>bold
+            </Text>
           </Section>
           <Section title="Debug">
             <DebugInstructions />
  1. Run on Android. Notice that the text "bold & italic" is not bold, just italic.

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

https://snack.expo.dev/gomG4vYFh
(bug only shows on Android)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs: Triage 🔍Platform: AndroidAndroid applications.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions