Skip to content

Commit 9af0ff2

Browse files
fahad19fahad19
committed
integrate Featurevisor
1 parent d5548de commit 9af0ff2

4 files changed

Lines changed: 98 additions & 36 deletions

File tree

‎app/(tabs)/index.tsx‎

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,48 @@
1-
import { Image } from 'expo-image';
2-
import { Platform, StyleSheet } from 'react-native';
1+
import { useFlag } from "@featurevisor/react";
2+
import { Image } from "expo-image";
3+
import { Platform, StyleSheet } from "react-native";
34

4-
import { HelloWave } from '@/components/HelloWave';
5-
import ParallaxScrollView from '@/components/ParallaxScrollView';
6-
import { ThemedText } from '@/components/ThemedText';
7-
import { ThemedView } from '@/components/ThemedView';
5+
import { HelloWave } from "@/components/HelloWave";
6+
import ParallaxScrollView from "@/components/ParallaxScrollView";
7+
import { ThemedText } from "@/components/ThemedText";
8+
import { ThemedView } from "@/components/ThemedView";
89

910
export default function HomeScreen() {
11+
const isFeatureEnabled = useFlag("baz");
12+
1013
return (
1114
<ParallaxScrollView
12-
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
15+
headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
1316
headerImage={
1417
<Image
15-
source={require('@/assets/images/partial-react-logo.png')}
18+
source={require("@/assets/images/partial-react-logo.png")}
1619
style={styles.reactLogo}
1720
/>
18-
}>
21+
}
22+
>
23+
<ThemedView style={styles.stepContainer}>
24+
<ThemedText type="subtitle">Feature evaluation:</ThemedText>
25+
<ThemedText>
26+
Feature "baz" is {isFeatureEnabled ? "enabled" : "disabled"}.
27+
</ThemedText>
28+
</ThemedView>
1929
<ThemedView style={styles.titleContainer}>
2030
<ThemedText type="title">Welcome!</ThemedText>
2131
<HelloWave />
2232
</ThemedView>
2333
<ThemedView style={styles.stepContainer}>
2434
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
2535
<ThemedText>
26-
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
27-
Press{' '}
36+
Edit{" "}
37+
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText>{" "}
38+
to see changes. Press{" "}
2839
<ThemedText type="defaultSemiBold">
2940
{Platform.select({
30-
ios: 'cmd + d',
31-
android: 'cmd + m',
32-
web: 'F12',
41+
ios: "cmd + d",
42+
android: "cmd + m",
43+
web: "F12",
3344
})}
34-
</ThemedText>{' '}
45+
</ThemedText>{" "}
3546
to open developer tools.
3647
</ThemedText>
3748
</ThemedView>
@@ -45,9 +56,12 @@ export default function HomeScreen() {
4556
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
4657
<ThemedText>
4758
{`When you're ready, run `}
48-
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
49-
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
50-
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
59+
<ThemedText type="defaultSemiBold">
60+
npm run reset-project
61+
</ThemedText>{" "}
62+
to get a fresh <ThemedText type="defaultSemiBold">app</ThemedText>{" "}
63+
directory. This will move the current{" "}
64+
<ThemedText type="defaultSemiBold">app</ThemedText> to{" "}
5165
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
5266
</ThemedText>
5367
</ThemedView>
@@ -57,8 +71,8 @@ export default function HomeScreen() {
5771

5872
const styles = StyleSheet.create({
5973
titleContainer: {
60-
flexDirection: 'row',
61-
alignItems: 'center',
74+
flexDirection: "row",
75+
alignItems: "center",
6276
gap: 8,
6377
},
6478
stepContainer: {
@@ -70,6 +84,6 @@ const styles = StyleSheet.create({
7084
width: 290,
7185
bottom: 0,
7286
left: 0,
73-
position: 'absolute',
87+
position: "absolute",
7488
},
7589
});

‎app/_layout.tsx‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
1-
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
2-
import { useFonts } from 'expo-font';
3-
import { Stack } from 'expo-router';
4-
import { StatusBar } from 'expo-status-bar';
5-
import 'react-native-reanimated';
1+
import { FeaturevisorProvider } from "@featurevisor/react";
2+
import { createInstance } from "@featurevisor/sdk";
3+
import {
4+
DarkTheme,
5+
DefaultTheme,
6+
ThemeProvider,
7+
} from "@react-navigation/native";
8+
import { useFonts } from "expo-font";
9+
import { Stack } from "expo-router";
10+
import { StatusBar } from "expo-status-bar";
11+
import "react-native-reanimated";
612

7-
import { useColorScheme } from '@/hooks/useColorScheme';
13+
import { useColorScheme } from "@/hooks/useColorScheme";
14+
15+
const DATAFILE_URL =
16+
"https://featurevisor-example-cloudflare.pages.dev/production/featurevisor-tag-all.json";
17+
18+
const f = createInstance({
19+
context: { userId: "123" },
20+
});
21+
22+
fetch(DATAFILE_URL)
23+
.then((res) => res.json())
24+
.then((datafileContent) => f.setDatafile(datafileContent));
825

926
export default function RootLayout() {
1027
const colorScheme = useColorScheme();
1128
const [loaded] = useFonts({
12-
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
29+
SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
1330
});
1431

1532
if (!loaded) {
@@ -18,12 +35,14 @@ export default function RootLayout() {
1835
}
1936

2037
return (
21-
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
22-
<Stack>
23-
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
24-
<Stack.Screen name="+not-found" />
25-
</Stack>
26-
<StatusBar style="auto" />
38+
<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
39+
<FeaturevisorProvider instance={f}>
40+
<Stack>
41+
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
42+
<Stack.Screen name="+not-found" />
43+
</Stack>
44+
<StatusBar style="auto" />
45+
</FeaturevisorProvider>
2746
</ThemeProvider>
2847
);
2948
}

‎package-lock.json‎

Lines changed: 27 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
},
1313
"dependencies": {
1414
"@expo/vector-icons": "^14.1.0",
15+
"@featurevisor/react": "^2.0.0",
16+
"@featurevisor/sdk": "^2.0.0",
1517
"@react-navigation/bottom-tabs": "^7.3.10",
1618
"@react-navigation/elements": "^2.3.8",
1719
"@react-navigation/native": "^7.1.6",
@@ -41,9 +43,9 @@
4143
"devDependencies": {
4244
"@babel/core": "^7.25.2",
4345
"@types/react": "~19.0.10",
44-
"typescript": "~5.8.3",
4546
"eslint": "^9.25.0",
46-
"eslint-config-expo": "~9.2.0"
47+
"eslint-config-expo": "~9.2.0",
48+
"typescript": "~5.8.3"
4749
},
4850
"private": true
4951
}

0 commit comments

Comments
 (0)