React-native: [Android] Custom fonts not applied on nested text

[mikeygee]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] 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.
[email protected]

[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.
[email protected]

[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... :(

[yass0016]

Move to flutter, react native will never be stable

[ospiewok]

We've found a solution, which worked in our case.
You have to set the style properties of your nested text component, so that the parent style properties do not have an effect on your nested text.

In our case we had a custom nested text inside a common text component and we were missing to set the fontWeight style property inside our nested custom text.
This was only an Android issue.

<Text style={{ fontFamily: baseFont, fontSize: 42, lineHeight: 48, fontWeight: '700', color: colors.white, }} numberOfLines={1}> <Text style={{ fontFamily:'our-custom-icons', fontWeight:'normal', color:'white', lineHeight: 50 }}>{'\uE921'} </Text> Some custom text follow up!} </Text>

Anyway, this will not solve the reported issue above, but might help hopefully some of you as well.

[lewie9021]

I've written a Medium post that goes more in depth, detailing my findings and an interim fix :) https://medium.com/@lewie9021/custom-fonts-in-react-native-85d814ca084#a01b

[rikur]

@lewie9021 thanks for sharing. Do you think this could be turned into an NPM package as a replacement for Text from RN?

[lewie9021]

I don't see why it couldn't be, but I'd prefer if the bug was fixed instead of releasing an NPM package that patches it. I just felt that it was pretty basic behaviour that should at least have a workaround for now.

[rikur]

Alright, I'll try to strip away the parts that don't apply to me, like Contexes and stuff. Thanks again!

[lewie9021]

You'll still need a form of Context. The FontFamilyContext is used to collect the styling as you nest, only applying the font family when a leaf Text component is encountered. Without it, if a containing Text component applied a bold font weight, the nested leaf Text component wouldn't know that it should apply a bold font family variant (unless overwritten through the component tree or directly).

[rikur]

I see. Thanks for the heads-up -- I might just have to wait for this to be fixed in RN then as I don't use Contexes and prefer to keep things that way.

[lewie9021]

I can understand not wanting to use Context :) In my article, I do briefly talk about another approach that uses React.Children.map and React.cloneElement to automatically delegate the props down through the tree. The main issue I had with the approach was that if custom Text components were used when nesting (e.g. Heading), it's not guaranteed to pass through the styling. As a result, it could become difficult to track down why the correct font variation isn't applied.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[rikur]

Still a bug AFAIK

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[NappyPirate]

Still an issue

[harshit-prog]

Still not fixed...

[qstrauss]

Hey there,

It seems that a Text with custom font can't be nested in another Text with custom font, but they can be nested together in a simple react-native Text to fix the issue :

Broken :

<Text style={{fontFamily: 'customFontFamily-Bold'}}>
      Custom font text
      <Text style={{fontFamily: 'customFontFamily-LightItalic'}}>Nested custom font text</Text>
</Text>

Works for me :

<Text>
      <Text style={{fontFamily: 'customFontFamily-Bold'}}>
            It seems to be
      </Text>
      <Text style={{fontFamily: 'customFontFamily-LightItalic'}}>
            the solution
      </Text>
</Text>

[rikur]

@qstrauss thanks for the heads up, I'll give this a go

[Youngdi]

Hi Guys. I figured that it is not only font family has the bug. I think all the customize style in nested text all has issue. Also it happens when it has large the nested texts. You can test it by changing new Array(number).

Here is the simple text code with fontSize and I just tested it on React Native API website.

import React, { Component } from 'react'
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  View,
  ScrollView
} from 'react-native'

const TEST_DATA = new Array(100).fill(1).map(i => 'i love to code')
export default class App extends Component {
  renderVerse = (verseItem) => 
    <Text style={{ fontSize: 26}}>{verseItem}</Text>
  renderNumber = (verseItem) =>
    <Text style={{ fontSize: 26}}>{verseItem}</Text>
  render() {
    return (
      <View style={[styles.container, styles.horizontal]}>
        <ScrollView>
           <Text>
              {TEST_DATA.map((verseItem, i) => [
                this.renderNumber(i),
                this.renderVerse(verseItem),
              ])}
           </Text>
         </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10
  }
})

[brambang]

Hey there,

It seems that a Text with custom font can't be nested in another Text with custom font, but they can be nested together in a simple react-native Text to fix the issue :

Broken :

<Text style={{fontFamily: 'customFontFamily-Bold'}}>
      Custom font text
      <Text style={{fontFamily: 'customFontFamily-LightItalic'}}>Nested custom font text</Text>
</Text>

Works for me :

<Text>
      <Text style={{fontFamily: 'customFontFamily-Bold'}}>
            It seems to be
      </Text>
      <Text style={{fontFamily: 'customFontFamily-LightItalic'}}>
            the solution
      </Text>
</Text>

yes it works for me too.
thanks!

[t-ricci-enhancers]

Same problem with two custom fonts...

I need to be able to do:

<Text style={{fontFamily: 'Ubuntu-Regular'}}>
  <Text style={{fontFamily: 'Icons-Font'}}>□</Text>
  Text prepended by icon
</Text>

[BillTuan]

Works for me by adding fontWeight: 'normal' & fontStyle: 'normal'

<Text style={{ fontFamily: 'Quicksand-Medium', fontWeight: 'normal',  fontStyle: 'normal' }}>
      text abc
      <Text style={{ fontFamily: 'Gilroy-Bold' }}>Nested font text</Text>
</Text>

[hmol]

Works for me by adding fontWeight: 'normal' & fontStyle: 'normal'

<Text style={{ fontFamily: 'Quicksand-Medium', fontWeight: 'normal',  fontStyle: 'normal' }}>
      text abc
      <Text style={{ fontFamily: 'Gilroy-Bold' }}>Nested font text</Text>
</Text>

I hade the same problem, only on Android phones. The solution metioned above, solved it for me. Having a parent element with fontStyle: "normal" was what fixed it.

[muhammadwafa]

2020 still cant style nested text, this properties does not work in nested Text:

padding, margin, borderColor, borderWidth, borderRadius, lineheight, top, bottom, left, right, ...

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[DmytroT]

The issue has not been fixed. It looks like guys just ignore that.