Empowering Zephyr Cloud With a Customizable White-Label App

Sharing UI Components Across Mini-Apps

With the underlying goal of team autonomy and increasing the velocity of value creation. The app was developed within a single Nx-managed monorepo, enabling seamless code sharing across multiple packages, mini-apps, and utilities. This approach allowed us to create a centralized UI library, ensuring a consistent look and feel across various parts of the user experience. Additionally, any changes to the shared UI library were easy to test and integrate. The app ensured:

• Consistency in UX: Shared theming and accessibility standards.
• Branding Control: Unified branding elements and assets across all mini-apps.
• Efficiency: Streamlined updates to UI components without duplication.

This approach utilized libraries like React Native Paper or custom-built solutions to achieve design goals efficiently.

State and Data Management

The app employed a hybrid approach to state management, differentiating between server and client states:

• Server State: Managed using TanStack Query to provide a shared cache across mini-apps, ensuring up-to-date and synchronized data.
• Client State: Managed independently for each mini-app, with tools like Zustand and React Context to minimize coupling.

This structure allowed teams to work independently while enabling shared server states for critical data synchronization.

Federated Navigation Management

The app’s navigation system was optimized for the React Native environment, where traditional web-based routing is not applicable. The team evaluated multiple approaches and chose a centralized navigation strategy:

• Unified Navigation: A single NavigationContainer managed by the host app, simplifying linking and navigation updates.
• Challenges Addressed: While this increased coupling, it enabled better integration with mini-apps containing isolated screens.
• Future-Ready Options: The architecture allows for potential shifts to decentralized navigation to support more standalone features.

Dependency Management

To ensure consistent library versions across the project and fully leverage the OTA functionality provided by Zephyr Cloud—along with its near-instant rollbacks and deployments—we prioritized efficient and effective dependency management. To achieve this, we implemented the following strategies:

• Streamlined dependency alignment across all mini-apps and reduced maintenance overhead by utilizing Microsoft's rnx-align-deps.
• Managed react and react-native singleton versions using the Re.Pack Module Federation plugin.
• Coordinated ZephyrCloud deployments to ensure that corresponding native builds used the correct JavaScript bundle files.

Read more about how to achieve it from Zephyr Cloud’s documentation.

Shared Services with Mobile-Core SDK

A mobile-core SDK layer was developed to centralize shared services, including authentication, data storage, and localization. This provided:

• Code Reusability: Reduced duplication and simplified maintenance.
• Consistency: Ensured uniform behavior across mini-apps.
• Scalability: Allowed seamless addition of new mini-apps without re-implementing core services.

Asset Management

Handling assets in a federated mobile application presented unique challenges. The solution involved:

• Inline Assets: Used Repack’s Assets Loader to embed assets directly into the app bundle, ensuring availability across mini-apps.
• ‍Extended Asset Support: Configured loaders to handle formats like Lottie animations, broadening the app’s visual capabilities.