Create Simple Splash Screen in React Native Android iOS App Tutorial

Splash Screen is a View containing Images and Text that shows when the app starts first time, it will automatically hide after few seconds(3-5) from the screen and only shows when the application starts next time. Splash screen is mostly used to show a message from app developer and also shows the progress bar while loading data from backhand. So in this tutorial we would going to implement Create Simple Splash Screen in React Native Android iOS App full example tutorial. The splash screen is mostly used in E-Commerce applications to show daily offers and daily deals directly to app user each and every time when user opens the application, like New year offers, festival offers etc. The big E-Commerce platforms FlipKart, Amazon, Jabong, E-bay, Myntra, Snapdeal and Shopclues uses the Splash screen feature in their apps.

Screenshot:

Splash screen close Icon image: This button will show just the right top corner of Splash screen, If user want to hide the splash screen before the automatically hiding time then user can close the splash screen by pressing this button.

Image used in this tutorial: I am using a welcome image in this tutorial to welcome the user on my application. You can use any image as per your requirement in this tutorial.

Contents in this project Create Simple Splash Screen in React Native Android iOS App Example Tutorial:

1. Import Platform, StyleSheet, View, Text, Image, TouchableOpacity and Alert component in your project.

2. Create constructor() in your project, Now we would make a Boolean type state named as isVisible and set its default value as True. This state is used to show and hide the Splash screen.

3. Create a function named as Hide_Splash_Screen(), This function would change the State value as False.

4. Create componentDidMount() method in your class. This is a inbuilt method and called automatically when app starts up every time. We are using the setTimeout() JavaScript function to change state after given time. So it would automatically change the state value. Here 1000 = 1 second.

5. Create Splash screen view in render’s block and store the complete View inside let variable.

6. Create A root View in render’s return block. Now we would call the Splash_Screen with Ternary operator, If the value of State is True then it will show the Splash screen and if the State value is false the it will hide the splash screen.

7. Create Style.

8. Complete source code for App.js File :

Screenshots in Android device :

Create Simple Splash Screen in React NativeScreenshots in iOS device :

17 Comments

  1. what is that=this sir?????????????

  2. Sir in componentwillmount

    var that=this; ??????what is that????????

  3. that is just a var?

  4. this is not the splash screen. this is a real misunderstanding of splash screen conseption

  5. Hello sir,
    thanks for the code. it worked for me but I had a white area between the status bar and the splash and I don’t know why . can you help me please?

  6. Nice post, thank you!
    While it does not use the classic concept of an app splash screen (system-driven more than application-driven), it is a really simple solution.
    Are you aware of any limitations your approach might have compared to other solutions that require using the specific OS IDE’s (Android Studio and XCode) and/or additional splash screen libraries?

  7. How can this called be a Splash Screen ?
    Splash Screen should be shown at the time of App loading not after the App is loaded.

  8. sir navigation bar is showing with splash screen how i can hide bar for splash screen and show for home screen

  9. If i will go with this approach, specially in iOS, first iOS will show its default splash screen and then load our react native application. Does there any way that i can directly load react native page and avoid that white/black screen in iOS application.

Leave a Reply

Your email address will not be published. Required fields are marked *