react-native icon indicating copy to clipboard operation
react-native copied to clipboard

Nested Text on Android broken with fontWeight and fontStyle

Open danilobuerger opened this issue 3 years ago • 2 comments

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)

danilobuerger avatar Sep 01 '22 06:09 danilobuerger

some of my notes on the ReactAndroid APIs https://github.com/facebook/react-native/issues/30375#issuecomment-781494859 https://github.com/facebook/react-native/pull/29117

fabOnReact avatar Sep 07 '22 00:09 fabOnReact

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[bot] avatar Mar 06 '23 06:03 github-actions[bot]

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

github-actions[bot] avatar Mar 25 '23 18:03 github-actions[bot]