How to call API inside expo SplashScreen?-CodePudding

I'm new in react native so I can't figure out how to add an API call inside SplashScreen in react -native app. The context - I'm building a react-native app expo, which on app load should send API GET request to the backend to get order data, and based on that data I'm either displaying screen A(delivered) or B(order on it's way). I want to add this API call inside the SplashScreen when app still loads so when app is loaded there is no delay in getting API data and displaying screen A/B. I have a simple useEffect function to call API like this:


const [data, setData] = useState{[]}
useEffect(() => {
    const getData = async () => {
      try {
        const response = await axios.get(url);
        if (response.status.code === 200 ) {
             setData (response.data) // to save data in useState
          }            
        } else if (response.status.code != 200) {
          throw new Error();
        }
      } catch (error) {
        console.log(error);
      }
    };
    getData();
  }, []);

and then in the return:

if (data.order.delivered) {
    return <ScreenA />
  }
else if (!data.order.delivered) {
 return <ScreenB />

else {return <ScreenC />}

The issue is that sometimes if API is slow, then after splash screen app has a white screen, or ScreenC can be seen. How can I call API in the splashscreen while app is loading and have a nicer ux?

CodePudding user response：

you can use expo expo-splash-screen to achieve this goal:

call this hook on mount...

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

const [appIsReady, setAppIsReady] = useState(false);

useEffect(() => {
  async function prepare() {
    try {
      // Keep the splash screen visible while we fetch resources
      await SplashScreen.preventAutoHideAsync();
      // Pre-load fonts, make any API calls you need to do here
      await Font.loadAsync(Entypo.font);
      // Artificially delay for two seconds to simulate a slow loading
      // experience. Please remove this if you copy and paste the code!
      await new Promise(resolve => setTimeout(resolve, 2000));
    } catch (e) {
      console.warn(e);
    } finally {
      // Tell the application to render
      setAppIsReady(true);
    }
  }
prepare();
}, []);

you can also check expo doc

CodePudding user response：

you can make a custom hook with simple UseState and put it after you've fetched your data

const [loading, setLoading] = useState(true)
...
useEffect(() => {
    const getData = async () => {
        try {
            const response = await axios.get(url);
            if (response.status.code === 200 ) {
                setData (response.data)


                // When data is ready you can trigger loading to false
                setLoading(false)
            }
...

and After that, you can use a Simple If statement on top of your app.js file like this

   if (!loaded) {
    return <LoadingScreen/>;  // whetever page you want to show here ;
}