How to display App loading in React native CLI (without expo)

Question

I added custom font in my CLI app by configuring it in react-native.config.js Now i want to display Apploading splash screen till my font and other required assets loaded on screen and app is ready to use.

Answer 1

Adding Fonts

If you are using react-native-cli you dont need to use AppLoading component to add your fonts, you just have to follow these simple steps for React Native Version > 0.60:

STEP 1: Add Fonts to Assets

Add the fonts you want to use to your project in src/assets/fonts for example.

STEP 2: Define assets directory (Which you already did i guess)

Create file react-native.config.js in your root project directory and add following code

    module.exports = {
      assets: ["./src/assets/fonts/"],
    };

STEP 3: Link assets using react-native link

Run in terminal in your root project directory

$ npx react-native link

NOTE:

link command will link fonts in Info.plst for IOS, and creates fonts directory android/app/src/main/assets/fonts for Android, where copies of your custom fonts will be stored.

Splash screen

You can simply achieve that by configuring your root navigator e.g. StackNavigator to show a normal screen component that returns some sort of a loading indicator as the first screen to be rendered when your app first starts.

Then in that component, use useEffect to do some background tasks that need to be done before your app starts.

Finally, when the awaited tasks are done, simply navigate to your main app flow e.g. HomeScreen.js using the navigation.navigate() method.