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:

DesignCoder and the future of AI-generated UI

From sketches to code in minutes, DesignCoder shows how AI-generated, hierarchy-aware UIs could change the way developers prototype and ship apps.

Rosario De Chiara
Oct 7, 2025 ⋅ 5 min read

Would You Use If() functions in CSS?

It’s 2025, and CSS finally thinks logically. The if() function brings real conditional styling — no hacks, no JS workarounds. Here’s how to use it right.

Ikeh Akinyemi
Oct 7, 2025 ⋅ 16 min read
Typescript or Zod for Validation?

TypeScript vs Zod: Clearing up validation confusion

Learn when to use TypeScript, Zod, or both for data validation. Avoid redundant checks and build safer, type-sound applications.

Alexander Godwin
Oct 6, 2025 ⋅ 3 min read
Wasm 3 Before GTA 6 LogRocket Article

We got Wasm 3.0 before GTA 6: Meet the web’s new engine

Discover how WebAssembly 3.0’s garbage collector, exception handling, and Memory64 transform Wasm into a true mainstream web platform.

Ikeh Akinyemi
Oct 3, 2025 ⋅ 2 min read
View all posts

21 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