react-nativereact-native-iosreact-native-text

React Native Text.defaultProps does not exist and creating it doesn't work either


I'm new to React Native (0.59.3) and I'm trying to set default font for all Text components in my app. I've read https://stackoverflow.com/a/47925418/811405 and How to disable font scaling in React Native for IOS app?.

In my App.js I've put:

import { Text } from 'react-native';

Text.defaultProps.style = { 
  fontFamily: 'AmericanTypewriter' //just for testing
}

But I get Cannot set property 'style' of undefined.

When I add the line Text.defaultProps = Text.defaultProps || {}; before that, I don't get an error, but nothing happens (all Text components still use the default font). I've tried with different fonts (both built-in iOS fonts and my custom fonts that I've linked and verified), using their PostScript names, though nothing happens.

What am I doing wrong?


Solution

  • If you want to have your own custom Text in your app, you usually create a custom Text component ... and either use it directly in your screens ... or use it internally in your other custom components ... this way you're going to have consistent look and feel throughout your app

    Example

    You'd use AppText in your entire app ... and forget about Text

    const AppText = ({ text }) => (
      <Text style={{ fontFamily: 'AmericanTypewriter', ...restOfYourStyles }}>
        {text}
      </Text>
    );