2024-09-17
2717
#react native
Emmanuel Etukudo
38123
Sep 17, 2024 â‹… 9 min read

Building splash screens in React Native

Emmanuel Etukudo I am a full-stack developer with more than five years of experience, with a preference for JavaScript, Node.js, Go, React, Redux, and MongoDB.

Recent posts:

A crash course in Next.js middleware

A crash course in Next.js middleware

Learn the ins and outs of Next.js middleware, which allows you to perform actions before a request is completed and modify the response accordingly.

Temitope Oyedele
May 23, 2025 â‹… 9 min read
How AI Is Changing Debugging With Google Gemini

How AI is changing debugging with Google Gemini

The Google Gemini AI model has integrated AI-powered features to improve the debugging experience in web development.

Emmanuel John
May 23, 2025 â‹… 5 min read
10 Node.js 24 features you're probably not using

10 Node.js 24 features you’re probably not using

The Node.js 24 release included significant updates. Explore 10 features you might not be using yet — but absolutely should be.

Emmanuel John
May 22, 2025 â‹… 8 min read
six CSS animation libraries to bring your project to life in 2025

6 CSS animation libraries to bring your project to life in 2025

Explore six of the best, easiest, most configurable, and convenient CSS animation libraries available in 2025.

Murat YĂĽksel
May 22, 2025 â‹… 8 min read
View all posts

20 Replies to "Building splash screens in React Native"

  1. Logrocket articles are usually so good but I feel this one is not up to the usual quality – in that it is not simple to follow along. Small example is your final code in App.js uses react-navigation but there has been no instruction to import this or learn how to use it first. The other thing is simply replacing the standard AppManifest with your copied code is not great form an instructional point of view – What did all the other default code do that we have now deleted? There are many small things like this that just make it a bit harder that the usual tutorials. Don’t want to knock what is otherwise a very useful tutorial but I think a review and minor edit would be helpful

  2. Thanks for the tutorial, small remark though. Inside launch_screen.xml it should be

    android:src=”@drawable/splashscreen”

    instead of

    android:src=”@drawable/launch_screen”

  3. I don’t understand if you mean to copy the ENTIRE android and iOS folders into assets or just an empty Android and iOS folder? That seems weird to copy the entire thing in there.

    1. Someone else posted this exact tutorial and I found out on GitHub that RNSplashScreen show has a bug and didn’t ever and will never work. Were you able to actually get it to work?

  4. I can’t update my MainActivity.java for which the code showed here. React Native updated and it has more codes on this file, and if i update as showing here, it crashes.

  5. Execution failed for task ‘:app:processDebugResources’.
    xxxx\android\app\src\main\res\layout\launch_screen.xml:5: AAPT: error: resource drawable/splash.png (aka com.sipcall:drawable/splash.png) not found.

    I thought maybe I hade to copy the splash image to the drawable folder also, I did, but it did not work.

  6. Where you called the splashscreen.xml i cant able to show the design which i added in this folder.

    1. No need to call the xml file from our side , that file we are creating for the package only. Package will access and show it on the starting.

  7. need to add some navigation conditions on splash screen what will i do… as i have no acess of navigation object in app.tsx

    1. If you haven’t solved this yet, this is what i did to resolve it.

      Immediately below getMainComponentName() method add a method to override onCreate

      @Override
      protected void onCreate(Bundle savedInstanceState) {
      SplashScreen.show(this);
      super.onCreate(savedInstanceState);
      }

  8. Execution failed for task ‘:app:processDebugResources’.
    > A failure occurred while executing com.android.build.gradle.internal.res.LinkApplicationAndroidResourcesTask$TaskAction
    > Android resource linking failed
    ERROR:D:\medivarsal\Customer_mediversal\nativeapp\android\app\src\main\res\layout\launch_screen.xml:5: AAPT: error: resource drawable/launch_screen (aka com.mediversal:drawable/launch_screen) not found.

  9. Hello, I am getting from Play Console Pre-Launch Warning “Double splash screen” warning after creating this splashscreen.

    Warning is

    “Android compatibility issues”
    Double splash screen
    Warning : The crawler detected a blank loading screen or a custom splash screen that is shown in your app after the system splash screen. Users launching your app on Android 12 or higher will see two splash screens.

Leave a Reply