React Native & React Native Web Splash

@chainplatform/splash is a lightweight React Native & Web library for showing global splash/loading screens using Context and animated transitions --- without relying on component state.

💧 @chainplatform/splash

A universal splash/loading overlay for React Native & React Native Web --- state-free, ultra-fast, and controlled by a static API.

🚀 Features

• ⚡ Instant show/hide --- stays mounted, no re-render delay
• 🧠 Controlled globally via Splash.show() / Splash.hide()
• 🎨 Custom logo, title, subtitle, and dynamic background color
• 🧩 Custom splash content via React node, component, or render function
• 🌍 Fully compatible with React Native Web
• 💨 Smooth animated fade transitions using Animated API
• 🪶 Minimal dependencies --- zero context/state overhead

📦 Installation

npm install @chainplatform/splash
# or
yarn add @chainplatform/splash

🧠 Basic Usage

1️⃣ Wrap your app with SplashProvider

import React from "react";
import { SplashProvider } from "@chainplatform/splash";
import MainNavigation from "./MainNavigation";

export default function App() {
  return (
    <SplashProvider theme={{ colors: { primary: "#007bff", background: "#fff" } }}>
      <MainNavigation />
    </SplashProvider>
  );
}

2️⃣ Show / Hide Splash Anywhere

import { Splash } from "@chainplatform/splash";

// Show splash instantly
Splash.show(0, "Loading", "Please wait...", "https://chainplatform.github.io/chain.png", "#fff");

// Hide splash after 1.5s
setTimeout(() => Splash.hide(0), 1500);

3️⃣ Custom Splash Content

Use object params when the splash content is more complex than logo/text/spinner. If no custom content is passed, the default rendering stays exactly the same.

import { Splash } from "@chainplatform/splash";
import WorkspaceSplash from "./WorkspaceSplash";

Splash.show({
  duration: 0,
  bg: "#050816",
  primary: "#7dd3fc",
  component: WorkspaceSplash,
  props: {
    title: "Switching workspace"
  }
});

You can also pass a React node directly:

Splash.show({
  duration: 0,
  bg: "#050816",
  content: <WorkspaceSplash title="Switching workspace" />
});

⚙️ API Reference

🔹 SplashProvider Props

Prop Type Description

theme { colors: { primary: string, background: string } } Optional color theme

bgProp string Background color (default: white)

clProp string Primary color override

content ReactNode Default custom splash content

renderContent (payload) => ReactNode Default custom splash renderer

🔹 Splash Static Methods

Method Description

Splash.show(duration, header, sub, logo, primary, bg, content) Backward-compatible positional API

Splash.show({ duration, header, sub, logo, primary, bg, content }) Object API with optional custom content

Splash.show({ duration, bg, component, props }) Render a custom component inside splash

Splash.show({ duration, bg, renderContent }) Render content from a function payload

Splash.hide(duration) Hide splash overlay

renderContent receives:

{
  visible,
  header,
  sub,
  logo,
  color,
  primary,
  bg,
  backgroundColor,
  hide
}

children is also accepted as an alias for content in the object API.

🧩 Notes

• The splash view is never unmounted --- eliminating render delay
• setNativeProps ensures instant background rendering
• Optimized for both React Native and React Native Web
• Ideal for global transitions, route loading, or async actions

🪪 License

MIT © 2025 Chain Platform

💖 Support & Donate

If you find this package helpful, consider supporting the development:

| Cryptocurrency | Address | |----------------|----------| | Bitcoin (BTC) | 17grbSNSEcEybS1nHh4TGYVodBwT16cWtc | | Ethereum (ETH) | 0xa2fd119a619908d53928e5848b49bf1cc15689d4 | | Tron (TRX) | TYL8p2PLCLDfq3CgGBp58WdUvvg9zsJ8pd | | DOGE (DOGE) | DDfKN2ys4frNaUkvPKcAdfL6SiVss5Bm19 | | USDT (SOLANA) | cPUZsb7T9tMfiZFqXbWbRvrUktxgZQXQ2Ni1HiVXgFm |

Your contribution helps maintain open-source development under the Chain Platform ecosystem 🚀