LaunchDarkly Migration SDKs

Import-compatible SDK options for migrating LaunchDarkly React and React Native apps to Truflag.

Packages

Use these packages when your app already uses LaunchDarkly client-side APIs and you want an import-level migration path.

React

$Terminal

npm install truflag-launchdarkly-react-client-sdk

React Native

$Terminal

npm install truflag-launchdarkly-react-native-client-sdk

React migration

Swap imports, keep the same provider and hook usage, and pass your Truflag public key as clientSideID.

TSTypeScript

// before
import { withLDProvider, useFlags, useLDClient } from "launchdarkly-react-client-sdk";
 
// after
import { withLDProvider, useFlags, useLDClient } from "truflag-launchdarkly-react-client-sdk";

TSTypeScript

import { withLDProvider, useFlags, useLDClient } from "truflag-launchdarkly-react-client-sdk";
 
function CheckoutEntry() {
  const flags = useFlags();
  const ldClient = useLDClient();
  const checkoutEnabled = Boolean(flags.checkoutV2);
 
  const onCheckoutComplete = () => {
    ldClient?.track("checkout_completed", { source: "web" }, 1);
  };
 
  return (
    <button onClick={onCheckoutComplete}>
      {checkoutEnabled ? "New checkout" : "Legacy checkout"}
    </button>
  );
}
 
export default withLDProvider({
  clientSideID: process.env.NEXT_PUBLIC_TRUFLAG_CLIENT_KEY!,
  context: { kind: "user", key: "user-123", plan: "pro" },
})(CheckoutEntry);

React Native migration

Construct ReactNativeLDClient with your Truflag public key, then keep the provider and variation hooks.

TSTypeScript

// before
import {
  ReactNativeLDClient,
  AutoEnvAttributes,
  LDProvider,
  useBoolVariation,
} from "launchdarkly-react-native-client-sdk";
 
// after
import {
  ReactNativeLDClient,
  AutoEnvAttributes,
  LDProvider,
  useBoolVariation,
} from "truflag-launchdarkly-react-native-client-sdk";

TSTypeScript

import { useEffect } from "react";
import {
  AutoEnvAttributes,
  LDProvider,
  ReactNativeLDClient,
  useBoolVariation,
} from "truflag-launchdarkly-react-native-client-sdk";
 
const client = new ReactNativeLDClient(
  process.env.EXPO_PUBLIC_TRUFLAG_CLIENT_KEY!,
  AutoEnvAttributes.Enabled,
  { streaming: true },
);
 
function CheckoutGate() {
  const enabled = useBoolVariation("new-checkout-experience", false);
  return enabled ? <CheckoutV2 /> : <CheckoutV1 />;
}
 
export default function App() {
  useEffect(() => {
    void client.identify({ kind: "user", key: "user-123", plan: "pro" });
  }, []);
 
  return (
    <LDProvider client={client}>
      <CheckoutGate />
    </LDProvider>
  );
}

Core APIs

TTEXT

React package
- withLDProvider(config)
- asyncWithLDProvider(config)
- LDProvider
- useFlags()
- useLDClient()
- client.variation(key, fallback)
- client.identify(context)
- client.track(eventKey, data?, metricValue?)
 
React Native package
- new ReactNativeLDClient(sdkKey, autoEnvAttributes, options)
- LDProvider
- useLDClient()
- useBoolVariation / useNumberVariation / useStringVariation / useJsonVariation
- client.variation(key, fallback)
- client.identify(context)
- client.track(eventKey, data?, metricValue?)

For direct Truflag SDK usage, see React SDK and React Native SDK.