adding splash screen

README.md

@@ -62,3 +62,73 @@ include ':app'
 $    yarn add lottie-react-native
 $    npx react-native link lottie-react-native
 ```
+
+2. Install splash screen package
+
+```bash
+$    yarn add react-native-splash-screen
+$    npx react-native link react-native-splash-screen
+```
+
+MainActivity.java
+
+```java
+    import android.os.Bundle;
+    import org.devio.rn.splashscreen.SplashScreen;
+
+    //...
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        SplashScreen.show(this);
+        super.onCreate(savedInstanceState);
+    }
+
+```
+
+android\app\src\main\res\layout\launch_screen.xml
+
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="vertical" android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@drawable/gradient">
+    <ImageView
+        android:layout_marginTop="-40dp"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:scaleType="centerInside"
+        android:src="@drawable/brand_logo" />
+    <ImageView
+        android:layout_width="90dp"
+        android:layout_height="20dp"
+        android:layout_marginBottom="10dp"
+        android:layout_centerHorizontal="true"
+        android:layout_alignParentBottom="true"
+        android:src="@drawable/company_logo" />
+</RelativeLayout>
+```
+
+android\app\src\main\res\drawable\gradient.xml
+
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:type="sweep"
+        android:startColor="#780206"
+        android:endColor="#061161" />
+</shape>
+```
+
+android\app\src\main\res\drawable\company_logo.png <---add splash img
+android\app\src\main\res\drawable\brand_logo.png <---add splash img
+
+when we destroy splash screen in js with
+
+```js
+import SplashScreen from "react-native-splash-screen";
+
+SplashScreen.hide();
+```

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

@@ -1,9 +1,17 @@
 package com.codepusharge;
 
 import com.facebook.react.ReactActivity;
+import android.os.Bundle;
+import org.devio.rn.splashscreen.SplashScreen;
 
 public class MainActivity extends ReactActivity {
 
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+      SplashScreen.show(this);
+      super.onCreate(savedInstanceState);
+  }
+
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.

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

@@ -4,6 +4,7 @@
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import org.devio.rn.splashscreen.SplashScreenReactPackage;
 import com.airbnb.android.react.lottie.LottiePackage;
 import com.microsoft.codepush.react.CodePush;
 import com.facebook.react.ReactInstanceManager;

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

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:type="sweep"
+        android:startColor="#780206"
+        android:endColor="#061161" />
+</shape>

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

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="vertical" android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@drawable/gradient">
+    <ImageView
+        android:layout_marginTop="-40dp"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:scaleType="centerInside"
+        android:src="@drawable/brand_logo" />
+    <ImageView
+        android:layout_width="90dp"
+        android:layout_height="20dp"
+        android:layout_marginBottom="10dp"
+        android:layout_centerHorizontal="true"
+        android:layout_alignParentBottom="true"
+        android:src="@drawable/company_logo" />
+</RelativeLayout>

android/settings.gradle

@@ -1,7 +1,14 @@
 rootProject.name = 'codepusharge'
+
+include ':react-native-splash-screen'
+project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
+
 include ':lottie-react-native'
 project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
+
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+
 include ':react-native-code-push'
 project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
+
 include ':app'

ios/Podfile

@@ -12,6 +12,8 @@ target 'codepusharge' do
 
   pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'
 
+  pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
+
   target 'codepushargeTests' do
     inherit! :complete
     # Pods for testing

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "run": "npx react-native run-android",
+    "runandroid": "npx react-native run-android",
     "android": "clear && cd android && ./gradlew clean && cd .. && react-native run-android",
     "release": "clear && cd android && ./gradlew clean && cd .. && react-native run-android --variant=release",
     "codepush": "code-push release-react cpdeneme android -d Production",
@@ -13,7 +13,8 @@
     "lottie-react-native": "^3.5.0",
     "react": "16.13.1",
     "react-native": "0.63.4",
-    "react-native-code-push": "^6.4.0"
+    "react-native-code-push": "^6.4.0",
+    "react-native-splash-screen": "^3.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",

src/index.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import CodePush from "react-native-code-push";
+import SplashScreen from "react-native-splash-screen";
 
 import { Strings } from "./components/Strings";
 import App from "./App";
@@ -33,6 +34,7 @@ const Application = () => {
 
         break;
       case CodePush.SyncStatus.AWAITING_USER_ACTION:
+        SplashScreen.hide();
         setCP({
           Message: Strings.CodePush.WaitingAction,
           Info: "",
@@ -68,6 +70,7 @@ const Application = () => {
         });
 
         setTimeout(() => {
+          SplashScreen.hide();
           setCP({
             Message: "",
             Info: "",

yarn.lock

@@ -5791,6 +5791,11 @@ react-native-safe-modules@^1.0.0:
   dependencies:
     dedent "^0.6.0"
 
+react-native-splash-screen@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-native-splash-screen/-/react-native-splash-screen-3.2.0.tgz#d47ec8557b1ba988ee3ea98d01463081b60fff45"
+  integrity sha512-Ls9qiNZzW/OLFoI25wfjjAcrf2DZ975hn2vr6U9gyuxi2nooVbzQeFoQS5vQcbCt9QX5NY8ASEEAtlLdIa6KVg==
+
 react-native@0.63.4:
   version "0.63.4"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.63.4.tgz#2210fdd404c94a5fa6b423c6de86f8e48810ec36"