Set up React Native SDK

1
import {
2
  AutoEnvAttributes,
3
  LDProvider,
4
  ReactNativeLDClient,
5
} from '@launchdarkly/react-native-client-sdk';
6
7
// This is your mobile key.
8
const ldClient = new ReactNativeLDClient('YOUR_MOBILE_KEY', AutoEnvAttributes.Enabled, {
9
  debug: true,
10
  applicationInfo: {
11
    id: 'ld-rn-test-app',
12
    version: '0.0.1',
13
  },
14
});
15
16
// A "context" is a data object representing users, devices, organizations, and other entities.
17
const context = { kind: 'user', key: 'EXAMPLE_CONTEXT_KEY' };
18
19
const App = () => {
20
  useEffect(() => {
21
    ldClient.identify(context);
22
  }, []);
23
24
  return (
25
    <LDProvider client={ldClient}>
26
      <YourComponent />
27
    </LDProvider>
28
  );
29
};
30
31
export default App;

1
import React, { useEffect, useState, useCallback } from 'react';
2
import {
3
  AutoEnvAttributes,
4
  LDProvider,
5
  ReactNativeLDClient,
6
} from '@launchdarkly/react-native-client-sdk';
7
8
// This is your mobile key.
9
const ldClient = new ReactNativeLDClient('YOUR_MOBILE_KEY', AutoEnvAttributes.Enabled, {
10
  debug: true,
11
  applicationInfo: {
12
    id: 'ld-rn-test-app',
13
    version: '0.0.1',
14
  },
15
});
16
17
// A "context" is a data object representing users, devices, organizations, and other entities.
18
const context = { kind: 'user', key: 'EXAMPLE_CONTEXT_KEY' };
19
20
export default function App() {
21
  const [ready, setReady] = useState<boolean>(false);
22
  // Wait for identify to complete before rendering, so no flag evaluates
23
  // against defaults during startup.
24
  useEffect(() => {
25
    (async () => {
26
      await ldClient.identify(context);
27
      setReady(true);
28
    })();
29
  }, []);
30
  // Call trackMetric when a metric action occurs in your app —
31
  // a tap, a form submit, a screen view, a custom event, whatever your metric measures.
32
  const trackMetric = useCallback(
33
    (metricKey: string, data?: unknown) => {
34
      ldClient.track(metricKey, data);
35
    },
36
    [],
37
  );
38
  if (!ready) return null;
39
  return (
40
    <LDProvider client={ldClient}>
41
      <YourComponent />
42
    </LDProvider>
43
  );
44
}