npm package: @seoulcomix-hub/rn-dev-flag
Description: A React Native package for managing feature flags in development environments.
Latest version: 0.0.6

## RN Dev Flag

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

### Installation

```bash
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`:

```tsx
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

```tsx
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:

```tsx
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

```ts
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.