<aside> ⛔ The repository is deprecated use https://www.npmjs.com/package/@react-stateless-dialog/core instead

</aside>

react-native-global-flow is a powerful React Native library that allows developers to effortlessly show important information to users within their apps. With a range of versatile features, including a customizable banner, a global progress modal, and a convenient dialog manager, this library simplifies the process of delivering essential messages to your user without the need of managing painful states.

Key Features:

• Global Banner: Display eye-catching banners at the top of the app to instantly grab user attention. Customize the content and appearance of the banners to suit your app’s branding and requirements.
• Global Progress: Easily manage global progress indicators that inform users about ongoing background tasks or operations. Show progress, loading spinners to provide real-time feedback on the status of actions.
• Dialog Manager: Effortlessly push dialogs using a simple React hook.

Know issues & Improvements

• [x] Manage back button to close dialog on Android
• [x] Manage keyboard aware
• [ ] When the keyboard is open, opening a Dialog doesn’t hide the keyboard
• [ ] Support animation on close Dialog
• [ ] Be able to swipe GlobalBanner with finger gesture
• [ ] Manage Custom Snackbar (like https://jeongshin.github.io/docs/UIs/SimpleSnackbarUI)

Installation & Setup

yarn add @boltcode/react-native-global-flow

# The library rely on react-native-reanimated & react-native-safe-area-context, you need to install these packages in your project
# react-native-reanimated, minimum version 3.3.0
yarn add react-native-reanimated react-native-safe-area-context

Setup react-native-reanimated:

// Add this to your babel.config.js :
plugins: ['react-native-reanimated/plugin']

Setup the provider:

import { SafeAreaProvider } from 'react-native-safe-area-context';
import { GlobalFlowProvider } from '@boltcode/react-native-global-flow';

const App = () => {
  // Note: SafeAreaProvider is required to make the library working
  return (
    <SafeAreaProvider>
      <GlobalFlowProvider>
          {/* Your app */}
      </GlobalFlowProvider>
    </SafeAreaProvider>
  );
};

Usage