Skip to content

Commit e7e9a7b

Browse files
typottertypotter
authored
feat: React Native Application using Eppo SDK (#106)
* inital app from create-expo-app * add Eppo SDK; traditional and precomputed client * Eppo Client provider and basic flag/bandit display
1 parent 2eea02c commit e7e9a7b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+10346
-0
lines changed

‎package-testing/react-native-sdk-relay/.eslintrc.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// https://docs.expo.dev/guides/using-eslint/
2+
module.exports = {
3+
extends: ['expo', 'prettier'],
4+
plugins: ['prettier'],
5+
rules: {
6+
'prettier/prettier': 'error',
7+
},
8+
};

‎package-testing/react-native-sdk-relay/.gitignore‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2+
3+
# dependencies
4+
node_modules/
5+
6+
# Expo
7+
.expo/
8+
dist/
9+
web-build/
10+
expo-env.d.ts
11+
12+
# Native
13+
*.orig.*
14+
*.jks
15+
*.p8
16+
*.p12
17+
*.key
18+
*.mobileprovision
19+
20+
# Metro
21+
.metro-health-check*
22+
23+
# debug
24+
npm-debug.*
25+
yarn-debug.*
26+
yarn-error.*
27+
28+
# macOS
29+
.DS_Store
30+
*.pem
31+
32+
# local env files
33+
.env*.local
34+
35+
# typescript
36+
*.tsbuildinfo
37+
38+
app-example

‎package-testing/react-native-sdk-relay/README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Welcome to your Expo app 👋
2+
3+
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
4+
5+
## Get started
6+
7+
1. Install dependencies
8+
9+
```bash
10+
npm install
11+
```
12+
13+
2. Start the app
14+
15+
```bash
16+
npx expo start
17+
```
18+
19+
In the output, you'll find options to open the app in a
20+
21+
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
22+
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
23+
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
24+
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
25+
26+
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
27+
28+
## Get a fresh project
29+
30+
When you're ready, run:
31+
32+
```bash
33+
npm run reset-project
34+
```
35+
36+
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
37+
38+
## Learn more
39+
40+
To learn more about developing your project with Expo, look at the following resources:
41+
42+
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
43+
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
44+
45+
## Join the community
46+
47+
Join our community of developers creating universal apps.
48+
49+
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
50+
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

‎package-testing/react-native-sdk-relay/app.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"expo": {
3+
"name": "react-native-sdk-relay",
4+
"slug": "react-native-sdk-relay",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/images/icon.png",
8+
"scheme": "myapp",
9+
"userInterfaceStyle": "automatic",
10+
"newArchEnabled": true,
11+
"ios": {
12+
"supportsTablet": true
13+
},
14+
"android": {
15+
"adaptiveIcon": {
16+
"foregroundImage": "./assets/images/adaptive-icon.png",
17+
"backgroundColor": "#ffffff"
18+
}
19+
},
20+
"web": {
21+
"bundler": "metro",
22+
"output": "static",
23+
"favicon": "./assets/images/favicon.png"
24+
},
25+
"plugins": [
26+
"expo-router",
27+
[
28+
"expo-splash-screen",
29+
{
30+
"image": "./assets/images/splash-icon.png",
31+
"imageWidth": 200,
32+
"resizeMode": "contain",
33+
"backgroundColor": "#ffffff"
34+
}
35+
]
36+
],
37+
"experiments": {
38+
"typedRoutes": true
39+
}
40+
}
41+
}

‎package-testing/react-native-sdk-relay/app/(tabs)/_layout.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Tabs } from 'expo-router';
2+
import React from 'react';
3+
import { Platform } from 'react-native';
4+
5+
import { HapticTab } from '@/components/HapticTab';
6+
import { IconSymbol } from '@/components/ui/IconSymbol';
7+
import TabBarBackground from '@/components/ui/TabBarBackground';
8+
import { Colors } from '@/constants/Colors';
9+
import { useColorScheme } from '@/hooks/useColorScheme';
10+
11+
export default function TabLayout() {
12+
const colorScheme = useColorScheme();
13+
14+
return (
15+
<Tabs
16+
screenOptions={{
17+
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
18+
headerShown: false,
19+
tabBarButton: HapticTab,
20+
tabBarBackground: TabBarBackground,
21+
tabBarStyle: Platform.select({
22+
ios: {
23+
// Use a transparent background on iOS to show the blur effect
24+
position: 'absolute',
25+
},
26+
default: {},
27+
}),
28+
}}
29+
>
30+
<Tabs.Screen
31+
name="index"
32+
options={{
33+
title: 'Home',
34+
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
35+
}}
36+
/>
37+
<Tabs.Screen
38+
name="bandits"
39+
options={{
40+
title: 'Bandits',
41+
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
42+
}}
43+
/>
44+
<Tabs.Screen
45+
name="eppo-flags"
46+
options={{
47+
title: 'Flags',
48+
tabBarIcon: ({ color }) => <IconSymbol size={28} name="flag.fill" color={color} />,
49+
}}
50+
/>
51+
</Tabs>
52+
);
53+
}

‎package-testing/react-native-sdk-relay/app/(tabs)/bandits.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { StyleSheet } from 'react-native';
2+
3+
import { Collapsible } from '@/components/Collapsible';
4+
import ParallaxScrollView from '@/components/ParallaxScrollView';
5+
import { ThemedText } from '@/components/ThemedText';
6+
import { ThemedView } from '@/components/ThemedView';
7+
import { IconSymbol } from '@/components/ui/IconSymbol';
8+
import { useEffect, useState } from 'react';
9+
import { getInstance } from '@eppo/react-native-sdk';
10+
import { useSubjectAttributes } from '@/hooks/useSubjectAttributes';
11+
import { useEppoPrecomputedClient } from '@/hooks/useEppoPrecomputedClient';
12+
13+
export default function BanditTabScreen() {
14+
const [updateHighlightsBanditVariation, setUpdateHighlightsBanditVariation] = useState<string>('LOADING...');
15+
const [updateHighlightsBanditAction, setUpdateHighlightsBanditAction] = useState<string>('');
16+
17+
const [updateHighlightsFlagValue, setUpdateHighlightsFlagValue] = useState<string>('LOADING...');
18+
const [precomputedFlagValue, setPrecomputedFlagValue] = useState<string>('LOADING...');
19+
20+
const subjectAttributes = useSubjectAttributes();
21+
const client = useEppoPrecomputedClient();
22+
23+
// const client = useEppoPrecomputedClient();
24+
25+
useEffect(() => {
26+
try {
27+
const result = client.getBanditAction('update-highlights-bandit', 'NONE');
28+
29+
setUpdateHighlightsBanditVariation(result?.variation ?? 'ERROR');
30+
setUpdateHighlightsBanditAction(result?.action ?? 'ERROR');
31+
32+
const flagResult = getInstance().getStringAssignment(
33+
'update-highlights-bandit',
34+
'user123',
35+
subjectAttributes,
36+
'NONE',
37+
);
38+
setUpdateHighlightsFlagValue(flagResult);
39+
40+
const precomputedFlagResult = client.getStringAssignment('update-highlights-bandit', 'NONE');
41+
setPrecomputedFlagValue(precomputedFlagResult);
42+
} catch (error) {
43+
console.error('Error in bandit effect:', error);
44+
setUpdateHighlightsBanditVariation('ERROR');
45+
setUpdateHighlightsBanditAction('ERROR');
46+
}
47+
}, [client, subjectAttributes]);
48+
49+
return (
50+
<ParallaxScrollView
51+
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
52+
headerImage={
53+
<IconSymbol
54+
size={310}
55+
color="#808080"
56+
name="chevron.left.forwardslash.chevron.right"
57+
style={styles.headerImage}
58+
/>
59+
}
60+
>
61+
<ThemedView style={styles.titleContainer}>
62+
<ThemedText type="title">Bandits</ThemedText>
63+
</ThemedView>
64+
<ThemedText>Here we are seeing the first bandits on a mobile app!</ThemedText>
65+
<Collapsible title="update-highlights-bandit">
66+
<ThemedText>
67+
<ThemedText type="defaultSemiBold">VariationValue</ThemedText>{' '}
68+
<ThemedText>{updateHighlightsBanditVariation}</ThemedText>
69+
</ThemedText>
70+
<ThemedText>
71+
<ThemedText type="defaultSemiBold">Bandit Value</ThemedText>{' '}
72+
<ThemedText>{updateHighlightsBanditAction}</ThemedText>
73+
</ThemedText>
74+
</Collapsible>
75+
<Collapsible title="update-highlights-bandit Flag Value">
76+
<ThemedText>
77+
<ThemedText type="defaultSemiBold">Traditional Client</ThemedText>{' '}
78+
<ThemedText>{updateHighlightsFlagValue}</ThemedText>
79+
</ThemedText>
80+
<ThemedText>
81+
<ThemedText type="defaultSemiBold">Precomputed Client</ThemedText>{' '}
82+
<ThemedText>{precomputedFlagValue}</ThemedText>
83+
</ThemedText>
84+
</Collapsible>
85+
</ParallaxScrollView>
86+
);
87+
}
88+
89+
const styles = StyleSheet.create({
90+
headerImage: {
91+
color: '#808080',
92+
bottom: -90,
93+
left: -35,
94+
position: 'absolute',
95+
},
96+
titleContainer: {
97+
flexDirection: 'row',
98+
gap: 8,
99+
},
100+
});

‎package-testing/react-native-sdk-relay/app/(tabs)/eppo-flags.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { StyleSheet, Image, Platform } from 'react-native';
2+
3+
import { Collapsible } from '@/components/Collapsible';
4+
import { ExternalLink } from '@/components/ExternalLink';
5+
import ParallaxScrollView from '@/components/ParallaxScrollView';
6+
import { ThemedText } from '@/components/ThemedText';
7+
import { ThemedView } from '@/components/ThemedView';
8+
import { IconSymbol } from '@/components/ui/IconSymbol';
9+
import React from 'react';
10+
import { TypeCompiler } from '@sinclair/typebox/compiler';
11+
import Code = TypeCompiler.Code;
12+
import EppoFlagKeyDump from '@/components/EppoFlagKeyDump';
13+
14+
export default function EppoFlagsScreen() {
15+
return (
16+
<ParallaxScrollView
17+
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
18+
headerImage={
19+
<IconSymbol
20+
size={310}
21+
color="#808080"
22+
name="chevron.left.forwardslash.chevron.right"
23+
style={styles.headerImage}
24+
/>
25+
}
26+
>
27+
<ThemedView style={styles.titleContainer}>
28+
<ThemedText type="title">Eppo Flag Assignments</ThemedText>
29+
</ThemedView>
30+
<ThemedText>Get dynamic values for your app based on your Eppo Experiments and Feature Flags.</ThemedText>
31+
<Collapsible title="Assignment Methods">
32+
<ThemedText>
33+
<ThemedText>
34+
getBooleanAssignment(...) getNumericAssignment(...) getIntegerAssignment(...) getStringAssignment(...)
35+
getJSONAssignment(...)
36+
</ThemedText>
37+
</ThemedText>
38+
<ExternalLink href="https://docs.geteppo.com/sdks/client-sdks/react-native/" target="_blank">
39+
<ThemedText type="link">Learn more</ThemedText>
40+
</ExternalLink>
41+
</Collapsible>
42+
<Collapsible title="Flag Keys">
43+
<ThemedText>These flags have been loaded by the traditional Eppo SDK.</ThemedText>
44+
<ThemedText type="defaultSemiBold">They are probably hashed.</ThemedText>
45+
<EppoFlagKeyDump></EppoFlagKeyDump>
46+
</Collapsible>
47+
</ParallaxScrollView>
48+
);
49+
}
50+
51+
const styles = StyleSheet.create({
52+
headerImage: {
53+
color: '#808080',
54+
bottom: -90,
55+
left: -35,
56+
position: 'absolute',
57+
},
58+
titleContainer: {
59+
flexDirection: 'row',
60+
gap: 8,
61+
},
62+
});

0 commit comments

Comments
 (0)