fontFamily cannot be overriden

[thomasttvo]

const customTextProps = {
  style: {
    fontFamily: 'Nunito Sans'
  }
};

setCustomText(customTextProps);

When using the Inspector, the Text component's fontFamily still shows up as System.
Apparently, react-native automatically prepended {fontFamily: 'System', fontSize:16, color:'#000'} to Text's style prop, which overrides our own custom style prop.

[mahesh1996]

@thomasttvo Are you passing an array of style to Text component?

[thomasttvo]

@mahesh1996 this issue, however, happens even when I'm not using an array

[mahesh1996]

@thomasttvo I'm looking into it.

[mahesh1996]

@thomasttvo It's working fine. Have you added rnmp in package.json to tell RN where your font is located?

[thomasttvo]

@mahesh1996 yes, my font works in general, just not with global props. It works when I add fontFamily as inline style or in Stylesheet, but when I set it with global-props, the fontFamily becomes System

[flikQ]

Did we never find a solution to this?

[ex3ndr]

Work around:

let sourceRender = (Text as any).render;
Text.render = function render(props: any, ref: any) {
   return sourceRender.apply(this, [{ ...props, style: patchStyles(props.style) }, ref]);
};

[flikQ]

@ex3ndr thanks, however I think you might need to elaborate on this some what. Seems a little vague.

[flikQ]

No elaboration @ex3ndr? It would be helpful if you could give a little more info of the context and placement of this snippet. @mahesh1996 any ideas? Or maybe has this library gone stale?

[mahesh1996]

You can place above snippet given by @ex3ndr in index.js file of your project. It will modify render method of Text component. But I couldn't get where is patchStyles function defined.

[flikQ]

Still nothing @ex3ndr ?

Going to ditch this library and try something else.

[anshul-kai]

Here's a version of the code from @ex3ndr that works in 2019

const sourceRender = Text.render;
Text.render = function render(props: any, ref: any) {
  return sourceRender.apply(this, [{ ...props, style: [{ fontFamily: 'CourierNewPSMT' }, props.style] }, ref]);
};

[Ajackster]

Tested react-native-global-props 1.1.5 with react-native 0.59.9 and it seems to be working. Are you guys still seeing this issue? If so, can someone give me a repro?