Learn to integrate splash screen to your react native app.
Tags: react, tutorial, beginners, codenewbie
Published: 2020-12-26 15:31:01

In this post I will be discussing on how you can integrate Splash Screen to your react native app.

Off late I have been working on my first react native app about budgeting which uses firebase as its backend. I decided to integrate Splash Screen to my app but I got ton of errors but after lot of googling and scavenging through stack overflow I finally got it.

My app is the mobile version of this website [Neo Budget](https://gautham-neo-budget.netlify.app/) and I have made it production ready which you can view below.

![Screen+Recording+2020-12-26+at+07.53.42.11+PM](https://dev-to-uploads.s3.amazonaws.com/i/7i5bqallth583timqxyk.gif)

Now lets learn the steps to integrate splash screen to our app.

(This post covers splash screen for android only as I do not have mac or an iPhone to do iOS development) 

#### Step 1:

Hop on to your code editor and go to the <code>android folder</code> as we will be doing all of the things there.

Now go to the java folder as below and create a new file named <code>SplashActivity.java</code>. (Remember all the file names discussed in this post must be used as the same in your project or errors will pop up.)

![Screen+Recording+2020-12-26+at+07.51.37.79+PM](https://dev-to-uploads.s3.amazonaws.com/i/t5qhvv7qdbpo5ev26bq3.gif)

Paste the code below in <code>SplashActivity.java</code>

```js
package com.notifier; // make sure this is your package name

import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.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();
    }
}
```
Now our work here is done. On to the Next Step.


#### Step 2:

Now go to <code>AndroidManifest.xml</code> and modify your code such that it includes the code specific to splash screen.
 ```js
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.notifier">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">      

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true"
        >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
            <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>  
        </intent-filter>
      </activity>

        <!-- Code for Splash screen starts here -->

 <activity
    android:name=".SplashActivity"
    android:theme="@style/SplashTheme"
    android:label="@string/app_name">
    
   </activity>

 <!-- Code for Splash screen endshere -->

 <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
 </application>

</manifest>
```

You have to note down the <code>android:exported="true"</code>
in the second activity field and include it in your code as it will not be present at first.

After doing this lets create some files in res folder.

#### Step 3:

Now hop on to res folder which is in <code>Main-->res</code>

Here we are going to create two new folders and add some files in it.

Ok lets create two folders called layout and drawable(Names must be same).

In drawable folder create a file called <code>background_splash.xml</code> and add the below code.

```js
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/blue"/>

    <item
        android:width="200dp"
        android:height="200dp"
        android:drawable="@mipmap/ic_launcher"
        android:gravity="center" />

</layer-list>

```

Now in layout folder create a file called <code><launch_screen.xml/code> and paste the code below.

```js

<?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/blue"
    android:gravity="center">
</LinearLayout>

```

Ok after doing all these steps, Lets hop on to the next one.

Step 4:

In the same <code>res folder</code> create a folder called <code>values</code> and make three files.

1.colors.xml
2.strings.xml
3.styles.xml

Now we are going to give the color of our splash screen's background in colors.xml.

```js

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="blue">#ffffff</color>
</resources>

```

Now in strings.xml we are going to give the name of our app.

```js

<resources>
    <string name="app_name">notifier</string>
</resources>


```

And in styles.xml we will be using both of the above concepts we had discussed.

```js

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
    </style>
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
        <item name="android:statusBarColor">@color/blue</item>
    </style>

</resources>

```
#### Step:5

Now the last step is to actually include the splash screen in our react-native app.

We need to install <code>react-native-splash-screen</code> with npm in our root folder and then include some code in our App.js.

```js

npm install react-native-splash-screen

```

Now in App.js, we will be using this package to help us close our Splash Screen when the app loads for the first time. If we do not include this line in our code, our app will be stuck in the splash screen.

So in App.js we will be using <code>useEffect</code> to achieve this one.

```js

import React,{useEffect} from 'react';
import {View,Text} from 'react-native'
import SplashScreen from 'react-native-splash-screen';

const App = () =>{
useEffect(() => {
    SplashScreen.hide();
  }, []);
  return(
  
<View>
<Text>Neo Budget
</Text>
</View>
)
}

export default App;
  

``` 

Congratulations you have now included splash screen into your app with your logo as well!!

This post was done at ease using this medium article about [Splash Screens](https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae). It discusses about iOS development as well.

I made this post now because, I encountered some bugs and errors  from that article as it was published 2 years ago.

The content from this post works absolutely fine like below.

![chrome-capture (42)](https://dev-to-uploads.s3.amazonaws.com/i/xaz8zzh9zqksv1gbvaam.gif)

I made my full stack mobile app about budget using the above mentioned and will be releasing it on or before new year of 2021 and I was working on it for the past 2 weeks.

I will be grateful if you guys use it and share your feedback here in dev or in google playstore reviews as well.

Next Post I will discuss about having stack navigator with Bottom Tab Navigator like my app.

![Films+&+TV+2020-12-26+at+8.58.21+PM](https://dev-to-uploads.s3.amazonaws.com/i/qpvv1vdjfkmpeqijrqg6.png )


### Thank you for reading!!

<strong> <u>Check out my portfolio: </u> [Gautham's portfolio](https://gautham-portfolio.netlify.app/)</strong>

<strong> <u> Check out my blog: </u>[coding-magnified.tech](https://coding-magnified.tech)</strong>

<strong> <u> Check React Project about budgeting: </u>[neo-budget](https://gautham-neo-budget.netlify.app/)</strong>


### <u>My Other Articles: </u>

- [Universal CSS properties everyone must know](https://dev.to/gautham495/universal-css-properties-everyone-must-use-4kie)

- [Create-react-app](https://dev.to/gautham495/creating-a-new-react-app-with-create-react-app-4e9m)

- [Git for beginners](https://dev.to/gautham495/basic-git-knowledge-for-beginners-m4p)

 
- [Change headers in react with react-helmet](https://dev.to/gautham495/changing-headers-in-react-with-react-helmet-d0d)

- [Know How to apply box-shadow on all four sides.](https://dev.to/gautham495/know-how-to-apply-box-shadow-on-all-four-sides-43pn)
 
- [Simple CSS Selectors](https://dev.to/gautham495/simple-css-selectors-for-beginners-2i44).

- [CSS Pseudo Elements](https://dev.to/gautham495/css-pseudo-elements-for-beginners-53ob).