Expo React Native project getting error when I use custom google fonts and AppLoading in my project. Thank you in advance for your support

Question

This is the issue I am getting-> VM16 bundle.js:32503 expo-app-loading is deprecated in favor of expo-splash-screen: use SplashScreen.preventAutoHideAsync() and SplashScren.hideAsync() instead. https://docs.expo.dev/versions/latest/sdk/splash-screen/ Here below is my App.js file

import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
import Menu from './Src/Menu';
import { Roboto_400Regular, Roboto_500Medium, } from '@expo-google-fonts/roboto'

export default function App() {
let [fontsLoaded] = useFonts({
        Roboto_400Regular,
        Roboto_500Medium,
    });
    if (!fontsLoaded) {
        return <AppLoading />;
    }
return (
<NavigationContainer>
            <Menu />
        </NavigationContainer>
    );
}

look this https://stackoverflow.com/a/72274869/18341393 – Dmitro_ Jul 18 '22 at 12:56 — Dmitro_, Jul 18 '22 at 12:56

Kristina · Answer 1 · 2022-09-25T18:55:01.577

import { StatusBar } from 'expo-status-bar';
import { useEffect, useState, useCallback } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import * as Font from 'expo-font';

import * as SplashScreen from 'expo-splash-screen';
import { Roboto_400Regular, Roboto_500Medium } from '@expo-google-fonts/roboto';

import Menu from './Src/Menu';


export default function App() {
const [appIsReady, setAppIsReady] = useState(false)

  useEffect(() => {
    (async () => {
      try {
        await SplashScreen.preventAutoHideAsync();
        await Font.loadAsync({ Roboto_400Regular, Roboto_500Medium });
      }
      finally { setAppIsReady(true) }
    })();
  }, []);

  const onLayout = useCallback(() => {
    if (appIsReady) {
      SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }
return (
<NavigationContainer>
            <Menu />
        </NavigationContainer>
    );
}

That should work. Make sure you ran "npm i @expo/configure-splash-screen" and "expo install @expo-google-fonts/roboto" before reloading the App and check for any spelling errors in fonts.

Expo React Native project getting error when I use custom google fonts and AppLoading in my project. Thank you in advance for your support

1 Answers1