React Native Bootsplash

Abstract

1. Introduction

This library follows the React Native releases support policy. It is supporting the latest version, and the two previous minor series.

Show a splash screen during app startup. Hide it when you are ready.

2. Objective

🚀 Show a splash screen during app startup. Hide it when you are ready.

This project demonstrates how TypeScript, React, React Native can be applied to a real-world Mobile App Development problem.

4. Technology Stack

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm / yarn / pnpm
• VS Code or any code editor
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/zoontek/react-native-bootsplash.git
cd react-native-bootsplash

$ npm install --save react-native-bootsplash
# --- or ---
$ yarn add react-native-bootsplash

# Without license key
yarn react-native-bootsplash generate svgs/light-logo.svg \
  --platforms=android,ios,web \
  --background=F5FCFF \
  --logo-width=100 \
  --assets-output=assets/bootsplash \
  --flavor=main \
  --html=public/index.html

# With license key 🔑
yarn react-native-bootsplash generate svgs/light-logo.svg \
  --platforms=android,ios,web \
  --background=F5FCFF \
  --logo-width=100 \
  --assets-output=assets/bootsplash \
  --flavor=main \
  --html=public/index.html \
  --license-key=xxxxx \
  --brand=svgs/light-brand.svg \
  --brand-width=80 \
  --dark-background=00090A \
  --dark-logo=svgs/dark-logo.svg \
  --dark-brand=svgs/dark-brand.svg

import { useEffect } from "react";
import { Text } from "react-native";
import BootSplash from "react-native-bootsplash";

const App = () => {
  useEffect(() => {
    const init = async () => {
      // …do multiple sync or async tasks
    };

    init().finally(async () => {
      await BootSplash.hide({ fade: true });
      console.log("BootSplash has been hidden successfully");
    });
  }, []);

  return <Text>My awesome app</Text>;
};

import BootSplash from "react-native-bootsplash";

if (BootSplash.isVisible()) {
  // Do something
}

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add push notifications with Firebase Cloud Messaging
• Add offline support with local caching
• Publish an internal test build on the Play Store

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Which framework is used and why (native vs cross-platform)?
2. How is app state managed across screens?
3. Where is the data stored — locally, Firebase or a REST backend?
4. How are permissions (camera, location, storage) handled?
5. How would you publish this app to the Play Store / App Store?

9. Source Code & License

This project is developed by zoontek and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.