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.

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

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.

Screenshot of CMD :

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

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

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.

10. Creating Style.

Screenshot in Android device:

Screenshot in iOS device:

Use Hindi Language Font in Android iOS App

2 Comments

  1. Hello Dear, thanks for this tut. I want to build a component which allows the user to select any one of multiple languages and once they choose the whole app will be available in the selected language later on the user may change this language also. Like this image: https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwip_PnTz9rfAhUWcCsKHc_wBwUQjRx6BAgBEAU&url=https%3A%2F%2Fwww.techwebspace.com%2Fhow-to-create-a-multi-language-app%2F&psig=AOvVaw2re0cpuKILqJGYUPoWTdo5&ust=1546914254433327

    awaiting for your valuable reply. Thanks in advance.

    • Thanks for comment Rothit. I am working on it but there is one thing i have to use the radio button here to select the language. I will post it when it is ready.

Leave a Reply

Your email address will not be published. Required fields are marked *