CODEWITHSUNDEEP
react-nativehybrid-mobile-app
Thisara
Thisara

Reputation: 664

Is there a way to set a font globally in React Native?

I need to create a custom font that applies to every Text component in the whole application.

Is there is a way to set a font globally in React Native?

Upvotes: 9

Views: 22895

Answers (8)

Huy Nghia
Huy Nghia

Reputation: 986

If you don't have to create custom component, you could try react-native-global-font. It will be apply for your all Text and TextInput

Upvotes: 0

yoann84
yoann84

Reputation: 820

I use a wrapper with default props like this :

const CustomText = ({ fontFam = "regular", ...props }) => {
  const typo = {
    light: "Montserrat_300Light",
    regular: "Montserrat_400Regular",
    bold: "Montserrat_600SemiBold",
  };

  return (
    <Text {...props} style={[{ fontFamily: typo[fontFam], ...props.style }]}>
      {props.children}
    </Text>
  );
};

export default CustomText;

By default, if "fontFam" is not indicated it will be regular font.

An example with bold typo :

   <CustomText fontFam="bold" style={{ marginTop: 30, color: "grey" }}>
              Some Text
   </CustomText>

You can replace all your <Text/> by <CustomText />.

Upvotes: 0

Karan Dua
Karan Dua

Reputation: 2411

To do this we have to implement a method in which we will override Text component creation in React Native. In this we will set default font family or size or any attribute we want to set by default.

// typography.js

import React from 'react'
import { Text, Platform, StyleSheet } from 'react-native'

export const typography = () => {
  const oldTextRender = Text.render
  Text.render = function(...args) {
    const origin = oldTextRender.call(this, ...args)
    return React.cloneElement(origin, {
      style: [styles.defaultText, origin.props.style],
    })
  }
}

const styles = StyleSheet.create({
  defaultText: {
    fontFamily: 'NunitoSans-Regular',//Default font family
  }
});

Then in index.js you have to do this:

import { typography } from './src/utils/typography'

typography()

Detailed answer here: https://ospfolio.com/two-way-to-change-default-font-family-in-react-native/

Upvotes: 5

Santosh Kumar
Santosh Kumar

Reputation: 580

You can override Text behaviour by adding this in any of your component using Text:

Edit: Add this code in your App.js or main file

let oldRender = Text.render;
Text.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
}

For react Native Version 0.56 or below, Add this code in your App.js or main file

let oldRender = Text.prototype.render;
Text.prototype.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
};

Reference Or create your own component, such as MyAppText. MyAppText would be a simple component that renders a Text component using your universal style and can pass through other props, etc.

Upvotes: 0

Revansiddh
Revansiddh

Reputation: 3062

One way is to create a wrapper for RN Text say MyTextCustomFont:

const MyTextCustomFont = (props) => {
   return (
        <Text style={{fontFamily:'myFont'}} {...props} >{props.children}</Text>
   )
}

import this MyTextCustomFont and use anywhere.

Another way is to define a style object and use it wherever you want.

Upvotes: 12

Poptocrack
Poptocrack

Reputation: 2999

So, I've made a component doing this quite easely some times ago. This is working with Expo, I don't know for vanilla react-native.

at the start of your app:

import { Font, Asset } from 'expo'

async initFont() {
    try {
      await Font.loadAsync({
        'Bariol': require('src/assets/font/Bariol_Regular.otf'),
        'Bariol Bold': require('src/assets/font/Bariol_Bold.otf'),
      })
      this.setState({ fontReady: true })
    } catch (e) {
      console.log(e)
    }
  }

Then, you have to create a component file like text.js containing this code:

export default function (props) {
  let font = { fontFamily: 'Bariol' }
  if (props.bold) {
    font = { fontFamily: 'Bariol Bold' }
  }

  const { bold, style, children, ...newProps } = props
  return (
    <Text {...newProps} style={[Style.text, props.style, font]}>
      {props.children}
    </Text>
  )
}

Finally, in any of you other component / page just import MyText:

import Text from 'path/to/text.js'

use it like a normal Text component:

<Text bold>Hello World!</Text>

Even if this solution looks a bit more complicated than the others, it is easier to use once the setup is ok, since you just have to import Text.

Upvotes: 1

Rizal Ibnu
Rizal Ibnu

Reputation: 443

I think your problem is add Custom Fonts in react native.

1. Add Your Custom Fonts to Assets

Add all the font files you want to an “assets/fonts” folder in the root of your react native project:

enter image description here

2. Edit Package.json

Adding rnpm to package.json providing the path to the font files:

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
},

3. Link assest files

run this command in your react native project root folder

react-native link

This should add the font references in your Info.plist file for iOS and on Android copy the font files to android/app/src/main/assets/fonts.

4. Add in stylesheet

Add a fontFamily property with your font name:

const styles = StyleSheet.create({
      title: {
        fontSize: 16,
        fontFamily: 'PlayfairDisplay-Bold',
        color: '#fff',
        paddingRight: 20,
      },
    });

Upvotes: 1

PrinzAndreVonLandmann
PrinzAndreVonLandmann

Reputation: 315

yes

app.js

import styles from './styles';
{...}
 <Text style={styles.text}>hello World </Text>
{...}

styles.js

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
 text: {
    // define your font or size or whatever you want to style here
  },

use style on every text and all changes will affect all text components

Upvotes: -2

Related Questions