Loading Package

A lightweight global loading overlay handler for React Native applications. This package provides a simple and scalable way to show and hide a fullscreen loader anywhere in the app without prop drilling.

Features

• Global Loading Overlay
• Access loader anywhere using hooks
• Auto hide support with timeout
• Zero prop passing between screens
• Theme compatible (uses App Theme colors)
• Extremely small clean API (same architecture style as Map package)

Setup

1) Wrap App Root

import { LoadingProvider } from '@your-scope/loading';

export function App() {
  return <LoadingProvider>{/* App screens */}</LoadingProvider>;
}

2) Use Loading Anywhere

import { useLoadingContext } from '@your-scope/loading';

export function Example() {
  const { showLoading, hideLoading, showFor, withLoading } = useLoadingContext();

  const submit = async () => {
    showFor(1200); // auto hide after 1200ms
  };

  return <Button title="Submit" onPress={submit} />;
}

API

| Method | Type | Description | | --------------------------- | ------------- | -------------------------------------------- | | showLoading() | function | Show loader until manually hidden | | showLoading(ms) | function | Show loader and auto hide after ms | | hideLoading() | function | Hide loader immediately | | showFor(ms) | function | Same shorthand for show with timeout | | withLoading(promise/task) | async wrapper | Automatically show / hide around async calls | | isLoading | boolean | Current loader state |

Example with Async Task

await withLoading(async () => {
  await fetchData();
});

Why use this package?

• avoids prop drilling
• identical provider architecture to your Map package
• can be reused cross project
• simpler async flows

Notes

• Loading overlay automatically appears above entire app
• Timeout ensures auto hide without forgetting hideLoading()