mehcode / rn-splash-screen

A JavaScript-controlled splash-screen for React Native designed to be run directly after the native splash-screen.
MIT License
350 stars 95 forks source link

Document the fluid 3-stage splash screen #1

Closed mehcode closed 8 years ago

mehcode commented 8 years ago
Stage 1
        <activity
            android:name=".MainActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:label="@string/app_name"
            android:adjustViewBounds="true">
        </activity>

        <activity
            android:name=".SplashActivity"
            android:adjustViewBounds="true"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:theme="@style/PreSplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
public class SplashActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}
Stage 2
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // Before we render the view; set the theme to the stage-2 splash screen
        setTheme(R.style.PreSplashTheme);

        // After react is initialized (and the stage-3 splash screen has taken over; reset our background
        // NOTE: setTheme has no affect after that super call
        getReactNativeHost().getReactInstanceManager().addReactInstanceEventListener(new ReactInstanceManager.ReactInstanceEventListener() {
            @Override
            public void onReactContextInitialized(ReactContext context) {
                getWindow().setBackgroundDrawableResource(R.drawable.blank);
            }
        });

        super.onCreate(savedInstanceState);
    }
Stage 3

This package. This stage ends when it is hidden by javascript.

dunhuang commented 8 years ago

An example is expected.

mehcode commented 8 years ago

Definitely. Coming within the week.

mehcode commented 8 years ago

Example is now available for android; iOS soon after

@mvaivre @pewh @dunhuang

dunhuang commented 8 years ago

@mehcode Demo works, thanks a lot !

ryankask commented 8 years ago

One very minor thing you might want to specify is the theme for the DevSettingsActivity:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"
                android:theme="@style/Theme.AppCompat.Light.NoActionBar" />

Otherwise the activity uses the splash screen image as the background which made it difficult to read in my case.

mehcode commented 8 years ago

@ryankask Good point. I'd suggest we move the theme to the Activity instead of the Application however.

https://github.com/mehcode/rn-splash-screen/blob/master/example/android/app/src/main/AndroidManifest.xml#L13-L29

ryankask commented 8 years ago

True. I actually adapted this solution for 0.27 and the theme is on the activity. I don't know much about Android dev though so perhaps I made a mistake in that process. :)

On Thursday, 4 August 2016, Ryan Leckey notifications@github.com wrote:

@ryankask https://github.com/ryankask Good point. I'd suggest we move the theme to the Activity instead of the Application however.

https://github.com/mehcode/rn-splash-screen/blob/master/ example/android/app/src/main/AndroidManifest.xml#L13-L29

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mehcode/rn-splash-screen/issues/1#issuecomment-237664302, or mute the thread https://github.com/notifications/unsubscribe-auth/AAE_4xAJ7Q21M1pzOFcBHoZ8eHU8ajTPks5qckMTgaJpZM4I7fPB .

mehcode commented 8 years ago

Fully documented and an example is now available for iOS as well. 🎉