RN Dev Flag

A React Native package for managing feature flags in development environments.

Installation

npm install @seoulcomix-hub/rn-dev-flag
# or
yarn add @seoulcomix-hub/rn-dev-flag

Prerequisites

This package has the following peer dependencies:

• @tanstack/react-query: >=5.0.0
• react: >=18
• react-native: >=0.73
• react-native-safe-area-context: >=4.0.0
• expo-application: >=6.0.0

Ensure these are installed in your project.

Usage

Setting up the Provider

Wrap your application or component tree with the DevFlagProvider:

import { DevFlagProvider } from "@seoulcomix-hub/rn-dev-flag";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <DevFlagProvider
        projectName="your-project-name"
        enabled={
          process.env.EXPO_PUBLIC_PROJECT_ENV === "Development" ||
          process.env.EXPO_PUBLIC_PROJECT_ENV === "Local"
        }
      >
        {/* Your app components */}
      </DevFlagProvider>
    </QueryClientProvider>
  );
}

Important: The DevFlagProvider must be used inside a QueryClientProvider from @tanstack/react-query as it relies on React Query for data fetching.

Using Dev Flags in Components

There are two main hooks for accessing dev flags:

1. useDevFlags() - Access all dev flags, project information, and control methods
2. useDevFlag(key) - Check if a specific feature flag is enabled

import { useDevFlag, useDevFlags } from "@seoulcomix-hub/rn-dev-flag";

function MyComponent() {
  // Check a specific flag
  const isNewFeatureEnabled = useDevFlag("new-feature");

  if (isNewFeatureEnabled) {
    return <NewFeature />;
  }

  return <LegacyFeature />;
}

Important: If the enabled prop in DevFlagProvider is not true, all dev flags will always return false. This ensures that development features are not accidentally enabled in production environments.

Dev Flag Management UI

The package includes a built-in screen component for managing dev flags:

import { DevFlagScreen } from "@seoulcomix-hub/rn-dev-flag";

function DevSettingsScreen() {
  return <DevFlagScreen />;
}

This screen allows developers and QA people to:

• View all available feature flags
• Toggle flags on/off
• See their device ID
• Refresh the flags from the server

API Reference

Components

• DevFlagProvider: Context provider that fetches and manages dev flags
  • Props:
    • projectName (required): Name of your hub project
    • children: React components

Hooks

• useDevFlags(): Access the dev flag context

  • Returns:
    • devFlags: Array of dev flag objects
    • projectName: Current project name
    • deviceId: Device identifier
    • refetch: Function to refresh dev flags
    • isLoading: Boolean indicating if flags are loading

• useDevFlag(key): Check if a specific flag is enabled

  • Parameters:
    • key: String identifier for the flag
  • Returns:
    • Boolean indicating if the flag is enabled
    • Note: Always returns false if enabled prop from DevFlagProvider is not true

DevFlag Object Structure

interface DevFlag {
  id: string; // Unique identifier
  key: string; // Feature flag key
  enabled: boolean; // Flag status
}

Server Integration

This package connects to a server endpoint to manage flags. The API endpoint used is: https://api.hub.seoulcomix.com/project/dev-flags/

Note: Creation and management of dev flags can be done through the Seoulcomix Hub site. Visit the Hub dashboard to create new dev flags for your project before using them in your application.