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

anshul-kai on Jun 7, 2019

It does not work with current react-native: 0.62.2

pke on May 20, 2020

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

ex3ndr on Jul 27, 2018

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

dioi2000 on Jan 20, 2022