CODEWITHSUNDEEP
androidiosreactjsreact-native
SaroVin
SaroVin

Reputation: 1773

How to change the default fontFamily in react-native

Can I set a default fontFamily in my app (iOS and Android)??

I don't want set it in each screen.

Any idea?

Upvotes: 0

Views: 4163

Answers (1)

Adam Terlson
Adam Terlson

Reputation: 12730

The only way to do this is from the native side of things. See here:

Set a default font for whole iOS app?

and

Is it possible to set a custom font for entire of application?

Although, if you use the library Cairn (disclaimer: I wrote it) it's trivial. Simply define your global text style and extend from it everywhere. Cairn makes all global stuff reusable while not breaking component-specific overrides and extensions.

// styles.js
import { createStylesheet } from 'react-native';
import cairn from 'cairn';

export default cairn({
    text: {
        fontFamily: '...'
    }
}, (styles) => createStylesheet(styles));

Then extend those global styles in your component and apply to your text element:

// components/MyComponent.js

import styleContext from '../styles';

const style = styleContext.extend({
    'text.header': {
        fontSize: 30
    }
});

export default const MyComponent = () => (
    // Spreads style={[styleContext.text, style['text.header']]}
    <Text {...style('text.header')}>Header!</Text>
);

Upvotes: 1

Related Questions