React Native/Expo, how to control the splash screen?-CodePudding

I'm using the built in splash screen in expo that you add in app.json for a simple test app. However I noticed that my start screen flashes in default mode 1 millisecond before showing the assets that I've added with AsyncStorage.

I've tried using splash-screen package from expo but I found it a bit confusing. Is there a fairly easy way to add in my App.js this logic :

Show a splash screen and when all assets are loaded, load this setup (with my contexts and screens), or just increase loading time of the build in splash screen from expo (because I assume it loads over the assets being fetched?).

const App = () => {

  const [selectedTheme, setSelectedTheme] = useState(themes.light)

  const changeTheme = async () =>{
    try {
      const theme = await AsyncStorage.getItem("MyTheme")
      if (theme === "dark"){
      setSelectedTheme(themes.nightSky)} 
      else if (theme === "light") {
        setSelectedTheme(themes.arctic)
        }
    } catch (err) {alert(err)}
  }
  
  useEffect(()=> {
    changeTheme()
  },[])


  return (
    <ThemeContext.Provider value={{selectedTheme, changeTheme}}>
         <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown:false, presentation: 'modal'}}>
              <Stack.Screen name="Home" component={home}/>
            </Stack.Navigator>
          </NavigationContainer>
    </ThemeContext.Provider>

  );
};

CodePudding user response：

There is the AppLoading component from Expo, much simpler. You coud read more on the link right before, but here is the set up you would need :

 expo install expo-app-loading

import AppLoading from "expo-app-loading";
import {View} from "react-native"


export default function App() {
 const [isChecking, setIsChecking] = useState(true);
 const  asyncDoThings = async ()=>{
   /* 
     you do here all the fetching process, 
     it may be from AsyncStorage or an API.
   */
 }
 if (isChecking) {
    return (
      <AppLoading
        startAsync={() => asyncDoThings()}
        onFinish={() => setIsChecking(false)}
        one rror={console.warn}
      />
    );
  }
  // here is your application after data has been fetched
  return <View></View>
  
}

For your special use case (you wouldn't need that useEffect anymore):

import AppLoading from "expo-app-loading";
import {View} from "react-native"

const App = () => {

  const [selectedTheme, setSelectedTheme] = useState(themes.light)
  const [isChecking, setIsChecking] = useState(true);

  const changeTheme = async () =>{
    try {
      const theme = await AsyncStorage.getItem("MyTheme")
      if (theme === "dark"){
      setSelectedTheme(themes.nightSky)} 
      else if (theme === "light") {
        setSelectedTheme(themes.arctic)
        }
    } catch (err) {alert(err)}
  }
  
  if (isChecking) {
    return (
      <AppLoading
        startAsync={() =>   changeTheme()}
        onFinish={() => setIsChecking(false)}
        one rror={console.warn}
      />
    );
  }
  
  return (
    <ThemeContext.Provider value={{selectedTheme, changeTheme}}>
         <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown:false, presentation: 'modal'}}>
              <Stack.Screen name="Home" component={home}/>
            </Stack.Navigator>
          </NavigationContainer>
    </ThemeContext.Provider>

  );
};