React Native Expo App stuck infinitely on the splash screen in preview build - Stack Overflow

admin管理员组

文章数量:1277910

I'm working on a React Native app using Expo SDK 52. I'm having a problem the splash screen. The app works fine on the development build and through Expo Go, but it stays stuck infinitely on the splash screen when I run it from a preview build. It doesn't timeout or show any errors. I thought there was something wrong with the login screen so I deleted everything and left just a basic hello world, it still gets stuck on the splash screen. Another post suggested I install some packages from .x/upgrading-from-5.x/ but that never helped.

import * as SplashScreen from "expo-splash-screen";

// Prevent splash screen auto-hiding
SplashScreen.preventAutoHideAsync();

const App = () => {
  const [appIsReady, setAppIsReady] = useState(false);
  const [pushToken, setPushToken] = useState(null);
  const [loaded, setLoaded] = useState(false);

  // In App component's prepare function
  useEffect(() => {
    async function prepare() {
      try {
        await SplashScreen.preventAutoHideAsync();

        // Load all resources
        await Promise.all([
          Font.loadAsync({
            'Poppins': require('./fonts/Poppins-Regular.ttf'),
          }),

          registerForPushNotificationsAsync().then(token => setPushToken(token)),

          new Promise(resolve => {
            const unsubscribe = onAuthStateChanged(auth, user => {
              unsubscribe();
              resolve();
            });
          })
        ]);

        // Mark resources loaded
        setLoaded(true);
      } catch (e) {
        console.warn(e);
      }
    }

    prepare();
  }, []);

  useEffect(() => {
    if (loaded) {
      // Safety timeout to ensure splash screen hides
      const timeout = setTimeout(async () => {
        await SplashScreen.hideAsync();
        setAppIsReady(true);
      }, 500);

      return () => clearTimeout(timeout);
    }
  }, [loaded]);

  if (!appIsReady) {
    return null;
  }

I'm working on a React Native app using Expo SDK 52. I'm having a problem the splash screen. The app works fine on the development build and through Expo Go, but it stays stuck infinitely on the splash screen when I run it from a preview build. It doesn't timeout or show any errors. I thought there was something wrong with the login screen so I deleted everything and left just a basic hello world, it still gets stuck on the splash screen. Another post suggested I install some packages from https://reactnavigation./docs/6.x/upgrading-from-5.x/ but that never helped.

import * as SplashScreen from "expo-splash-screen";

// Prevent splash screen auto-hiding
SplashScreen.preventAutoHideAsync();

const App = () => {
  const [appIsReady, setAppIsReady] = useState(false);
  const [pushToken, setPushToken] = useState(null);
  const [loaded, setLoaded] = useState(false);

  // In App component's prepare function
  useEffect(() => {
    async function prepare() {
      try {
        await SplashScreen.preventAutoHideAsync();

        // Load all resources
        await Promise.all([
          Font.loadAsync({
            'Poppins': require('./fonts/Poppins-Regular.ttf'),
          }),

          registerForPushNotificationsAsync().then(token => setPushToken(token)),

          new Promise(resolve => {
            const unsubscribe = onAuthStateChanged(auth, user => {
              unsubscribe();
              resolve();
            });
          })
        ]);

        // Mark resources loaded
        setLoaded(true);
      } catch (e) {
        console.warn(e);
      }
    }

    prepare();
  }, []);

  useEffect(() => {
    if (loaded) {
      // Safety timeout to ensure splash screen hides
      const timeout = setTimeout(async () => {
        await SplashScreen.hideAsync();
        setAppIsReady(true);
      }, 500);

      return () => clearTimeout(timeout);
    }
  }, [loaded]);

  if (!appIsReady) {
    return null;
  }

• react-native
• expo

Share Improve this question Follow asked Feb 24 at 8:34 Kyle MabasoKyle Mabaso 6311 silver badge66 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Here are some additional dependencies you might be missing (which are not mentioned in the link you have posted):

1. react-native-reanimated
2. react-native-gesture-handler

If that doesn't fix it, I suggest you try LogCat from android studio and see the logs in real time when you launch the application. You'll find some clue about why it won't go past the splash screen.

i think the issue is u call SplashScreen.preventAutoHideAsync(); this method 2 times which is not exactly required as Your Code is more like in the documentation of splashScreen in expo docs,

i think u need to check this, i found this line in expo docs for splashscreen : Important note: It is recommended to call this in global scope without awaiting, rather than inside React components or hooks, because otherwise this might be called too late, when the splash screen is already hidden.

this works in expo go as the expo go environmnet handles the edge case scenerios which differ from the actual app, i suggest u to use development build instead for better development environment

i hope so u understand what im explaning!!

本文标签： React Native Expo App stuck infinitely on the splash screen in preview buildStack Overflow