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:

Debugging with Chrome DevTools MCP: Giving AI eyes in the browser

Debugging with Chrome DevTools MCP: Giving AI eyes in the browser

Learn how to effectively debug with Chrome DevTools MCP server, which provides AI agents access to Chrome DevTools directly inside your favorite code editor.

Emmanuel John
Oct 21, 2025 ⋅ 6 min read
Goodbye, useState? Smarter state modeling for modern React apps

Goodbye, useState? Smarter state modeling for modern React apps

Ever opened a React file and found a graveyard of useState hooks? The problem isn’t React; it’s how we model state. Here’s how to do it smarter.

Oscar Jite-Orimiono
Oct 21, 2025 ⋅ 9 min read

Why third-party integrations break in React 19 — And how to future-proof them

React 19 breaks old third-party integrations. Learn why concurrent rendering exposes brittle SDKs and how to rebuild them with resilient modern patterns.

Peter Aideloje
Oct 20, 2025 ⋅ 4 min read
React useEffectEvent: Goodbye to stale closure headaches

React useEffectEvent: Goodbye to stale closure headaches

Discover why the useEffectEvent Hook is important, how to use it effectively, and how it compares to useRef.

David Omotayo
Oct 17, 2025 ⋅ 5 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

Would you be interested in joining LogRocket's developer community?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Sign up now