Skip to main content

Splash screen still doesn't load first in React Native app

Step 1

For android: /android/app/src/main/res/layout add an xml file called launch_screen.xml and have the code in it like that:

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

    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/gatepasssplash" android:scaleType="centerCrop" />

</RelativeLayout>


Step 2

inside android\app\src\main\java\MainActivity.java add two lines on top as below:


import android.os.Bundle;

import org.devio.rn.splashscreen.SplashScreen;


and add 


public class MainActivity extends ReactActivity {

@Override

    protected void onCreate(Bundle savedInstanceState) {

        SplashScreen.show(this);

        super.onCreate(savedInstanceState);

   }


Build the app!

-------------------------------------------------------------------------------------------------------------------------

If showing build failed then please follow below steps:

on your project root in cmd go inside android folder by adding cd android


then run ./gradlew clean and build again.


Still problem then run on your project root npm install


it will reinstall all nodes pakcage and hopefully it will start working now.

Comments

Popular posts from this blog

OTP verification 2 minutes count down timer

Java Script  let timerOn = true; function timer(remaining) {   var m = Math.floor(remaining / 60);   var s = remaining % 60;   m = m < 10 ? '0' + m : m;   s = s < 10 ? '0' + s : s;   document.getElementById('timer').innerHTML = m + ':' + s;   remaining -= 1;   if(remaining >= 0 && timerOn) {     setTimeout(function() {         timer(remaining);     }, 1000);     return;   }   if(!timerOn) {     // Do validate stuff here     return;   }   // Do timeout stuff here   alert('Timeout for otp'); } // Then Call the function of Timer // timer(120); HTML <input type="text" name="otp" placeholer="Enter your otp"/> <div>Time left = <span id="timer"></span></div>
Error: [Reanimated] valueUnpacker is not a worklet, js engine: hermes Fixed it with a version downgrade: npm install react-native-reanimated@3.4.2 And editing the babel.config.js file: module.exports = {   presets: ['module:metro-react-native-babel-preset'],   plugins: ['react-native-reanimated/plugin'], }; 
Prevent SweetAlert to be closed on clicking outside the popup window If you are using Sweet Alert 2, you can use this configuration allowOutsideClick: false, To stop closing by escape key use below also: allowEscapeKey: false,