The SplashScreen module tells Expo to keep the splash screen visible until you choose to hide it. This is useful to do some work behind the scenes before displaying your app and to create transitions for your splash screen, so you can have it fade out or slide away, for example.
This is useful to let you create an impression of a pure React component splash screen. You can combine it with AppLoading. Read more about creating a splash screen.
importReactfrom'react';import{Image,Text,View}from'react-native';import{AppLoading,SplashScreen}from'expo';import{Asset}from'expo-asset';exportdefaultclassAppextendsReact.Component{
state ={ areResourcesReady:false};constructor(props){super(props);SplashScreen.preventAutoHide();// Instruct SplashScreen not to hide yet}componentDidMount(){this.cacheResourcesAsync()// ask for resources.then(()=>this.setState({ areResourcesReady:true}))// mark resources as loaded.catch(error=>console.error(`Unexpected error thrown when loading:\n${error.stack}`));}render(){if(!this.state.areResourcesReady){returnnull;}return(<View style={{ flex:1}}><Image
style={{ flex:1, resizeMode:'contain', width:undefined, height:undefined}}
source={require('./assets/splash.png')}
onLoadEnd={()=>{// wait for image's content to fully load [`Image#onLoadEnd`] (https://reactnative.dev/docs/image#onloadend)console.log('Image#onLoadEnd: hiding SplashScreen');SplashScreen.hide();// Image is fully presented, instruct SplashScreen to hide}}
fadeDuration={0}// we need to adjust Android devices (https://reactnative.dev/docs/image#fadeduration) fadeDuration prop to `0` as it's default value is `300`/></View>);}asynccacheResourcesAsync(){const images =[require('./assets/splash.png')];const cacheImages = images.map(image=>Asset.fromModule(image).downloadAsync());returnPromise.all(cacheImages);}}