Nested Text components interact inconsistently when using bold and font family

[cboar]

🐛 Bug Report

I have two Text components:

• One uses a style with a custom fontFamily. This font family has separate font files for bold and italic.
• The other uses a bold style via fontWeight: 'bold'.

The order in which these two components are nested seems to change how the resulting font is rendered.

This screenshot shows from top to bottom:

• The fontFamily component alone. The font is correct: GOOD.
• The fontFamily component inside the bold component. The font is changed to the appropriate bold font associated with that family: GOOD.
• The bold component inside the fontFamily component. Here, the regular fontFamily is chosen and simply thickened, rather than changing the font: BAD!

The last option is the most natural way to compose it, but does not result in the desired behavior. Additionally, this inconsistency does not appear when using italic font (with fontStyle: 'italic').

To Reproduce

See code below, setup is minimal.

Expected Behavior

When using other font styles such as italic, the result is the same no matter the order in which the two are nested. Naturally, being able to compose these Text components as:

<FontFamily>
    <Text>Hello, welcome to my</Text>
    <BoldText> fantastic </BoldText>
    <Text>example!</Text>
</FontFamily>

is much preferred over

<Text><FontFamily>Hello, welcome to my</FontFamily></Text>
<BoldText><FontFamily> fantastic </FontFamily></BoldText>
<Text><FontFamily>example!</FontFamily></Text>

Code Example

Render the following into any view:

render() {
   const bold = { fontWeight: 'bold' };
   const family = {
     color: 'black',
     fontSize: 16,
     fontFamily: 'Neue Haas Grotesk Display Std' // or other font that has a different font file for bold
   };

   return <View>

     <Text style={family}>{ 'Font family regular. Works great!\n' }</Text>

     <Text style={bold}>
       <Text style={family}>{ 'Font family bold. Looks good, its a different font!\n' }</Text>
     </Text>

     <Text style={family}>
       <Text style={bold}>{ 'Uh oh! Swapping the bold and family just thickens the regular font!\n' }</Text>
     </Text>

   </View>;
}

Environment

I am running this on Android, I am not sure if this behavior exists on iOS.

  React Native Environment Info:
    System:
      OS: Linux 5.0 Arch Linux undefined
      CPU: (8) x64 Intel(R) Core(TM) i7-3820 CPU @ 3.60GHz
      Memory: 8.49 GB / 15.61 GB
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 11.12.0 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/bin/yarn
      npm: 6.7.0 - /usr/local/bin/npm
    SDKs:
      Android SDK:
        API Levels: 27, 28
        Build Tools: 27.0.3, 28.0.3
        System Images: android-16 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom
    npmPackages:
      react: 16.5.0 => 16.5.0 
      react-native: ^0.57.8 => 0.57.8 

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.59 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running `react-native info` on a project using the latest release.

[cboar]

Found issue #20398, I suppose this is a duplicate.