react-native-global-props: fontFamily cannot be overriden

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.

About this issue

  • Original URL
  • State: open
  • Created 6 years ago
  • Reactions: 3
  • Comments: 15 (1 by maintainers)

Most upvoted comments

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]);
};

It does not work with current react-native: 0.62.2

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]);
};

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