Usage

Once a provider is active, reading a flag is a one-liner with OpenFeature hooks from @workspace/flags.

Flag keys

Keys live in one place so web, mobile, and extension stay aligned:

export const Flag = {
  DEMO: "demo",
} as const;

Import Flag from @workspace/flags and pass the constant into hooks.

Evaluate in a screen

import { Flag, useBooleanFlagValue } from "@workspace/flags";
import { Text } from "@workspace/ui-mobile/text";

export const BetaBadge = () => {
  const enabled = useBooleanFlagValue(Flag.DEMO, false);

  if (!enabled) {
    return null;
  }

  return <Text>Beta features unlocked</Text>;
};

The settings screen uses the same pattern for the demo banner:

const demo = useBooleanFlagValue(Flag.DEMO, false);

Other value types:

Always pass a sensible default as the second argument. That value is used while the provider loads, or if evaluation fails.

Targeting context

apps/mobile/src/lib/providers/flags.tsx already syncs auth state into OpenFeature:

if (session.data?.user) {
  const { id, email, name } = session.data.user;
  void setContext({ targetingKey: id, email, name });
  return;
}

void clearContext();

You rarely need to call setContext / clearContext yourself. Import them from @workspace/flags-mobile when you do.

With PostHog, context sync identifies the person and reloads feature flags so cohort rules apply promptly after sign-in.

Add a new flag

export const Flag = {
  DEMO: "demo",
  NEW_ONBOARDING: "NEW_ONBOARDING", 
} as const;

[Flag.NEW_ONBOARDING]: {
  disabled: false,
  variants: { on: true, off: false },
  defaultVariant: "off",
},

const showOnboarding = useBooleanFlagValue(Flag.NEW_ONBOARDING, false);

Troubleshooting