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

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;

EDIT

Might be more interesting because it is "native" ;) https://github.com/crazycodeboy/react-native-splash-screen

Fixed this problem. So what need to be done.

1) Make all from this but don't create SplashActivity.

2) All what you need to do now is to set you MainActivity theme to SplashTheme.

Thing in that when MainActivity loading it showing it's theme, but after it replaced with React-Native stuff.