Two flag example

examples/ExpoApp/app/(tabs)/index.tsx

@@ -4,7 +4,8 @@ import { HelloWave } from '@/components/HelloWave';
 import ParallaxScrollView from '@/components/ParallaxScrollView';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
-import TestCompoment from '../TestComponent';
+import RobotComponent from '../RobotComponent';
+import TwoFlagsComponent from '../TwoFlagsComponent';
 
 export default function HomeScreen() {
   return (
@@ -21,7 +22,8 @@ export default function HomeScreen() {
         <HelloWave />
       </ThemedView>
       <ThemedView style={styles.stepContainer}>
-      <TestCompoment/>
+        <TwoFlagsComponent/>
+        <RobotComponent/>
         <ThemedText type="subtitle">Step 1: Try it</ThemedText>
         <ThemedText>
           Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.

examples/ExpoApp/app/TestComponent.tsx → examples/ExpoApp/app/RobotComponent.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
 import {Text, View} from 'react-native';
 import {useFlags} from '@featbit/react-client-sdk';
 
-export default function TestCompoment() {
+export default function RobotComponent() {
   const {robot} = useFlags();
   return (
     <View

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 (
+    <View
+      style={[
+        {
+          marginTop: 32,
+          paddingHorizontal: 24,
+        },
+      ]}>
+      <Text
+        style={[
+          {
+            textAlign: 'center',
+            fontSize: 30,
+            fontWeight: '700',
+          },
+        ]}>
+        flagA: {flagA}
+      </Text>
+      <Text
+        style={[
+          {
+            textAlign: 'center',
+            fontSize: 30,
+            fontWeight: '700',
+          },
+        ]}>
+        flagB: {flagB}
+      </Text>
+    </View>
+  );
+}

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',
 };