Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

December 26, 2020 03:31 pm GMT

Learn to integrate splash screen to your react native app.

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 and I have made it production ready which you can view below.

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 android folder as we will be doing all of the things there.

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

Paste the code below in SplashActivity.java

package com.notifier; // make sure this is your package nameimport 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();    }}

Enter fullscreen mode Exit fullscreen mode

Now our work here is done. On to the Next Step.

Step 2:

Now go to AndroidManifest.xml and modify your code such that it includes the code specific to splash screen.

 <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">    <intent-filter>        <action android:name="android.intent.action.MAIN" />        <category android:name="android.intent.category.LAUNCHER" />    </intent-filter>   </activity> <!-- Code for Splash screen endshere --> <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> </application></manifest>

Enter fullscreen mode Exit fullscreen mode

You have to note down the android:exported="true"
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 Main-->res

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 background_splash.xml and add the below code.

<?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>

Enter fullscreen mode Exit fullscreen mode

Now in layout folder create a file called and paste the code below.

<?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>

Enter fullscreen mode Exit fullscreen mode

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

Step 4:

In the same res folder create a folder called values 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.

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

Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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

<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>

Enter fullscreen mode Exit fullscreen mode

Step:5

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

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

npm install react-native-splash-screen

Enter fullscreen mode Exit fullscreen mode

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 useEffect to achieve this one.

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;

Enter fullscreen mode Exit fullscreen mode

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. 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.

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.

Thank you for reading!!

Check out my portfolio: Gautham's portfolio

Check out my blog: coding-magnified.tech

Check React Project about budgeting: neo-budget

My Other Articles:

Original Link: https://dev.to/gautham495/learn-to-integrate-splash-screen-to-your-react-native-app-fgf

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To