[Android] Custom fonts not applied on nested text

[mikeygee]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 557.12 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.4 - /usr/local/bin/node
Yarn: 1.3.2 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Android Studio: 3.0 AI-171.4408382
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

Description

On Android only, when nesting text elements, and applying custom fonts to both the outer and inner text elements, the inner text does not apply the font, it falls back to default. This issue does not occur when using system fonts such as serif or monospace, it only happens when using two custom fonts. One custom font nested with a system font works fine. I am not sure if it is a problem with these specific fonts, but it works fine in iOS.

Reproducible Demo

https://github.com/mikeygee/AndroidFontIssue - I made a repo with a couple custom fonts added to assets/fonts directory. In App.js, there are several combinations to demonstrate the issue.

<View style={styles.container}>
    <Text style={{fontFamily: 'customthickfont', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'customthickfont', fontSize: 20}}>Nested</Text>
    </Text>
    <Text style={{fontFamily: 'customthickfont', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'Roboto', fontSize: 20}}>Nested</Text>
    </Text>
    <Text style={{fontFamily: 'customthickfont', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'serif', fontSize: 20}}>Nested</Text>
    </Text>
    <Text style={{fontFamily: 'customitalicfont', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'customitalicfont', fontSize: 20}}>Nested</Text>
    </Text>
    <Text style={{fontFamily: 'customitalicfont', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'customthickfont', fontSize: 20}}>Nested</Text>
    </Text>
    <Text style={{fontFamily: 'serif', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'customthickfont', fontSize: 20}}>Nested</Text>
    </Text>
    <Text style={{fontFamily: 'serif', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'monospace', fontSize: 20}}>Nested</Text>
    </Text>
</View>

[OmriSama]

+1, I think I'm running into the same issue :/

[gurol]

I have the same problem in Android (it works in iOS).

[OmriSama]

I think I got this to work by enabling font scaling?

EDIT: Yes. I was using Expo and initially disabled font scaling. Enabling font scaling fixed everything (eventually).

[duongntb94]

I have the same issue in Android

[rikur]

+1, works fine on iOS but Android ignores the fontFamily of nested elements.

FYI: I'm using react-native 0.57.2

[creativefctr]

Same issue here!

[nzliu]

Getting the same issue.

[rikur]

Still a bug on latest react-native.

[zackary-moore]

Same issue here as well.

[OmriSama]

@rikur @chalked do you guys have font scaling disabled?

[luukschipperheyn]

Same here - Enabling font scaling does not solve it for me.
react-native@0.57.8

[jdgarcia1381]

Same problem here. fontFamily is being ignored on nested Text and I can't find a solution for this. Enabling font scaling doesn't solve it for me. If I apply the same fontFamily on nested Text, it is ignored.
react-native@0.57.7

[DmytroT]

any news?
it works in <=0.49.5 versions.
and it doesn't work since 0.50 version.
it is important for our app and we can't use latest RN versions anymore... :(