feat(env): ENG-5744 app-env package

[crherman7]

Describe your changes

Summary

This library introduces a comprehensive runtime environment implementation for React Native applications. The solution includes features for managing and switching between multiple environments, providing a developer menu, and integrating with both Android and iOS platforms through native modules.

---

Key Features

1. Environment Management:

   • Dynamically loads and injects environment-specific configurations during runtime.
   • Supports switching environments without requiring app rebuilds.
   • Integrates with Babel for injecting environment variables into the app code.

2. Developer Menu:

   • A dedicated Dev Menu component accessible during development.
   • Features:
     • Environment switcher with a UI to choose and apply different environments.
     • Clear storage functionality for both AsyncStorage and SensitiveInfo.
     • Restart and close buttons for quick iteration during development.

3. Cross-Platform Native Integration:

   • Android:
     • FlagshipEnvModule to manage environment variables and app information.
     • Exposes methods for setting the environment and retrieving app constants.
   • iOS:
     • Swift implementation for the FlagshipEnv module with compatibility for Info.plist.
     • Provides seamless integration with React Native’s bridge.

4. Version Overlay:

   • Displays the current app version, build number, and active environment.
   • Tap functionality to open the developer menu for quick access.

5. Metro and Babel Support:

   • Metro bundler integration ensures dynamic serving of environment files.
   • Babel plugin for replacing process.env.FLAGSHIP_APP_ENV with the respective environment configuration during the build process.

6. Utility Components and Contexts:

   • Modularized components for reuse:
     • DevMenuList, EnvSwitcher, and VersionOverlay.
   • Custom hooks and context providers for managing modal visibility, screen states, and environment selection.

---

Usage

1. Setting up environments:

   • Define environment configurations in .flagshipappenvrc and corresponding env.<name>.ts files.

2. Developer Menu:

   • Wrap your app with the DevMenu component to enable developer tools.

3. Switching Environments:

   • Use the EnvSwitcher component in the developer menu to select an environment.

4. Metro Configuration:

   • Build or start the app with metro-bundler to apply the configurations dynamically.

5. Extending:

   • Add custom screens to the developer menu by passing them to the screens prop in DevMenu.

---

Implementation Details

• Performance Optimizations:

  • Environment files are loaded once and cached for reuse during runtime.
  • Native integration minimizes the overhead of retrieving app metadata.

• Error Handling:

  • Provides clear error messages if native modules are not properly linked.
  • Fails gracefully if required environment files are missing.

• Scalability:

  • Designed to accommodate additional environments and developer tools with minimal changes.

Issue ticket number and link

Ticket

Type of change

• New feature (non-breaking change which adds functionality)

Test Plan

• yarn test

Checklist before requesting a review

• A self-review of my code has been completed
• Tests have been added / updated if required