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

Question

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?

score 5 · Answer 1 · answered Apr 05 '19 at 14:20

5

Add this before changing fontFamily style

import { Text } from 'react-native';

Text.defaultProps = Text.defaultProps || {};

answered Apr 05 '19 at 14:20

Gev

842
4
21

score 3 · Accepted Answer · answered Apr 05 '19 at 10:52

3

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

answered Apr 05 '19 at 10:52

Hend El-Sahli

6,268
2
25
42

I might solve it with a custom component, but I'm looking for a way to apply it to all text components without a custom component. I'd especially want to know why that particular example that everyone recommends is not working for my case. – Can Poyrazoğlu Apr 06 '19 at 11:36
@CanPoyrazoğlu Care to share any feedback on how you got on? Or mark a correct answer for others? – Moss Palmer Aug 22 '20 at 00:41
@MossPalmer you're right my bad. I could never get `defaultProps` to work and abandoned using it, and I've gone with inheriting from a common class just as the example in this answer. forgot to accept it. – Can Poyrazoğlu Aug 22 '20 at 12:59
1

@CanPoyrazoğlu Thanks for updating, that looks like the route I'm going too. Thanks for updating :) – Moss Palmer Aug 24 '20 at 01:10

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

2 Answers2