CODEWITHSUNDEEP
react-native
Muhammad
Muhammad

Reputation: 2804

How to add custom fonts to react-native v0.61.x?

How to add custom fonts in react-native 0.61.x. After 0.60+ added auto linking, I dont know how to link custom fonts.

When I execute this command:

react-native link

This make some aditional linking which generate extra error.

So how Can I Link only fonts folder.

Upvotes: 1

Views: 5095

Answers (3)

harshad
harshad

Reputation: 31

You can add custom font in react-native using expo-font.

  1. Install >> expo install expo-font

     import * as Font from 'expo-font'

 loadFonts=async()=> {
     await Font.loadAsync({
       // Load a font `Montserrat` from a static resource
       popinsmed: require('../../assets/fonts/DMSans-Regular.ttf'),

       // Any string can be used as the fontFamily name. Here we use an object to provide more control
       Montserrat-SemiBold': {
         uri: require('../../assets/fonts/Poppins-Medium.ttf'),
         display: Font.FontDisplay.FALLBACK,
       },
     });
     this.setState({ fontsLoaded: true });
   }

 componentDidMount(){
     this.loadFonts();
   }

 render(){
 return(
 <View><Text style={{fontFamily:"popinsmed"}}>This is a custom font</Text></View>
 )
 }

For reference, click here.

Upvotes: 0

Lahiru Amarathunge
Lahiru Amarathunge

Reputation: 809

create a file in root (react-native.config.js)

module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ['./assets/fonts'], // stays the same
};

Create a folder called assets in root and paste the font file under fonts folder(assets/fonts/xxxx.ttf)

Run npx react-native link in command line.

Upvotes: 0

houman.sanati
houman.sanati

Reputation: 1074

create an assets folder in your project directory and then create a fonts folder and paste any custom fonts that you want then add this code snippet to the react-native.config.js file in the root of your project(if the file doesn't exist create it). 

module.exports = {
    project:{
        ios: {},
        android: {}
    },
    assets: ["./assets/fonts"]
}

after all run react-native link to link the resources to your project.

you will be able to use fonts now. for example, I have a yekan.ttf font in my fonts folder you can use it like this:

const styles = StyleSheet.create({
    text: {
        fontFamily: "yekan",
    },
})

as you see use custom fonts without their extension I mean don't put for example .ttf at the end otherwise, it won't work.

Upvotes: 8

Related Questions