FFL-1642 docs: upgrade example to use latest expo setup

example/.env.example

@@ -0,0 +1 @@
+EXPO_PUBLIC_EPPO_API_KEY=your-api-key-here

example/.gitignore

@@ -0,0 +1,44 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example
+
+# generated native folders
+/ios
+/android

example/README.md

@@ -0,0 +1,97 @@
+# Eppo React Native SDK Example
+
+This is an example app demonstrating the [Eppo React Native SDK](https://github.com/Eppo-exp/react-native-sdk).
+
+## Setup
+
+1. **Install dependencies**
+
+   ```bash
+   yarn install
+   ```
+
+2. **Configure your API key**
+
+   Copy the example environment file and add your Eppo API key:
+
+   ```bash
+   cp .env.example .env
+   ```
+
+   Then edit `.env` and set your API key:
+
+   ```
+   EXPO_PUBLIC_EPPO_API_KEY=your-api-key-here
+   ```
+
+3. **Update flag and subject keys**
+
+   Edit `components/TestComponent.tsx` to use your flag key and subject key:
+
+   ```typescript
+   const assignedVariation = eppoClient.getBooleanAssignment(
+     'your-flag-key', // Replace with your flag key
+     'your-subject-key', // Replace with your subject key
+     {},
+     false
+   );
+   ```
+
+## Run the app
+
+```bash
+yarn start
+```
+
+Then choose your platform:
+
+- Press `i` for iOS simulator
+- Press `a` for Android emulator
+- Press `w` for web browser
+- Scan QR code with Expo Go app on your device
+
+## Project Structure
+
+- `app/` - Main app screens using Expo Router
+- `components/EppoRandomizationProvider.tsx` - Initializes the Eppo SDK
+- `components/TestComponent.tsx` - Example component that gets a feature flag assignment
+
+## Testing with Local SDK
+
+If you're developing the SDK and want to test your local changes:
+
+1. **Build the SDK from the repository root**
+
+   ```bash
+   cd ..
+   yarn prepack
+   cd example
+   ```
+
+2. **Update package.json to use local SDK**
+
+   Change the SDK dependency in `package.json`:
+
+   ```json
+   "@eppo/react-native-sdk": "file:.."
+   ```
+
+3. **Reinstall dependencies**
+
+   ```bash
+   yarn install
+   ```
+
+4. **Start the app**
+
+   ```bash
+   yarn start
+   ```
+
+To switch back to the published version, change the dependency back to `"*"` and run `yarn install` again.
+
+## Learn More
+
+- [Eppo Documentation](https://docs.geteppo.com/)
+- [React Native SDK Documentation](https://docs.geteppo.com/sdks/client-sdks/react-native/)
+- [Expo Documentation](https://docs.expo.dev/)

example/app.json

@@ -4,27 +4,45 @@
     "slug": "example",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "icon": "./assets/images/icon.png",
+    "scheme": "example",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
     "ios": {
       "supportsTablet": true
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      }
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./assets/images/android-icon-foreground.png",
+        "backgroundImage": "./assets/images/android-icon-background.png",
+        "monochromeImage": "./assets/images/android-icon-monochrome.png"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false
     },
     "web": {
-      "favicon": "./assets/favicon.png"
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff",
+          "dark": {
+            "backgroundColor": "#000000"
+          }
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
     }
   }
 }

example/app/_layout.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+
+import EppoRandomizationProvider from '@/components/EppoRandomizationProvider';
+
+export default function RootLayout() {
+  return (
+    <EppoRandomizationProvider>
+      <Stack>
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+      </Stack>
+      <StatusBar style="auto" />
+    </EppoRandomizationProvider>
+  );
+}

example/src/App.tsx → example/app/index.tsx

@@ -1,15 +1,12 @@
 import * as React from 'react';
-
 import { StyleSheet, View } from 'react-native';
-import EppoRandomizationProvider from './EppoRandomizationProvider';
-import TestComponent from './TestComponent';
+
+import TestComponent from '@/components/TestComponent';
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <EppoRandomizationProvider>
-        <TestComponent />
-      </EppoRandomizationProvider>
+      <TestComponent />
     </View>
   );
 }
@@ -20,9 +17,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
-  },
 });

example/src/EppoRandomizationProvider.tsx → example/components/EppoRandomizationProvider.tsx

@@ -7,21 +7,27 @@ import { init } from '@eppo/react-native-sdk';
 
 interface IEppoRandomizationProvider {
   waitForInitialization?: boolean;
-  children: JSX.Element;
-  loadingComponent?: JSX.Element;
+  children: React.ReactNode;
+  loadingComponent?: React.ReactNode;
 }
 
 export default function EppoRandomizationProvider({
   waitForInitialization = true,
   children,
   loadingComponent = <Text>Loading...</Text>,
-}: IEppoRandomizationProvider): JSX.Element {
+}: IEppoRandomizationProvider) {
   const [isInitialized, setIsInitialized] = useState(false);
   useEffect(() => {
+    const apiKey = process.env.EXPO_PUBLIC_EPPO_API_KEY;
+    if (!apiKey) {
+      console.error('EXPO_PUBLIC_EPPO_API_KEY is not set');
+      return;
+    }
+
     init({
-      apiKey: '<API_KEY>',
+      apiKey,
       assignmentLogger: {
-        logAssignment(assignment) {
+        logAssignment(assignment: any) {
           console.log('ASSIGNMENT', assignment);
         },
       },

example/eslint.config.js

@@ -0,0 +1,10 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require('eslint/config');
+const expoConfig = require('eslint-config-expo/flat');
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: ['dist/*'],
+  },
+]);