DEV Community

Cover image for How to add Splash Screen in a React Native Android App? 🌟

How to add Splash Screen in a React Native Android App? 🌟

C M Pandey on August 26, 2020

Hi there! The reason why you're here for this is probably that you couldn't find the correct, updated, and easiest solution to this till now! Bu...
Collapse
 
maskedman99 profile image
Rohit Prasad

react-native-splash-screen is an unmaintained package ( github.com/crazycodeboy/react-nati... ). Try react-native-bootsplash instead ( github.com/zoontek/react-native-bo... )

Collapse
 
cmcodes profile image
C M Pandey

Thanks for letting me know about this! I will switch to bootsplash soon and update this blog too! 😊

Collapse
 
rahamin1 profile image
Yossi

Thanks for this page! Any plans to update with bootsplash?

Collapse
 
subesharbadev profile image
Subesh Singh

It did worked for me , but there is white screen coming after the splash screen. I have used the .hide() into componentDidMount().

componentDidMount() {
if (Platform.OS === 'android') {
BackHandler.addEventListener(
'hardwareBackPress',
this.onAndroidBackPress,
);
}
SplashScreen.hide();
}

Collapse
 
cmcodes profile image
C M Pandey

I think you missed the step #6 where I mentioned the hide function. But, anyways it's good to know that it worked for you! 😊

Collapse
 
subesharbadev profile image
Subesh Singh

Liquid syntax error: Variable '{{ uri: {% raw %}' was not properly terminated with regexp: /\}\}/

Collapse
 
subesharbadev profile image
Subesh Singh

Liquid syntax error: Variable '{{ uri: {% raw %}' was not properly terminated with regexp: /\}\}/

Collapse
 
subesharbadev profile image
Subesh Singh

I did not missed the step #6 , actually white screen was coming after splash screen and before the content loaded properly. Now I have added an activity indicator while the site is being loaded. Thanks for this post.

Collapse
 
aneeskodappana profile image
Anees Kodappana

@cmcodes Great, worked perfectly

Collapse
 
cmcodes profile image
C M Pandey

Happy to know that it did! 😊

Collapse
 
codeby profile image
code-by

Is there possibility to add splash screen w/o any library?

Collapse
 
cmcodes profile image
C M Pandey

I don't think so! There's no native support for that yet! Although, this library is pretty reliable. It hasn't caused any problem.

Collapse
 
happycodinglover profile image
Happy Coding Lover

I have an issue
android\app\src\main\java\com\shippy\SplashActivity.java:5: error: package android.support.v7.app does not exist
import android.support.v7.app.AppCompatActivity;

How can I solve this?

Collapse
 
mofengfs profile image
I Know You Know

Thx

Collapse
 
cmcodes profile image
C M Pandey

Welcome! 😊

Collapse
 
raphaelinyang profile image
Raphaelinyang

didnt work for me, the app just loads for a few seconds then goes off

Collapse
 
cmcodes profile image
C M Pandey

Have you followed all the steps correctly? Share some more details/ a GIF showing the actual preview would be better.

Collapse
 
xtealer profile image
XTEALER

Worked really good on 2022 with few modifications. Only needed to set exported=false for new intent because android 12, everything else good!