Ajackster/react-native-global-props

fontFamily cannot be overriden

Opened this issue · 15 comments

thomasttvo commented 
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 commented

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

thomasttvo commented

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

mahesh1996 commented

@thomasttvo I'm looking into it.

mahesh1996 commented

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

thomasttvo commented

@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 commented

Did we never find a solution to this?

ex3ndr commented

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]);
};
  • 👍2
flikQ commented

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

flikQ commented

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 commented

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 commented

Still nothing @ex3ndr ?

Going to ditch this library and try something else.

anshul-kai commented

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]);
};
  • 👍2
  • ❤️3
Ajackster commented

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?

pke commented

It does not work with current react-native: 0.62.2

  • 👍2
dioi2000 commented

It does not work with current react-native: 0.62.2
try this - https://www.npmjs.com/package/react-native-simple-default-props

  • 👍1