Creating a React Native project from scratch with Typescript adding external fonts - Part I

In May of last year, I formally started working with hybrid mobile development, as I use React Native as a tool.

I noticed a great interest from the community in this technology, and I thought of a cool way to pass on a little bit of my knowledge to you in the form of an article, where together we will create a list of goals application, a *To-Do * app, and thus we will be able to enter our objectives, mark the ones that are complete and delete the unwanted ones.

From this article then, we will make a series with 4 or 5 more articles, where we will be developing new features in our application, that is, we will be developing a little more with each article.

With that in mind, I created this small wireframe below, which is nothing more than a sketch so that we can keep in mind what our interface will be like, more or less, the functionalities in a raw form for our development. But don't be scared, our application will have a very nice layout, although simple, because my goal is to make a small overview of the most important things we need to understand in React Native, so that you can start creating your projects using this framework.

And to start our series of articles on React Native, today we will learn how to start a project using the typescript template, because working with typing is highly valued by companies, in addition to taking even better care of our code, as a great differential of typescript it is precisely to prevent us from making mistakes in the code, and the verification of this is done before we build, because if we have errors, they will have to be corrected so that the code finally performs the build.

To carry out the steps below, it is recommended that you already have Android Studio and/or XCode, in addition to Yarn and/or NPM already installed on your pc.

With that, I leave the documentation that rocketseat created for us to support when installing these applications. Please have them before proceeding to the steps below.

https://react-native.rocketseat.dev/

Starting the React Native project

We will start by running the following command:

npx react-native init projectname --template react-native-template-typescript

Where ProjectName is, rename it to the name your application will have, in this case todoApp.

Basically with the above command we are starting a React Native project where after the init we already name this project and then we say that we want the generated template to be with typescript, so we can create .ts and .tsx files.

When you finish running this command, a project will be generated as shown below:

To emulate the code above and be able to visualize how a base React Native project is configured, just run the following command:

cd [name of the folder where the project is]
yarn android
yarn ios

yarn start

yarn start creates the metro bundler that will make your code 'listen'.

And when we run it, our application will look like the one below:

These are texts and styles that come by default when we download a React Native template, but since we are not going to use these styles, we are going to the App.tsx file and we are going to delete all the content in that file.

This file usually only displays the final pages or components we create, as it is our main file so we shouldn't clutter it up with other functions.

Resetting what was in that file, we will just show a text written Hello world on the screen, we will style this text with a 15px font, and add margins at the top and sides.

To do so, we'll go inside the element and add the style={styles.text} property, so that when we create our style within the const styles, our text property will be linked to the tag that has that style.

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

const App: React.FC = () => {
  return (
    <SafeAreaView>
      <Text style={styles.text}>Hello World</Text>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  text: {
    fontSize: 15,
    marginVertical: 10,
    MarginHorizontal: 10,
  },
})

export default App

Generating the following result:

From that moment on, our app is ready for us to start putting our hands on the code, and with that, let's now prepare it for our future features within it, creating our folder structure.

Let's add a folder in the root of the project called src (which is an abbreviation of source), where all our style files, components, pages...

Inside that folder, let's create a folder called components, another folder called pages but you can also call it screens and another folder called utils.

These folders will be used in the next articles, as we create the code for our app, but basically the components we create in our application will be inside the components folder, our pages will be inside screens, and our pages will be assembled, and some files will be inside utils. help, such as colors, fontsSizes...

To finish today's first step, let's add an external font, more specifically Google Fonts.

Adding External Fonts in React Native

To add external sources in our React Native applications, we will follow the steps below:

1. In our app, we will use the Montserrat font, and for that, we will access Google Fonts, search for the Montserrat font, and then download them by clicking on Download family.

https://fonts.google.com/specimen/Montserrat

2. Next, let's create another folder at the root of the project called assets (outside the src), and inside it we'll create another folder called fonts. Next, let's take the .ttf files that we will use in the project and place them inside the fonts folder that we just created.

We will use the fonts Montserrat-Regular.ttf and Montserrat-Bold.ttf, thus making our project:

Just an observation, is that if you are in the Mac OS environment, it is important that you click on the .ttf files downloaded in downloads, and install these fonts on your pc, as we will need them installed for step 6.

3. After the above step, we will create a file in the root of the project called react-native.config.js and inside it we will place the following code:

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

What we are doing in the above code is basically adding our fonts to be interpreted in native iOS and Android code.

4. Now we will run the command below to link our fonts to our app:

yarn react-native link

A message like the one below will appear, indicating that the sources were successfully linked:

5. Now, as we are moving native resources, we have to "reinstall" these new updates in our app, with the following command lines:

yarn android
yarn ios

After the step above, our fonts will already be enabled to be used.

And if you are in doubt whether the fonts were installed or not, just check on Android and iOS as follows:

iOS - To check if the fonts we are going to use have been installed on iOS, just go to the ios folder at the root of the project: ios → projectName → Info.plist

In the Info.plist file, let's scroll to the end of the file and verify that our fonts have been injected into native iOS code, as follows:

Android - To check if the fonts we are going to use have been installed on Android, just go to the android folder at the root of the project: android → app → src → main → assets → fonts

If inside main you have the assets folder and our fonts folder inside it, it means that our external fonts are already linked to our native Android code.

6. Step to perform only if you use iOS environment

Fonts successfully checked, now it's just a matter of using them, and for that, first I need to explain a small difference that exists between Android and iOS in relation to font names.

It may be that a given source has its name on iOS different from the name of the downloaded file, and that name is used on Android. Therefore, whoever has an iOS environment, it is recommended to go to the Font Catalog program and look for the fonts that we downloaded in step 2.

When we click on the font Montserrat Normal, when we analyze the PostScript Name of this font, we will see that it is written in the same way as the font we downloaded:

it's the same as:

It is important that we check this step when we have iOS, because if the name of the font is different from what we put in our project, it is advised that we change the name of the .ttf that is inside the project, putting it the same as the name inside the font catalog for iOS, as editing the Font Book name is more difficult.

Why that? Because when we are going to use a custom font in our code, we use the same name for both operating systems.

7. Now let's go back to our App.tsx file, where inside our text style object, we'll add the property fontFamily: 'Montserrat-Regular' and set the value of 20 to our fontSize.

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

const App = () => {
  return (
    <SafeAreaView>
      <Text style={styles.text}>Hello World</Text>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    marginVertical: 10,
    MarginHorizontal: 10,
    fontFamily: 'Montserrat-Regular',
  },
})

export default App

Note that the name we use in fontFamily is the same name as our font file, minus the extension.

And now, when we save, our app will already be using the external font we installed:

And so we end our first project article.

I hope you enjoyed and evolved a lot in today's "class".

I spent the end of last year planning the new articles for the year 2021 and I wanted to start by creating a project with you, so that we can create an application together and learn in a different way.

As a final tip for today's teachings, create a repository on your Github and place our app, because in the next articles we will evolve it even more.

See you in our next article/lesson as in the next few steps we will understand what components are inside React Native and how we can style them even more!

See you soon!