blui-react-native

This blui-react-native is the one stop repository for all of the Brightlayer UI React Native packages, showcase examples and consolidated dev docs projects within a single codebase. You need to clone this repo and do yarn install at root level, all of the projects dependencies will be installed together, then checkout to any of the project folder and run.

Included Packages

• auth-workflow

• cli-templates

• components

• progress-icons

• themes

Contributing

Prerequisites:

Node.js and npm installed (https://nodejs.org/en/download/package-manager)

Clone the Repository:

git clone https://github.com/etn-ccis/blui-react-native.git

Install Dependencies:

cd blui-react-native
yarn install

Run docs project:

cd docs
yarn dev

Run example projects:

cd examples/showcase
yarn start

Development Workflow & Hot Reloading

This repository includes a sophisticated hot reloading system that enables real-time development across all packages and example applications. The watch system automatically builds and syncs changes from library packages to example apps, providing instant feedback during development.

🚀 Quick Start with Hot Reloading

For the best development experience, use the unified watcher that monitors all packages simultaneously:

# Start watching all packages (recommended)
yarn watch:all

This single command will:

• Watch for changes in all 4 packages (components, themes, auth-workflows, progress-icons)
• Automatically rebuild TypeScript files when changed
• Sync built files to relevant example applications
• Provide color-coded logs for easy debugging

🚀 Development Tips

1. Start watcher first: Run yarn watch:all before starting example apps for best experience
2. Save triggers rebuild: Any save in package src/ directories triggers automatic rebuild and sync
3. Check logs: Color-coded logs help identify which package is being processed
4. Graceful shutdown: Use Ctrl+C to properly stop all watchers

📊 Package-to-App Mapping

Each package syncs to specific example applications:

Package	Example Apps
Components	showcase, designPatterns, expoShowcase
Themes	showcase, designPatterns, expoShowcase
Progress Icons	showcase, designPatterns, expoShowcase
Auth Workflows	workflowexample-expo, workflow

🛠️ How Hot Reloading Works

1. File Watching: Uses chokidar to monitor TypeScript/TSX files in package src/ directories
2. Incremental Build: Compiles only changed files using TypeScript's incremental compilation
3. ESM Compatibility: Runs tsc-esm-fix to ensure ES module compatibility
4. File Sync: Copies built files (.js, .d.ts, .map) to watchPackages directories
5. Metro Reload: Updates file timestamps to trigger React Native Metro bundler reload