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

Question

I was wondering how to solve a launching screen which, let´s say it appears for some seconds and then gets replaced by the other View?

I would like to use this when the app is started the first time and to cover some networkings.

Answer 1

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

Answer 2

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.

Answer 3

I managed to do it this way, which looks like the simplest and needs less resources:

1. Create the splash images for the different resolutions. I used ionic resources to generate all sizes from the PSD file. You need to create a temporary ionic project with ionic start, edit the PSD files inside /resources, and run ionic resources.

2. Place them in the appropriate folder in app/src/main/res/mipmap-xxx, with name ic_splash.png

3. Create app/src/main/res/drawable/splash.xml with this content: <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:gravity="center" android:src="@mipmap/ic_splash"/> </item> </layer-list> Note: Looks like some people needs to add a color below the bitmap item, so you just add <item android:drawable="@android:color/black"/> before the above <item>. The color doesn't really matter unless your splash image has transparency.

4. Add to app/src/main/res/values/styles.xml: <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar"> <item name="android:windowBackground">@drawable/splash</item> </style>
5. Edit app/src/main/AndroidManifest.xml and include inside application>activity android:theme="@style/SplashTheme"
6. Now the app will start with the splash screen as a background, and as soon as the React Native app loads it will be placed on top of it. The React Native main component should have some background so the splash image gets covered.

Answer 4

here is the solution,you can customise splashscreen with view animation using screen navigation

import React, { Component } from 'react';  import { View, Text, Animated,  
   Easing} from 'react-native';
export default class SplashPage extends Component {
    constructor() {
        super();
        this.RotateValueHolder = new Animated.Value(0);
        setTimeout(() => {
            this.props.navigation.replace('login')
        }, 5000);
    }
    componentDidMount() {
        this.StartImageRotate();
    }
    StartImageRotate() {
        this.RotateValueHolder.setValue(0);
        Animated.timing(this.RotateValueHolder, {
            toValue: 1,
            duration: 3000,
            easing: Easing.linear,
        }).start(() => this.StartImageRotate());
    }

    render() {
        const RotateImage = this.RotateValueHolder.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg'],
        });
        return (
            <View style={{
                flex: 1, backgroundColor: 'gray', alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Animated.Image
                    style={{
                        width: 250,
                        height: 250,
                        transform: [{ rotate: RotateImage }],
                    }}
                    source={{ uri:'someurl.png' }}
                />
            </View>
        );
    } }

Answer 5

This is the correct way.

Taking advantage of the windowBackground attribute should avoid all the UI artifacts that you could made if you were using the old style (launching an activity which runs for a determinate amount of time)