diff --git a/packages/sdk/react-native/README.md b/packages/sdk/react-native/README.md index 8e85c0cae..6f9588528 100644 --- a/packages/sdk/react-native/README.md +++ b/packages/sdk/react-native/README.md @@ -1,6 +1,7 @@ # LaunchDarkly React Native SDK -:warning: UNSUPPORTED This SDK is in pre-release development and is not supported. +> [!WARNING] +> UNSUPPORTED This SDK is in pre-release development and is not supported. [![NPM][sdk-react-native-npm-badge]][sdk-react-native-npm-link] [![Actions Status][sdk-react-native-ci-badge]][sdk-react-native-ci] @@ -20,12 +21,52 @@ For more information, see the [complete reference guide for this SDK](https://do yarn add @launchdarkly/react-native-client-sdk ``` +Additionally, the LaunchDarkly React-Native SDK uses +[@react-native-async-storage/async-storage](https://github.com/react-native-async-storage/async-storage) +for bootstrapping. This is a native dependency. + +If you are using expo, then installing this package from npm like above and re-running pod install should suffice. + +If you are not using expo, you will need to explicitly add +@react-native-async-storage/async-storage as a dependency to your project +and re-run pod install for [auto-linking to work](https://github.com/react-native-community/cli/issues/1347). + ## Quickstart -TODO +1. Wrap your application with `LDProvider` passing it an LDClient and + an LDContext: + +```jsx +// App.tsx +import { LDProvider, ReactNativeLDClient } from '@launchdarkly/react-native-client-sdk'; + +const featureClient = new ReactNativeLDClient('mobile-key'); +const userContext = { kind: 'user', key: 'test-user-1' }; + +const App = () => ( + + + +); + +export default App; +``` + +2. Then in a child component, evaluate flags with `useBoolVariation`: + +```jsx +import { useBoolVariation } from '@launchdarkly/react-native-client-sdk'; + +export default function Welcome() { + const flagValue = useBoolVariation('flag-key', false); -```typescript -// TODO + return ( + + Welcome to LaunchDarkly + Flag value is {`${flagValue}`} + + ); +} ``` See the full [example app](https://github.com/launchdarkly/js-core/tree/main/packages/sdk/react-native/example). @@ -33,11 +74,11 @@ See the full [example app](https://github.com/launchdarkly/js-core/tree/main/pac ## Developing this SDK ```shell -# ios -yarn ios +# at js-core repo root +yarn && yarn build && cd packages/sdk/react-native/example -# android -yarn android +# in react-native/example +yarn && yarn ios-go ``` ## About LaunchDarkly diff --git a/packages/sdk/react-native/example/package.json b/packages/sdk/react-native/example/package.json index 113904380..7901a2457 100644 --- a/packages/sdk/react-native/example/package.json +++ b/packages/sdk/react-native/example/package.json @@ -5,16 +5,18 @@ "scripts": { "start": "expo start", "expo-clean": "expo prebuild --clean", - "android": "expo run:android", - "android-release": "expo run:android --variant release", - "android-go": "expo start --android --clear", + "android": "yarn link-dev && expo run:android", + "android-release": "yarn link-dev && expo run:android --variant release", + "android-go": "yarn link-dev && expo start --android --clear", "android-log": "react-native log-android", - "ios": "expo run:ios", - "ios-release": "expo run:ios --configuration Release", - "ios-go": "expo start --ios --clear", + "ios": "yarn link-dev && expo run:ios", + "ios-release": "yarn link-dev && expo run:ios --configuration Release", + "ios-go": "yarn link-dev && expo start --ios --clear", "ios-log": "react-native log-ios", - "web": "expo start --web --clear", - "clean": "expo prebuild --clean && yarn cache clean && rm -rf node_modules && rm -rf .expo" + "web": "yarn link-dev && expo start --web --clear", + "clean": "expo prebuild --clean && yarn cache clean && rm -rf node_modules && rm -rf .expo", + "link-dev": "(cd .. && yarn build)", + "postinstall": "yarn link-dev" }, "dependencies": { "expo": "~49.0.16",