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

Question

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

Answer 1

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

Answer 2

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"
}
}