BigPun86 BigPun86 - 3 months ago 10
iOS Question

How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)

Hey there i was wondering how to solve a launching screen which, let´s say it appears for some seconds and than gets replaced by an other View. I would like to use this when the app is started the first time and to cover some networkings.

Answer

This is how i solved the "Loading Screen". I worked with Navigator Component. In my index.android.js i set the initialRoute to my SplashPage/SplashScreen Class and then in there i set a timeout which links to the "MainView" you want to jump to after a certain time.

My Navigator in index.android.js:

<Navigator
   initialRoute={{id: 'SplashPage'}}
   renderScene={this.renderScene}
   configureScene={(route) => {
       if (route.sceneConfig) {
           return route.sceneConfig;
       }
       return Navigator.SceneConfigs.HorizontalSwipeJump;
   }}
/>

My initialRoute Class:

class SplashPage extends Component {

    componentWillMount () {
        var navigator = this.props.navigator;
        setTimeout (() => {
            navigator.replace({
                id: 'MainView', <-- This is the View you go to
            });
        }, 2000); <-- Time until it jumps to "MainView" 
    }
    render () {
        return (
            <View style={{flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center'}}>
                <Image style={{position: 'absolute', left: 0, top: 0, width: windowSize.width, height: windowSize.height}} source={require('image!splash_screen')}></Image>
            </View>
        );
    }
}

module.exports = SplashPage;