Add Feature Flags support to React Native SDK

.github/workflows/node.js.yml

@@ -27,54 +27,47 @@
       - run: npm test
 
   test_android:
-    runs-on: ubuntu-latest
+    runs-on: macos-15-intel
     strategy:
       matrix:
         node-version: [18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
       - name: Checkout
         uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
       - uses: actions/setup-java@v4
         with:
           distribution: "temurin" # See 'Supported distributions' for available options
           java-version: "17"
       - run: npm install
       - run: npm install -g react-native-cli
       - run: npm i react-native-gradle-plugin
       - name: Test Integration - Install dependencies
         working-directory: ./Samples/SimpleMixpanel
         run: yarn install
-      - name: Enable KVM
-        run: |
-          echo 'KERNEL=="kvm", GROUP="kvm", MODE="0666", OPTIONS+="static_node=kvm"' | sudo tee /etc/udev/rules.d/99-kvm4all.rules
-          sudo udevadm control --reload-rules
-          sudo udevadm trigger --name-match=kvm
       - name: Setup Android
         uses: reactivecircus/android-emulator-runner@v2.32.0
         with:
           api-level: 34
-          target: google_apis
           profile: Nexus 5X
           arch: x86_64
           working-directory: ./Samples/SimpleMixpanel/android
           script: ./gradlew
       - name: Test Android
         uses: reactivecircus/android-emulator-runner@v2.32.0
         with:
           api-level: 34
-          target: google_apis
           profile: Nexus 5X
           arch: x86_64
           working-directory: ./Samples/SimpleMixpanel
           script: react-native run-android
 
   test_ios:
     runs-on: macos-latest
     strategy:
       matrix:
@@ -95,6 +88,29 @@
       - name: Setup iOS
         working-directory: ./Samples/SimpleMixpanel/ios
         run: pod install --repo-update
+      - name: List available simulators
+        run: xcrun simctl list devices available
+      - name: Boot iOS Simulator
+        run: |
+          # Get list of available iPhone simulators
+          # Note: jq is pre-installed on macOS GitHub Actions runners
+          SIMULATOR_ID=$(xcrun simctl list devices available -j | jq -r '.devices | to_entries[] | .value[] | select(.name | contains("iPhone")) | .udid' | head -n 1)
+          if [ -z "$SIMULATOR_ID" ]; then
+            echo "Error: No iPhone simulator found"
+            exit 1
+          fi
+          echo "Found simulator: $SIMULATOR_ID"
+          # Check if simulator is already booted
+          DEVICE_LIST=$(xcrun simctl list devices)
+          if echo "$DEVICE_LIST" | grep -q "$SIMULATOR_ID.*Booted"; then
+            echo "Simulator already booted"
+          else
+            echo "Booting simulator..."
+            xcrun simctl boot "$SIMULATOR_ID"
+          fi
+          # Verify simulator is booted
+          echo "Booted simulators:"
+          xcrun simctl list devices | grep Booted
       - name: Test iOS
         working-directory: ./Samples/SimpleMixpanel
         run: react-native run-ios

MixpanelReactNative.podspec

@@ -19,5 +19,5 @@ Pod::Spec.new do |s|
   s.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES' }
 
   s.dependency "React-Core"
-  s.dependency "Mixpanel-swift", '5.1.0'
+  s.dependency "Mixpanel-swift", '5.1.3'
 end

Samples/MixpanelStarter/README.md

@@ -15,7 +15,7 @@ This sample app bridges the gap between basic "Hello World" examples and complex
 
 ## ✨ Features Demonstrated
 
-This app showcases 8 core Mixpanel SDK capabilities:
+This app showcases 9 core Mixpanel SDK capabilities:
 
 | Feature | Description | Screen |
 |---------|-------------|--------|
@@ -24,17 +24,19 @@ This app showcases 8 core Mixpanel SDK capabilities:
 | 📊 **Event Tracking** | `track()` with custom properties and metadata | Home |
 | ⏱️ **Timed Events** | `timeEvent()` for automatic duration tracking | Home |
 | 🌐 **Super Properties** | `registerSuperProperties()` for global context | Home |
+| 🚩 **Feature Flags** | `flags.loadFlags()`, `isEnabled()`, dynamic feature control - **FULL INTEGRATION TEST SUITE** | Feature Flags |
 | 🔒 **Privacy Controls** | `optIn/OutTracking()` for GDPR compliance | Settings |
 | 🗑️ **Data Management** | `reset()` for logout/data deletion | Settings |
 | 🚀 **Manual Flush** | `flush()` to force send queued events | Settings |
 
 ## 📱 App Structure
 
-The app has 3 tabs:
+The app has 4 tabs:
 
 1. **Onboarding (User ID Tab)**: Demonstrates user identification lifecycle
 2. **Home (Events Tab)**: Shows event tracking and super properties
-3. **Settings**: Privacy controls and data management
+3. **Feature Flags**: **Comprehensive integration test suite** - exercises all 8 public API methods, Promise/Callback patterns, edge cases, and type coercion
+4. **Settings**: Privacy controls and data management
 
 ## 🚀 Quick Start
 
@@ -83,13 +85,18 @@ MixpanelStarter/
 │   ├── screens/
 │   │   ├── OnboardingScreen.tsx     # User identification demos
 │   │   ├── HomeScreen.tsx           # Event tracking patterns
+│   │   ├── FeatureFlagsScreen.tsx   # Feature flags integration tests
 │   │   └── SettingsScreen.tsx       # Privacy & data management
 │   ├── components/
 │   │   ├── ActionButton.tsx         # Reusable button component
 │   │   ├── InfoCard.tsx             # Info display card
+│   │   ├── FlagCard.tsx             # Flag display component
+│   │   ├── TestResultDisplay.tsx    # Test results visualization
+│   │   ├── EventTrackingLog.tsx     # Event history component
 │   │   └── ErrorBoundary.tsx        # Error handling wrapper
 │   ├── types/
-│   │   └── mixpanel.types.ts        # TypeScript definitions
+│   │   ├── mixpanel.types.ts        # TypeScript definitions
+│   │   └── flags.types.ts           # Feature flags test types
 │   ├── constants/
 │   │   └── tracking.ts              # Event names & properties
 │   └── App.tsx                       # Navigation setup
@@ -169,7 +176,48 @@ mixpanel.registerSuperProperties({
 
 **Why?** Eliminates repetitive property passing. Perfect for user preferences and app state.
 
-### 5. GDPR-Compliant Logout
+### 5. Feature Flags for Dynamic Control
+
+```typescript
+// Enable feature flags during initialization
+await mixpanel.init(false, {}, undefined, false, {
+  enabled: true,
+});
+
+// Load flags from Mixpanel
+await mixpanel.flags.loadFlags();
+
+// Check if flags are ready
+const ready = mixpanel.flags.areFlagsReady();
+
+// Synchronous flag evaluation (fast, uses cached values)
+const isEnabled = mixpanel.flags.isEnabledSync('feature-key', false);
+const value = mixpanel.flags.getVariantValueSync('feature-key', 'default');
+
+// Asynchronous flag evaluation (ensures latest values)
+const enabled = await mixpanel.flags.isEnabled('feature-key', false);
+const variant = await mixpanel.flags.getVariant('feature-key', {
+  key: 'feature-key',
+  value: null,
+});
+
+```
+
+**Why?** Enables remote feature control, A/B testing, and gradual rollouts without app updates. Perfect for experimentation and user segmentation.
+
+#### Feature Flags Testing Screen
+
+The Feature Flags screen is a **full integration test suite** with:
+
+- **4 Test Modes**: Sync, Async (Promise), Edge Cases, Type Coercion
+- **12 Pre-configured Flags**: Boolean gates, string experiments, dynamic configs
+- **Real-time Results**: Execution time, type detection, fallback tracking
+- **Event Monitoring**: Live `$experiment_started` event tracking
+- **All API Methods**: getVariantSync, getVariantValueSync, isEnabledSync, getVariant, getVariantValue, isEnabled (both Promise and Callback patterns)
+
+Use this screen during development to verify Feature Flags functionality!
+
+### 6. GDPR-Compliant Logout
 
 ```typescript
 // Before logout

Samples/MixpanelStarter/ios/Podfile.lock

@@ -8,11 +8,11 @@ PODS:
   - hermes-engine (0.82.1):
     - hermes-engine/Pre-built (= 0.82.1)
   - hermes-engine/Pre-built (0.82.1)
-  - Mixpanel-swift (5.1.0):
-    - Mixpanel-swift/Complete (= 5.1.0)
-  - Mixpanel-swift/Complete (5.1.0)
+  - Mixpanel-swift (5.1.3):
+    - Mixpanel-swift/Complete (= 5.1.3)
+  - Mixpanel-swift/Complete (5.1.3)
   - MixpanelReactNative (3.1.2):
-    - Mixpanel-swift (= 5.1.0)
+    - Mixpanel-swift (= 5.1.3)
     - React-Core
   - RCT-Folly (2024.11.18.00):
     - boost
@@ -1788,6 +1788,8 @@ PODS:
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
     - SocketRocket
+  - react-native-get-random-values (1.11.0):
+    - React-Core
   - react-native-safe-area-context (5.6.2):
     - boost
     - DoubleConversion
@@ -2547,6 +2549,7 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
+  - react-native-get-random-values (from `../node_modules/react-native-get-random-values`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-oscompat (from `../node_modules/react-native/ReactCommon/oscompat`)
@@ -2674,6 +2677,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   React-microtasksnativemodule:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
+  react-native-get-random-values:
+    :path: "../node_modules/react-native-get-random-values"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   React-NativeModulesApple:
@@ -2755,8 +2760,8 @@ SPEC CHECKSUMS:
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
   hermes-engine: 273e30e7fb618279934b0b95ffab60ecedb7acf5
-  Mixpanel-swift: 7b26468fc0e2e521104e51d65c4bbf7cab8162f8
-  MixpanelReactNative: b523d54778e31e396c55df6f732173f3819e58ee
+  Mixpanel-swift: 630484a1b61cb90820aa34492798d542d9f1d0f1
+  MixpanelReactNative: 30f767dd9aab033e24821454874afaa35c20e293
   RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f
   RCTDeprecation: f17e2ebc07876ca9ab8eb6e4b0a4e4647497ae3a
   RCTRequired: e2c574c1b45231f7efb0834936bd609d75072b63
@@ -2790,6 +2795,7 @@ SPEC CHECKSUMS:
   React-logger: fceaaedb9c715923a1900af68a7534e9b3a601a1
   React-Mapbuffer: 7e7ca4c53288117e7e0406e9eaa804bf259b4b30
   React-microtasksnativemodule: 885bebe5c5f25035e1fd0920776078840a0e3a76
+  react-native-get-random-values: 21325b2244dfa6b58878f51f9aa42821e7ba3d06
   react-native-safe-area-context: 54d812805f3c4e08a4580ad086cbde1d8780c2e4
   React-NativeModulesApple: c4bee6aa736092cd347456488a4f97a8e7517604
   React-oscompat: 95875e81f5d4b3c7b2c888d5bd2c9d83450d8bdb

Samples/MixpanelStarter/src/App.tsx

@@ -6,13 +6,14 @@ import {MixpanelProvider} from './contexts/MixpanelContext';
 import {ErrorBoundary} from './components/ErrorBoundary';
 import {OnboardingScreen} from './screens/OnboardingScreen';
 import {HomeScreen} from './screens/HomeScreen';
+import {FeatureFlagsScreen} from './screens/FeatureFlagsScreen';
 import {SettingsScreen} from './screens/SettingsScreen';
 import {MIXPANEL_TOKEN} from '@env';
 
 const Tab = createBottomTabNavigator();
 
 // Fallback token for demo purposes (use your own from Mixpanel dashboard)
-const DEMO_TOKEN = 'YOUR_TOKEN_HERE';
+const DEMO_TOKEN = 'metrics-1';
 const token = MIXPANEL_TOKEN || DEMO_TOKEN;
 
 function App(): React.JSX.Element {
@@ -52,6 +53,16 @@ function App(): React.JSX.Element {
                 ),
               }}
             />
+            <Tab.Screen
+              name="FeatureFlags"
+              component={FeatureFlagsScreen}
+              options={{
+                tabBarLabel: 'Flags',
+                tabBarIcon: ({color}) => (
+                  <Text style={{fontSize: 20, color}}>🚩</Text>
+                ),
+              }}
+            />
             <Tab.Screen
               name="Settings"
               component={SettingsScreen}