added splash screen for android- zulip#2756

android/app/build.gradle

@@ -159,6 +159,7 @@ repositories {
 
 
 dependencies {
+    compile project(':react-native-splash-screen')
     compile project(':react-native-text-input-reset')
     compile project(':react-native-notifications')
     compile project(':react-native-image-picker')

android/app/src/main/AndroidManifest.xml

@@ -25,23 +25,30 @@
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
       android:theme="@style/AppTheme">
+        <activity
+            android:name=".SplashActivity"
+            android:theme="@style/SplashTheme"
+            android:label="@string/app_name">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
         android:windowSoftInputMode="adjustResize"
-        android:launchMode="singleTask">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
+        android:launchMode="singleTask"
+          android:exported="true" >
         <intent-filter android:label="filter_react_native">
             <action android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.DEFAULT" />
             <category android:name="android.intent.category.BROWSABLE" />
             <data android:scheme="zulip" android:host="login" />
         </intent-filter>
       </activity>
+
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
         <receiver
             android:name="com.google.android.gms.gcm.GcmReceiver"

android/app/src/main/java/com/zulipmobile/MainActivity.java

@@ -4,6 +4,8 @@
 import android.content.res.Configuration;
 
 import com.facebook.react.ReactActivity;
+import org.devio.rn.splashscreen.SplashScreen; 
+import android.os.Bundle; 
 
 public class MainActivity extends ReactActivity {
 
@@ -16,6 +18,12 @@ protected String getMainComponentName() {
         return "ZulipMobile";
     }
 
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        SplashScreen.show(this); 
+        super.onCreate(savedInstanceState);
+    }
+
     @Override
     public void onConfigurationChanged(Configuration newConfig) {
         super.onConfigurationChanged(newConfig);

android/app/src/main/java/com/zulipmobile/MainApplication.java

@@ -8,6 +8,7 @@
 
 import com.RNFetchBlob.RNFetchBlobPackage;
 import com.facebook.react.ReactApplication;
+import org.devio.rn.splashscreen.SplashScreenReactPackage;
 import com.nikolaiwarner.RNTextInputReset.RNTextInputResetPackage;
 import com.wix.reactnativenotifications.RNNotificationsPackage;
 import com.imagepicker.ImagePickerPackage;
@@ -52,6 +53,7 @@ public boolean getUseDeveloperSupport() {
         protected List<ReactPackage> getPackages() {
             return Arrays.<ReactPackage>asList(
                     new MainReactPackage(),
+            new SplashScreenReactPackage(),
                     new RNTextInputResetPackage(),
                     new ImagePickerPackage(),
                     new OrientationPackage(),

android/app/src/main/java/com/zulipmobile/SplashActivity.java

@@ -0,0 +1,16 @@
+package com.zulipmobile;
+
+import android.content.Intent;
+import android.os.Bundle;
+import android.support.v7.app.AppCompatActivity;
+
+public class SplashActivity extends AppCompatActivity {
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        Intent intent = new Intent(this, MainActivity.class);
+        startActivity(intent);
+        finish();
+    }
+}

android/app/src/main/res/drawable/background_splash.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item
+        android:drawable="@color/green"/>
+
+    <item
+        android:width="200dp"
+        android:height="355dp"
+        android:drawable="@mipmap/icon"
+        android:gravity="center" />
+
+</layer-list>

android/app/src/main/res/layout/launch_screen.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="vertical"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/green"
+    android:gravity="center">
+    <ImageView
+        android:layout_width="200dp"
+        android:layout_height="355dp"
+        android:layout_marginTop="24dp"
+        android:src="@mipmap/icon"
+    />
+</LinearLayout>

android/app/src/main/res/values/color.xml

@@ -2,4 +2,6 @@
 <resources>
     <color name="primaryColor">#ffffff</color>
     <color name="primaryColorDark">#d7ccc8</color>
+    <color name="green">#B1D8CD</color>
+    <color name="primary_dark">#4F6D7A</color>
 </resources>

android/app/src/main/res/values/styles.xml

@@ -7,4 +7,9 @@
         <item name="colorPrimaryDark">@color/primaryColorDark</item>
     </style>
 
+
+    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="android:windowBackground">@drawable/background_splash</item>
+        <item name="android:statusBarColor">@color/green</item>
+    </style>
 </resources>

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'ZulipMobile'
+include ':react-native-splash-screen'
+project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
 include ':react-native-text-input-reset'
 project(':react-native-text-input-reset').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-text-input-reset/android')
 include ':react-native-notifications'

ios/ZulipMobile.xcodeproj/project.pbxproj

@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -55,6 +54,7 @@
 		D6D40984ED07473499B3F0C9 /* libRNDeviceInfo.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D5664A74FA8048439CBAB734 /* libRNDeviceInfo.a */; };
 		DBC5C3186FE64F94BD3CDC19 /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A2070A88714C43ED8AF708C3 /* MaterialCommunityIcons.ttf */; };
 		FF359794CBFF4ABF92423426 /* libRCTToast.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2CFB39BBD9094475BB03A3E4 /* libRCTToast.a */; };
+		A9BA0799D0074FC2A8D752CE /* libSplashScreen.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 125552DC2FB34621A25E48C1 /* libSplashScreen.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -528,6 +528,8 @@
 		E518466F398E458DA2C685AF /* libSafariViewManager.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libSafariViewManager.a; sourceTree = "<group>"; };
 		F56CBB1B9A6449F895C858C6 /* Entypo.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Entypo.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; };
 		FC7EC6A752C243FB9F1B8442 /* RNFetchBlob.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNFetchBlob.xcodeproj; path = "../node_modules/react-native-fetch-blob/ios/RNFetchBlob.xcodeproj"; sourceTree = "<group>"; };
+		DEF5C0D12925482993072C65 /* SplashScreen.xcodeproj */ = {isa = PBXFileReference; name = "SplashScreen.xcodeproj"; path = "../node_modules/react-native-splash-screen/ios/SplashScreen.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		125552DC2FB34621A25E48C1 /* libSplashScreen.a */ = {isa = PBXFileReference; name = "libSplashScreen.a"; path = "libSplashScreen.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -572,6 +574,7 @@
 				C866080E83494D1C8B535591 /* libRNSafeArea.a in Frameworks */,
 				C9F58827F1CF47999850925A /* libRCTOrientation.a in Frameworks */,
 				757248247DDE47D3A310353E /* libRNImagePicker.a in Frameworks */,
+				A9BA0799D0074FC2A8D752CE /* libSplashScreen.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -810,6 +813,7 @@
 				8B355454DEEB4F28A5B4F8CA /* RNSafeArea.xcodeproj */,
 				713A523038564C27B0D2C2F7 /* RCTOrientation.xcodeproj */,
 				CFBB80590829494E985F601B /* RNImagePicker.xcodeproj */,
+				DEF5C0D12925482993072C65 /* SplashScreen.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -1708,6 +1712,7 @@
 					"$(SRCROOT)/../node_modules/react-native-safe-area/ios/RNSafeArea",
 					"$(SRCROOT)/../node_modules/react-native-orientation/iOS/RCTOrientation/**",
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
+					"$(SRCROOT)\..\node_modules\react-native-splash-screen\ios",
 				);
 				INFOPLIST_FILE = ZulipMobileTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 8.2;
@@ -1728,6 +1733,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -1759,6 +1765,7 @@
 					"$(SRCROOT)/../node_modules/react-native-safe-area/ios/RNSafeArea",
 					"$(SRCROOT)/../node_modules/react-native-orientation/iOS/RCTOrientation/**",
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
+					"$(SRCROOT)\..\node_modules\react-native-splash-screen\ios",
 				);
 				INFOPLIST_FILE = ZulipMobileTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 8.2;
@@ -1779,6 +1786,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -1815,6 +1823,7 @@
 					"$(SRCROOT)/../node_modules/react-native-safe-area/ios/RNSafeArea",
 					"$(SRCROOT)/../node_modules/react-native-orientation/iOS/RCTOrientation/**",
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
+					"$(SRCROOT)\..\node_modules\react-native-splash-screen\ios",
 				);
 				INFOPLIST_FILE = ZulipMobile/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
@@ -1856,6 +1865,7 @@
 					"$(SRCROOT)/../node_modules/react-native-safe-area/ios/RNSafeArea",
 					"$(SRCROOT)/../node_modules/react-native-orientation/iOS/RCTOrientation/**",
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
+					"$(SRCROOT)\..\node_modules\react-native-splash-screen\ios",
 				);
 				INFOPLIST_FILE = ZulipMobile/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 8.0;

package.json

@@ -60,6 +60,7 @@
     "react-native-sentry": "^0.37.0",
     "react-native-simple-toast": "0.0.8",
     "react-native-sound": "^0.10.9",
+    "react-native-splash-screen": "^3.0.6",
     "react-native-text-input-reset": "^1.0.2",
     "react-native-vector-icons": "^4.6.0",
     "react-navigation": "^1.5.12",

src/ZulipMobile.js

@@ -1,5 +1,5 @@
 /* @flow */
-import React from 'react';
+import React, { Component } from 'react';
 
 import '../vendor/intl/intl';
 import StoreProvider from './boot/StoreProvider';
@@ -9,25 +9,33 @@ import CompatibilityChecker from './boot/CompatibilityChecker';
 import AppEventHandlers from './boot/AppEventHandlers';
 import AppDataFetcher from './boot/AppDataFetcher';
 import AppWithNavigation from './nav/AppWithNavigation';
+import SplashScreen from 'react-native-splash-screen';
 
 require('./i18n/locale');
 require('./sentry');
 
 // $FlowFixMe
 console.disableYellowBox = true; // eslint-disable-line
 
-export default () => (
-  <CompatibilityChecker>
-    <StoreProvider>
-      <AppEventHandlers>
-        <AppDataFetcher>
-          <TranslationProvider>
-            <StylesProvider>
-              <AppWithNavigation />
-            </StylesProvider>
-          </TranslationProvider>
-        </AppDataFetcher>
-      </AppEventHandlers>
-    </StoreProvider>
-  </CompatibilityChecker>
-);
+export default class ZulipMobile extends Component {
+  componentDidMount() {
+    SplashScreen.hide();
+  }
+  render() {
+    return (
+      <CompatibilityChecker>
+        <StoreProvider>
+          <AppEventHandlers>
+            <AppDataFetcher>
+              <TranslationProvider>
+                <StylesProvider>
+                  <AppWithNavigation />
+                </StylesProvider>
+              </TranslationProvider>
+            </AppDataFetcher>
+          </AppEventHandlers>
+        </StoreProvider>
+      </CompatibilityChecker>
+    );
+  }
+}