Question 33269 in React native Question posted in
The official React Native documentation can be found here.

React Native app is stuck on splash screen after adding React Navigation using Stack.Screen (iOS/Android)

Like the question says, I was following a tutorial and it was working fine so I wanted to implement it into my own side project app.
After adding it exactly the same as the doc says the component in the <Stack.Screen/> won’t load.
I have tried multiple things but nothing seems to work. No errors either so I’m stuck on how to debug.

As I don’t know which part of my code is causing the problem I will post my github repo link here.

https://github.com/totablue/ToyBoxOfWords

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Answering my own question. The thing that was causing my app to get stuck on the splashscreen was the SplashScreen.preventAutoHideAsync() that was called while the app was loading the font.

        const onLayoutRootView = useCallback(async () => {
        if (fontsLoaded) {
            await SplashScreen.hideAsync();
        }
    }, [fontsLoaded]);

    this part of the code was not running so the splash screen never went away.

    Used this video to load custom fonts in a different way and it fixed everything. https://youtu.be/viIkcDYSBrI


  2. 0

    I have tried to run your code, and it worked well. The problem is that you have not added some dependencies!

    This is the package.json file that I use with your code.

    {
  "dependencies": {
    "expo-font": "~10.2.0",
    "expo-constants": "~13.2.4",
    "expo-status-bar": "~1.4.0",
    "@expo/vector-icons": "^13.0.0",
    "expo-splash-screen": "~0.16.2",
    "react-native-paper": "4.9.2",
    "react-native-screens": "~3.15.0",
    "@react-navigation/native": "*",
    "@react-navigation/native-stack": "*",
    "react-native-safe-area-context": "4.3.1"
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search