A module that tells Expo to keep the splash screen visible until you make it hide.
This API is pre-installed in
managed apps. It is not available for
bare React Native apps.
import { SplashScreen } from 'expo' ;
SplashScreen.preventAutoHide()
Makes the native splash screen (configured in app.json
) stay visible until hide
is called.
Hides the native splash screen.
import React from 'react' ;
import { Image, Text, View } from 'react-native' ;
import { AppLoading, SplashScreen } from 'expo' ;
import { Asset } from 'expo-asset' ;
export default class App extends React. Component {
state = {
isSplashReady: false ,
isAppReady: false ,
} ;
render ( ) {
if ( ! this . state. isSplashReady) {
return (
< AppLoading
startAsync= { this . _cacheSplashResourcesAsync}
onFinish= { ( ) => this . setState ( { isSplashReady: true } ) }
onError= { console. warn}
autoHideSplash= { false }
/ >
) ;
}
if ( ! this . state. isAppReady) {
return (
< View style= { { flex: 1 } } >
< Image
source= { require ( './assets/images/splash.gif' ) }
onLoad= { this . _cacheResourcesAsync}
/ >
< / View>
) ;
}
return (
< View style= { { flex: 1 } } >
< Image source= { require ( './assets/images/expo-icon.png' ) } / >
< Image source= { require ( './assets/images/slack-icon.png' ) } / >
< / View>
) ;
}
_cacheSplashResourcesAsync = async ( ) => {
const gif = require ( './assets/images/splash.gif' ) ;
return Asset. fromModule ( gif) . downloadAsync ( ) ;
} ;
_cacheResourcesAsync = async ( ) => {
SplashScreen. hide ( ) ;
const images = [
require ( './assets/images/expo-icon.png' ) ,
require ( './assets/images/slack-icon.png' ) ,
] ;
const cacheImages = images. map ( image => {
return Asset. fromModule ( image) . downloadAsync ( ) ;
} ) ;
await Promise. all ( cacheImages) ;
this . setState ( { isAppReady: true } ) ;
} ;
}
Example without AppLoading
import React from 'react' ;
import { Image, Text, View } from 'react-native' ;
import { SplashScreen } from 'expo' ;
import { Asset } from 'expo-asset' ;
export default class App extends React. Component {
state = {
isReady: false ,
} ;
componentDidMount ( ) {
SplashScreen. preventAutoHide ( ) ;
}
render ( ) {
if ( ! this . state. isReady) {
return (
< View style= { { flex: 1 } } >
< Image
source= { require ( './assets/images/splash.gif' ) }
onLoad= { this . _cacheResourcesAsync}
/ >
< / View>
) ;
}
return (
< View style= { { flex: 1 } } >
< Image source= { require ( './assets/images/expo-icon.png' ) } / >
< Image source= { require ( './assets/images/slack-icon.png' ) } / >
< / View>
) ;
}
_cacheSplashResourcesAsync = async ( ) => {
const gif = require ( './assets/images/splash.gif' ) ;
return Asset. fromModule ( gif) . downloadAsync ( ) ;
} ;
_cacheResourcesAsync = async ( ) => {
SplashScreen. hide ( ) ;
const images = [
require ( './assets/images/expo-icon.png' ) ,
require ( './assets/images/slack-icon.png' ) ,
] ;
const cacheImages = images. map ( image => {
return Asset. fromModule ( image) . downloadAsync ( ) ;
} ) ;
await Promise. all ( cacheImages) ;
this . setState ( { isReady: true } ) ;
} ;
}
Example without any flickering between SplashScreen and its later continuation
import React from 'react' ;
import { Image, Text, View } from 'react-native' ;
import { AppLoading, SplashScreen } from 'expo' ;
import { Asset } from 'expo-asset' ;
export default class App extends React. Component {
state = { areResourcesReady: false } ;
constructor ( props) {
super ( props) ;
SplashScreen. preventAutoHide ( ) ;
}
componentDidMount ( ) {
this . cacheResourcesAsync ( )
. then ( ( ) => this . setState ( { areResourcesReady: true } ) )
. catch ( error => console. error ( `Unexpected error thrown when loading:
${ error. stack} ` ) ) ;
}
render ( ) {
if ( ! this . state. areResourcesReady) {
return null ;
}
return (
< View style= { { flex: 1 } } >
< Image
style= { { flex: 1 , resizeMode: 'contain' , width: undefined, height: undefined } }
source= { require ( './assets/splash.png' ) }
onLoadEnd= { ( ) => {
console. log ( 'Image#onLoadEnd: hiding SplashScreen' ) ;
SplashScreen. hide ( ) ;
} }
fadeDuration= { 0 }
/ >
< / View>
) ;
}
async cacheResourcesAsync ( ) {
const images = [ require ( './assets/splash.png' ) ] ;
const cacheImages = images. map ( image => Asset. fromModule ( image) . downloadAsync ( ) ) ;
return Promise. all ( cacheImages) ;
}
}