React Native Use Hindi Language Font in Android iOS App using Custom Fonts

Hindi language is the mother tongue of INDIA. Hindi is speak by over 120+ million peoples in INDIA an nearly 425+ million people speak HINDI around the world to communicate as a language bridge between peoples. This tutorial is dedicated to all the HINDI language lovers who wish to create mobile application in HINDI language. Guys we are using Hindi’s most popular font around the globe known as Kruti Dev 010 in our project. We would use the react native’s custom font use method in our project and configure the Kruti Dev 010 font in our application so using the Kruti Dev 010 font we can make our application in HINDI language. So in this tutorial we would Use Hindi Language Font in Android iOS React Native App using Custom Fonts implementation method.

Contents in this project Use Hindi Language Font in Android iOS React Native App using Custom Fonts Method:

1. First step is to download the Kruti Dev 010 Hindi font in your computer. Kruti Dev 010 font is freely available on internet below is the link. Just download the file and extract the it.

Click Here to Download Kruti Dev 010 Hindi Font

2. Open your react native project and create a folder named as assets inside it.

3. Create another folder named as fonts inside the assets folder. We need to copy the downloaded Kruti Dev 010 Hindi font inside the fonts folder.

4. Copy the Kruti Dev 010 Hindi font in fonts folder.

5. Open Package.json file in your react native project and add below code inside it. RNPM is used as react native package manager and when we define the assets -> fonts folder path inside the Package.json file it will tell the project to integrate this folder into its Index.

<br />
  “rnpm”: {<br />
         “assets”: [<br />
 “./assets/fonts/”<br />
    ]<br />
 }

“rnpm”: {

“assets”: [

“./assets/fonts/”

]

}

Complete source code of my Package.json file, It will help you to understand the changes :

<br />
{<br />
  “name”: “newproj”,<br />
  “version”: “0.0.1”,<br />
  “private”: true,<br />
  “scripts”: {<br />
    “start”: “node node_modules/react-native/local-cli/cli.js start”,<br />
    “test”: “jest”<br />
  },<br />
  “dependencies”: {<br />
    “native-base”: “^2.8.1”,<br />
    “react”: “16.6.1”,<br />
    “react-native”: “0.57.5”,<br />
    “react-native-btr”: “^1.1.1”,<br />
    “react-native-gesture-handler”: “^1.0.9”,<br />
    “react-navigation”: “^3.0.0”<br />
  },<br />
  “devDependencies”: {<br />
    “babel-jest”: “23.6.0”,<br />
    “jest”: “23.6.0”,<br />
    “metro-react-native-babel-preset”: “0.49.2”,<br />
    “react-test-renderer”: “16.6.1”<br />
  },<br />
  “jest”: {<br />
    “preset”: “react-native”<br />
  },<br />
  “rnpm”: {<br />
         “assets”: [<br />
 “./assets/fonts/”<br />
    ]<br />
 }</p>
<p>}

{

“name”: “newproj”,

“version”: “0.0.1”,

“private”: true,

“scripts”: {

“start”: “node node_modules/react-native/local-cli/cli.js start”,

“test”: “jest”

“dependencies”: {

“native-base”: “^2.8.1”,

“react”: “16.6.1”,

“react-native”: “0.57.5”,

“react-native-btr”: “^1.1.1”,

“react-native-gesture-handler”: “^1.0.9”,

“react-navigation”: “^3.0.0”

“devDependencies”: {

“babel-jest”: “23.6.0”,

“jest”: “23.6.0”,

“metro-react-native-babel-preset”: “0.49.2”,

“react-test-renderer”: “16.6.1”

“jest”: {

“preset”: “react-native”

“rnpm”: {

“assets”: [

“./assets/fonts/”

]

}

6. Open your project folder into Command Prompt or Terminal and execute below link command. This command would index the assets -> fonts folder into your react native project index and copy the fonts into their own application project fonts folder.

<br />
react-native link

1	react–native link

Screenshot of CMD :

7. Open your react native project and import StyleSheet, View, Platform and Text component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Platform, Text } from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, View, Platform, Text } from ‘react-native’;

8. Create a Main root container view in render’s return block.

<br />
render() {</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>      </View><br />
    );<br />
  }

render() {

return (

</View>

);

}

9. Create Text component in your Root View and call the Kruti Dev 010 font. Below you can see the English charters but when you compile the app then the compiler will automatically convert English into Hindi. I have first write the Text into MS Office Word with Kruti Dev 010 font and just copy the text into react native file.

<br />
render() {</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <Text style={{ fontFamily: “KrutiDev010”, fontSize: 30, color: ‘#000’, textAlign: ‘center’, padding: 15 }}></p>
<p>          gSyks nksLrks] gekjh osclkbV ij vki lHkh dks cgksr cgksr Lokxr gS-</p>
<p>        </Text></p>
<p>      </View><br />
    );<br />
  }

render() {

return (

gSyks nksLrks] gekjh osclkbV ij vki lHkh dks cgksr cgksr Lokxr gS–

</Text>

</View>

);

}

10. Creating Style.

<br />
const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,<br />
    backgroundColor: ‘#FFF8E1’</p>
<p>  }</p>
<p>});