Build Splash Screen Component for Your App

Learn how to add Splash Screen functionality to your custom React Native and Django app with Crowdbotics.

What is the Splash Screen component and how much does it cost?

A screen that greets your users with an image or logo before automatically transitioning to another page. It usually takes between 4.5 and 5.5 hours and costs $375 to add Splash Screen to an application.

How does the Splash Screen component work?

This feature displays a short, branded welcome animation or image when users open the app. It automatically transitions to a designated login or home screen after a set amount of time. It includes customizable backgrounds and content.

What is the Splash Screen component used for?

Here are some common Splash Screen user stories in a custom app build:

As a new user, I would like to see a brief welcome animation when I open the app.

Splash Screen component README file

Splash Screen

The Splash Screen is a ReactNative based splash screen, by that means, it truly isn't executed until after the app is fully loaded. If it's desired to appear during load, you will need to build a native screen in both Android and iOS directories of the project.

Installation

After you have added the screen module into your project, you will need to configure a few items by modifying the project files in the github repository. Please note to replace ####### with the numeric sequence for your screen (found in folder name under /src/features) and also that the @BluePrint tags for ImportInsertion and NavigationInsertion will be removed in future so placement is with other imports and inside the AppNavigator above other screens.

Step 1: Add screen into your project screen navigation and set splash screen as initial routed screen.

/src/mainNavigator.js: ADD immediately below in the section labeled //@BlueprintImportInsertion:

import SplashScreen#######Navigator from '../features/SplashScreen#######/navigator';

ADD immediately below in the section inside AppNavigator definition labeled //@BlueprintNavigationInsertion section:

SplashScreen#######: { screen: SplashScreen#######Navigator },

ADD comma after contentComponent: Sidemenu, and initialRoutName so that your code looks like:

const DrawerAppNavigator = createDrawerNavigator(
{
...AppNavigator,
},
{
contentComponent: SideMenu,
initialRouteName: "SplashScreen#######", // Splash Screen
},
);

STEP 2: Change the redirect screen for splash to your desired screen (likely home or onboarding screens).

MODIFY Line 22 of generated screen /src/features/SplashScreen#####/screens/index.js file (replace Onboarding177768 with your desired destination screen - likely home or onboarding screens):

this.props.navigation.navigate('Onboarding177768')

STEP (OPTIONAL): Changing time for splash screen.

The time set in the screen is set for 3000 ms or 3 seconds. To change this, change the number on Line 23 from 3000 to your desired number of milliseconds.

Step: (OPTIONAL): Update project to include your screen in the sidemenu navigation list.

/src/config/installed_blueprints.js: Make sure any screens that aren’t desired in the side menu are removed from the file. This list should only contain the screens desired to be linked on the side menu hamburger. Every screen that you want to show in the sidemenu should be added as follows:

{ name: 'SplashScreen#######', human_name: 'Splash Screen’, access_route: 'SplashScreen#######'}

name: doesn't matter much, its used as a unique key for the side menu and splash screens array of buttons, it must be unique, that's the only requirement

human_name: is what will be displayed in actual app

access_route: must be the name of the key in your mainNavigator setup

‍

This component does not yet have a README file. However, another Crowdbotics user may have created this component and shared it as a free community component.

Browse our community components for the Splash Screen component.

Full Splash Screen component code

import React from "react";
import {
  View,
  Image,
  ImageBackground,
  TouchableOpacity,
  Text,
  Button,
  Switch,
  TextInput,
  StyleSheet,
} from "react-native";
import DateTimePicker from 'react-native-datepicker';
import Icon from 'react-native-vector-icons/FontAwesome';
import Slider from '@react-native-community/slider';
import { CheckBox } from 'react-native-elements';
import { SlideMenuIcon } from '../../navigator/slideMenuIcon';

export default class Blank extends React.Component {
  componentDidMount() {
    setTimeout(() => {
      this.props.navigation.navigate('Onboarding177768') //onboarding
    }, 3000);
  }
  static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: <SlideMenuIcon navigationProps={navigation} />,
    };
  };

  state = {};

  render = () => (
    <View style={styles.container}>
      <Image style={{ width: '100%', height: '100%' }} source={require('../../assets/images/splashBack.png')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

This component is not yet available as a verified component in the Crowdbotics platform. However, another Crowdbotics user may have created it and shared it as a free community component.

Browse our community components for the Splash Screen component.

Recommended components for you

User Profile

Onboarding Slides

Articles

Chat

Google Sign Up

Apple Sign Up

All component categories

Add this feature to your project

Snap Splash Screen into your app along with our full library of prebuilt components.

Import layouts directly from Figma and visually build backend data models.

Two-way GitHub sync and automated deployments to Heroku will have your app up and running in minutes.

Add Splash Screen to My App

Build with more components from Crowdbotics

Crowdbotics can build your custom app with Splash Screen functionality and hundreds of other components.

Go from specs to code 4X faster than conventional development.

Our expert PMs and developers are standing by to provide a detailed quote and build timeline.

Start Building

Search All Components: