From 59699dfe6cd46b5cca74bf8ce673c582245ae33b Mon Sep 17 00:00:00 2001 From: cosmos-explorer Date: Tue, 9 Jun 2026 15:49:21 +0200 Subject: [PATCH 1/3] added two flag example --- examples/ExpoApp/app/(tabs)/index.tsx | 2 + examples/ExpoApp/app/TwoFlagsComponent.tsx | 52 ++++++++++++++++++++++ examples/ExpoApp/app/_layout.tsx | 16 ++++--- 3 files changed, 63 insertions(+), 7 deletions(-) create mode 100644 examples/ExpoApp/app/TwoFlagsComponent.tsx diff --git a/examples/ExpoApp/app/(tabs)/index.tsx b/examples/ExpoApp/app/(tabs)/index.tsx index 44e802b..a34888e 100644 --- a/examples/ExpoApp/app/(tabs)/index.tsx +++ b/examples/ExpoApp/app/(tabs)/index.tsx @@ -5,6 +5,7 @@ import ParallaxScrollView from '@/components/ParallaxScrollView'; import { ThemedText } from '@/components/ThemedText'; import { ThemedView } from '@/components/ThemedView'; import RobotComponent from '../RobotComponent'; +import TwoFlagsComponent from '../TwoFlagsComponent'; export default function HomeScreen() { return ( @@ -21,6 +22,7 @@ export default function HomeScreen() { + Step 1: Try it diff --git a/examples/ExpoApp/app/TwoFlagsComponent.tsx b/examples/ExpoApp/app/TwoFlagsComponent.tsx new file mode 100644 index 0000000..499fe10 --- /dev/null +++ b/examples/ExpoApp/app/TwoFlagsComponent.tsx @@ -0,0 +1,52 @@ +import React, { useEffect } from 'react'; +import {Text, View} from 'react-native'; +import {useFbClient, useFlags, UserBuilder} from '@featbit/react-client-sdk'; + +export default function TwoFlagsComponent() { + const flags = useFlags(); + const flagA = flags["flag-a"]; + const flagB = flags["flag-b"]; + const fbClient = useFbClient(); + + useEffect(() => { + const variationId = `203:${flagA}:exclusive`; + const user = new UserBuilder("fb-demo-user-key") + .name("the user name") + .custom("loggedIn", "true") + .custom("variationId", variationId) + .build(); + + fbClient?.identify(user); + }, [flagA]); + + return ( + + + flagA: {flagA} + + + flagB: {flagB} + + + ); +} diff --git a/examples/ExpoApp/app/_layout.tsx b/examples/ExpoApp/app/_layout.tsx index af81a30..34438b4 100644 --- a/examples/ExpoApp/app/_layout.tsx +++ b/examples/ExpoApp/app/_layout.tsx @@ -6,7 +6,7 @@ import 'react-native-reanimated'; import { useColorScheme } from '@/hooks/useColorScheme'; -import {buildConfig, withFbProvider} from '@featbit/react-native-sdk'; +import {buildConfig, UserBuilder, withFbProvider} from '@featbit/react-native-sdk'; // Prevent the splash screen from auto-hiding before asset loading is complete. SplashScreen.preventAutoHideAsync(); @@ -37,13 +37,15 @@ function RootLayout() { ); } +const user = new UserBuilder("fb-demo-user-key") + .name("the user name") + .custom("loggedIn", "true") + .custom("variationId", "203:b:exclusive") + .build(); + const options = { - user: { - name: 'the user name', - keyId: 'fb-demo-user-key', - customizedProperties: [], - }, - sdkKey: 'Obg68EqYZk27JTxphPgy7At1aJ8GaAtEaIA1fb3IpuEA', + user, + sdkKey: '3QFLBQibTE6i1duL1WAK2A227SK-9N8k-9VqurJDE_Qw', streamingUri: 'wss://app-eval.featbit.co', eventsUri: 'https://app-eval.featbit.co', }; From 361624e60f3d4dd77764f488a7de2f26d2d8ce78 Mon Sep 17 00:00:00 2001 From: cosmos-explorer <88151306+cosmos-explorer@users.noreply.github.com> Date: Thu, 18 Jun 2026 10:55:04 +0200 Subject: [PATCH 2/3] Update TwoFlagsComponent.tsx --- examples/ExpoApp/app/TwoFlagsComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/ExpoApp/app/TwoFlagsComponent.tsx b/examples/ExpoApp/app/TwoFlagsComponent.tsx index 499fe10..a9566fc 100644 --- a/examples/ExpoApp/app/TwoFlagsComponent.tsx +++ b/examples/ExpoApp/app/TwoFlagsComponent.tsx @@ -17,7 +17,7 @@ export default function TwoFlagsComponent() { .build(); fbClient?.identify(user); - }, [flagA]); + }, [fbClient, flagA]); return ( Date: Thu, 18 Jun 2026 11:00:32 +0200 Subject: [PATCH 3/3] Update TwoFlagsComponent.tsx --- examples/ExpoApp/app/TwoFlagsComponent.tsx | 36 +++++++++++++++++----- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/examples/ExpoApp/app/TwoFlagsComponent.tsx b/examples/ExpoApp/app/TwoFlagsComponent.tsx index a9566fc..22fb361 100644 --- a/examples/ExpoApp/app/TwoFlagsComponent.tsx +++ b/examples/ExpoApp/app/TwoFlagsComponent.tsx @@ -9,15 +9,35 @@ export default function TwoFlagsComponent() { const fbClient = useFbClient(); useEffect(() => { - const variationId = `203:${flagA}:exclusive`; - const user = new UserBuilder("fb-demo-user-key") - .name("the user name") - .custom("loggedIn", "true") - .custom("variationId", variationId) - .build(); + if (!fbClient) return; + let active = true; - fbClient?.identify(user); - }, [fbClient, flagA]); + const loadVarations = async (keys: string[]) => { + const all = await fbClient.getAllVariations(); + console.log('loadVarations', keys); + if (active) { + console.log('active in loadVariations'); + } + } + + fbClient.on("update", loadVarations); + + return () => { + active = false; + fbClient.off("update", loadVarations); + } + }, [fbClient]) + + // useEffect(() => { + // const variationId = `203:${flagA}:exclusive`; + // const user = new UserBuilder("fb-demo-user-key") + // .name("the user name") + // .custom("loggedIn", "true") + // .custom("variationId", variationId) + // .build(); + // + // fbClient?.identify(user); + // }, [fbClient, flagA]); return (