@matb85/abcd

File-convention A/B testing and Feature Flags for Expo and React Native applications.

@matb85/abcd turns sibling React components (Header.A.tsx and Header.B.tsx) into a single A/B experiment entry. At runtime, Metro serves a cache-backed proxy that deterministically assigns each user to variant A or B, supports local and remote overrides, and tracks exposure events to your analytics.

Installation

Manual install is optional; npx @matb85/abcd init alone is enough for first-time setup.

Steps for manual installation:

npm install @matb85/abcd

Initialize your project with the abcd CLI:

npx @matb85/abcd init

Quick Example

Wrap your root app with ABTestProvider:

import { ABTestProvider } from "@matb85/abcd";

export default function Root() {
  return (
    <ABTestProvider userId="user-123">
      <App />
    </ABTestProvider>
  );
}

Create a new experiment:

npx @matb85/abcd new --name PromoBanner --component src/components/Header.tsx --metric cta_click

This creates:

• src/components/Header.A.tsx (copied from Header.tsx with "abcd-PromoBanner"; directive)
• src/components/Header.B.tsx (scaffolded B variant)
• Header.tsx is deleted locally so Metro serves the generated proxy transparently.

Run abcd types to build proxy code and .abcd/experiments.generated.ts.

Features

• ⚛️ Zero JSX refactoring: standard imports resolve to the active variant.
• 🎯 Deterministic bucketing: MurmurHash3 algorithm ensures sticky variant assignment.
• 🛠️ DevTools Overlay: toggle variants on device during development.
• 🚩 Feature Flags: boolean flags, rollout percentages, and targeted overrides.
• 🤖 MCP Integration: manage experiments via Cursor & Claude Code prompts (/api/mcp).