Skip to content

Commit a343c83

Browse files
yusintoLaunchDarklyReleaseBotkinyoklion
authored
chore: RN provider and hooks attempt 2 (#321)
This is a second attempt of #306 using the newly added event source. - use StreamingProcessor and event source to fetch flags - added LDProvider - added hooks - added typed variation[Detail] functions Please read the [example README](https://github.com/launchdarkly/js-core/blob/9d458f28625c12169df614c8d2289f9c0952cc45/packages/sdk/react-native/example/README.md#L1) and try running the example app. --------- Co-authored-by: LaunchDarklyReleaseBot <[email protected]> Co-authored-by: Ryan Lamb <[email protected]>
1 parent aaaf6d1 commit a343c83

36 files changed

+997
-263
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ module.exports = {
2525
],
2626
'import/default': 'error',
2727
'import/export': 'error',
28+
'import/extensions': ['error', 'never', { json: 'always' }],
2829
'import/no-self-import': 'error',
2930
'import/no-cycle': 'error',
3031
'import/no-useless-path-segments': 'error',

‎packages/sdk/react-native/README.md‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,14 @@ yarn add @launchdarkly/react-native-client-sdk
2525
TODO
2626

2727
```typescript
28-
import { init } from '@launchdarkly/react-native-client-sdk';
29-
3028
// TODO
3129
```
3230

3331
See the full [example app](https://github.com/launchdarkly/js-core/tree/main/packages/sdk/react-native/example).
3432

3533
## Developing this SDK
3634

37-
:information_source: You will need to setup your sdk key in the example dir. See the example [README](https://github.com/launchdarkly/js-core/blob/main/packages/sdk/react-native/example/README.md#L1).
38-
39-
```shell
40-
# at js-core repo root
41-
yarn && yarn build
42-
43-
# at sdk/react-native repo
44-
yarn android | ios
45-
```
35+
:information_source: See the example [README](https://github.com/launchdarkly/js-core/blob/main/packages/sdk/react-native/example/README.md#L1).
4636

4737
## About LaunchDarkly
4838

‎packages/sdk/react-native/example/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,6 @@ yarn-error.*
3434

3535
# typescript
3636
*.tsbuildinfo
37+
38+
ios
39+
android

‎packages/sdk/react-native/example/App.tsx‎

Lines changed: 11 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,18 @@
1-
import { CLIENT_SIDE_SDK_KEY } from '@env';
2-
import React, { useEffect, useState } from 'react';
3-
import { StyleSheet, Text, View } from 'react-native';
1+
import { MOBILE_KEY } from '@env';
42

5-
import { init, type LDClientImpl } from '@launchdarkly/react-native-client-sdk';
3+
import { LDProvider, ReactNativeLDClient } from '@launchdarkly/react-native-client-sdk';
64

7-
const context = { kind: 'user', key: 'test-user-1' };
8-
9-
export default function App() {
10-
const [ldc, setLdc] = useState<LDClientImpl>();
11-
const [flag, setFlag] = useState<boolean>(false);
5+
import Welcome from './src/welcome';
126

13-
useEffect(() => {
14-
init(CLIENT_SIDE_SDK_KEY, context)
15-
.then((c) => {
16-
setLdc(c);
17-
})
18-
.catch((e) => console.log(e));
19-
}, []);
20-
21-
useEffect(() => {
22-
const f = ldc?.boolVariation('dev-test-flag', false);
23-
setFlag(f ?? false);
24-
}, [ldc]);
7+
const featureClient = new ReactNativeLDClient(MOBILE_KEY);
8+
const context = { kind: 'user', key: 'test-user-1' };
259

10+
const App = () => {
2611
return (
27-
<View style={styles.container}>
28-
<Text>{flag ? <>devTestFlag: {`${flag}`}</> : <>loading...</>}</Text>
29-
</View>
12+
<LDProvider client={featureClient} context={context}>
13+
<Welcome />
14+
</LDProvider>
3015
);
31-
}
16+
};
3217

33-
const styles = StyleSheet.create({
34-
container: {
35-
flex: 1,
36-
alignItems: 'center',
37-
justifyContent: 'center',
38-
},
39-
box: {
40-
width: 60,
41-
height: 60,
42-
marginVertical: 20,
43-
},
44-
});
18+
export default App;

‎packages/sdk/react-native/example/README.md‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,29 @@
22

33
To run the example app:
44

5-
1. Create a `.env` file at the same level as this README
6-
2. Add your client-side sdk key to that `.env` file:
5+
1. At the js-core repo root:
76

87
```shell
9-
CLIENT_SIDE_SDK_KEY=abcdef12456
8+
yarn && yarn build
109
```
1110

12-
3. Finally
11+
2. Create an `.env` file at the same level as this README and add your mobile key to that `.env` file:
1312

1413
```shell
14+
MOBILE_KEY=abcdef12456
15+
```
16+
17+
3. Replace `dev-test-flag` with your flag key in `src/welcome.tsx`.
18+
19+
4. Run the app:
20+
21+
```shell
22+
# Note for android, there's an issue with Flipper interfering with streaming connections
23+
# so please run the release build. There's no such issue with ios.
24+
1525
# android
16-
yarn && yarn android
26+
yarn && yarn android-release
1727

1828
# ios
19-
yarn && yarn ios
29+
yarn && yarn ios-go
2030
```

‎packages/sdk/react-native/example/app.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,19 @@
1111
"resizeMode": "contain",
1212
"backgroundColor": "#ffffff"
1313
},
14-
"assetBundlePatterns": ["**/*"],
14+
"assetBundlePatterns": [
15+
"**/*"
16+
],
1517
"ios": {
16-
"supportsTablet": true
18+
"supportsTablet": true,
19+
"bundleIdentifier": "com.anonymous.reactnativeexample"
1720
},
1821
"android": {
1922
"adaptiveIcon": {
2023
"foregroundImage": "./assets/adaptive-icon.png",
2124
"backgroundColor": "#ffffff"
22-
}
25+
},
26+
"package": "com.anonymous.reactnativeexample"
2327
},
2428
"web": {
2529
"favicon": "./assets/favicon.png"

‎packages/sdk/react-native/example/package.json‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,21 @@
44
"main": "node_modules/expo/AppEntry.js",
55
"scripts": {
66
"start": "expo start",
7-
"android": "expo start --android --clear",
8-
"ios": "expo start --ios --clear",
7+
"expo-clean": "expo prebuild --clean",
8+
"android": "expo run:android",
9+
"android-release": "expo run:android --variant release",
10+
"android-go": "expo start --android --clear",
11+
"android-log": "react-native log-android",
12+
"ios": "expo run:ios",
13+
"ios-release": "expo run:ios --configuration Release",
14+
"ios-go": "expo start --ios --clear",
15+
"ios-log": "react-native log-ios",
916
"web": "expo start --web --clear",
10-
"clean": "yarn cache clean && rm -rf node_modules"
17+
"clean": "expo prebuild --clean && yarn cache clean && rm -rf node_modules && rm -rf .expo"
1118
},
1219
"dependencies": {
1320
"expo": "~49.0.16",
21+
"expo-splash-screen": "~0.20.5",
1422
"expo-status-bar": "~1.7.1",
1523
"react": "18.2.0",
1624
"react-native": "0.72.6"

‎packages/sdk/react-native/example/src/welcome.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Button, StyleSheet, Text, View } from 'react-native';
2+
3+
import {
4+
useBoolVariation,
5+
useLDClient,
6+
useLDDataSourceStatus,
7+
} from '@launchdarkly/react-native-client-sdk';
8+
9+
export default function Welcome() {
10+
const { error, status } = useLDDataSourceStatus();
11+
const flag = useBoolVariation('dev-test-flag', false);
12+
const ldc = useLDClient();
13+
14+
const login = () => {
15+
ldc.identify({ kind: 'user', key: 'test-user-2' });
16+
};
17+
18+
return (
19+
<View style={styles.container}>
20+
<Text>Welcome to LaunchDarkly</Text>
21+
<Text>status: {status ?? 'not connected'}</Text>
22+
{error ? <Text>error: {error.message}</Text> : null}
23+
<Text>devTestFlag: {`${flag}`}</Text>
24+
<Text>context: {JSON.stringify(ldc.getContext())}</Text>
25+
<Button title="Login" onPress={login} />
26+
</View>
27+
);
28+
}
29+
30+
const styles = StyleSheet.create({
31+
container: {
32+
flex: 1,
33+
alignItems: 'center',
34+
justifyContent: 'center',
35+
},
36+
box: {
37+
width: 60,
38+
height: 60,
39+
marginVertical: 20,
40+
},
41+
});

‎packages/sdk/react-native/example/types/env.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
declare module '@env' {
22
// eslint-disable-next-line import/prefer-default-export
3-
export const CLIENT_SIDE_SDK_KEY: string;
3+
export const MOBILE_KEY: string;
44
}

‎packages/sdk/react-native/link-dev.sh‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,19 @@ do
1818
mkdir -p "$COMMON_DIR"
1919
mkdir -p "$CLIENT_COMMON_DIR"
2020

21+
rsync -av dist "$SDK_DIR"
22+
rsync -aq src "$SDK_DIR"
2123
rsync -aq package.json "$SDK_DIR"
2224
rsync -aq LICENSE "$SDK_DIR"
23-
rsync -aq node_modules "$SDK_DIR"
24-
rsync -aq src "$SDK_DIR"
25-
rsync -av dist "$SDK_DIR"
25+
rsync -aq node_modules/base64-js "$SDK_DIR"/node_modules
26+
rsync -aq node_modules/event-target-shim "$SDK_DIR"/node_modules
27+
28+
rsync -aq ../../shared/common/dist "$COMMON_DIR"
29+
rsync -aq ../../shared/common/src "$COMMON_DIR"
30+
rsync -aq ../../shared/common/package.json "$COMMON_DIR"
2631

27-
rsync -aq ../../shared/common/ "$COMMON_DIR"
2832
rm -rf "$CLIENT_COMMON_DIR"
29-
rsync -aq ../../shared/sdk-client/ "$CLIENT_COMMON_DIR"
33+
rsync -aq ../../shared/sdk-client/dist "$CLIENT_COMMON_DIR"
34+
rsync -aq ../../shared/sdk-client/src "$CLIENT_COMMON_DIR"
35+
rsync -aq ../../shared/sdk-client/package.json "$CLIENT_COMMON_DIR"
3036
done

0 commit comments

Comments
 (0)