We will now jointly develop a full-fledged Vocabulary Builder mobile app. The application will allow you to create your own dictionary of English words. We use React Native, RN Navigation, Redux, redux-thunk, AsyncStorage in the application. It will be interesting!
Let’s start with a little preparation. Add the fonts. First, install the expo-font library.
All fonts have already been added to the src/assets/fonts folder. The Roboto fonts will be used in the project.
Fonts must be loaded once. We will do this using the useEffect hook, which must be executed once.
In an asynchronous function, call the Font.loadAsync asynchronous method with an array of Roboto fonts.
Remember to import the fonts themselves. Font is a generic import from expo-font.
While the fonts are loading, the App component should return the ActivityIndicator element with the size small.
After the font load completes, the App component should display the standard expo message.
Use the flag created with useState to track downloads.

This task is part of the Full-Stack JavaScript Course.
If you have any issues with it, you can ask for community help below the post.
Feel free to help others if you’ve already solved the task.

App.js

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

export default function App() {
  return (
    <View styles={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

app.json

{
  "expo": {
    "name": "1",
    "slug": "1",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

src/assets/fonts/fontIcon/config.json

{
  "name": "fonticons",
  "css_prefix_text": "icon-",
  "css_use_suffix": false,
  "hinting": true,
  "units_per_em": 1000,
  "ascent": 850,
  "glyphs": [
    {
      "uid": "70370693ada58ef0a60fa0984fe8d52a",
      "css": "plus",
      "code": 59392,
      "src": "entypo"
    },
    {
      "uid": "15739f3032c2aa3df67efc96b3ffef56",
      "css": "cancel-circle",
      "code": 59393,
      "src": "websymbols"
    },
    {
      "uid": "f143f7cda5d88dd37a059fcbfb95ccde",
      "css": "trash",
      "code": 59394,
      "src": "custom_icons",
      "selected": true,
      "svg": {
        "path": "M55.6 888.9C55.6 950 105.6 1000 166.7 1000H611.1C672.2 1000 722.2 950 722.2 888.9V222.2H55.6V888.9ZM192.2 493.3L270.6 415 388.9 532.8 506.7 415 585 493.3 467.2 611.1 585 728.9 506.7 807.2 388.9 689.4 271.1 807.2 192.8 728.9 310.6 611.1 192.2 493.3ZM583.3 55.6L527.8 0H250L194.4 55.6H0V166.7H777.8V55.6H583.3Z",
        "width": 800
      },
      "search": [
        "vector"
      ]
    },
    {
      "uid": "0805cca616b3c12714f35af4d0912c10",
      "css": "up-open-big",
      "code": 59395,
      "src": "entypo"
    },
    {
      "uid": "289b5f92f23acf1059c93fbf401c1ad5",
      "css": "down-open-big",
      "code": 59396,
      "src": "entypo"
    },
    {
      "uid": "587bjlxppui6u4japooa2foe58rsvicp",
      "css": "pencil",
      "code": 59397,
      "src": "modernpics"
    },
    {
      "uid": "884cfc3e6e2d456dd2a2ca0dbb9e6337",
      "css": "left-open-big",
      "code": 59237,
      "src": "entypo"
    },
    {
      "uid": "3fce1eca43f917c8f23e532749abae5d",
      "css": "user-circle-o",
      "code": 62142,
      "src": "fontawesome"
    },
    {
      "uid": "f0cf7db1b03cb65adc450aa3bdaf8c4d",
      "css": "gplus-squared",
      "code": 61652,
      "src": "fontawesome"
    }
  ]
}