[CI] (cc5471b) react-native/react-native-saas

apps/basic-integration/react-native/react-native-saas/.env.example

@@ -0,0 +1,2 @@
+POSTHOG_PROJECT_TOKEN=phc_your_project_token_here
+POSTHOG_HOST=https://us.i.posthog.com

apps/basic-integration/react-native/react-native-saas/.gitignore

@@ -58,3 +58,4 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+.env

apps/basic-integration/react-native/react-native-saas/package.json

@@ -16,12 +16,17 @@
     "@react-navigation/native-stack": "^7.3.4",
     "axios": "^1.12.0",
     "immer": "^10.1.1",
+    "posthog-react-native": "^4.84.3",
     "react": "19.2.0",
     "react-native": "0.83.0",
+    "react-native-config": "^1.7.2",
+    "react-native-device-info": "^15.0.2",
     "react-native-gesture-handler": "^2.24.0",
+    "react-native-localize": "^3.7.2",
     "react-native-reanimated": "^4.2.1",
     "react-native-safe-area-context": "^5.5.2",
     "react-native-screens": "^4.10.0",
+    "react-native-svg": "^15.16.0",
     "react-native-toast-message": "^2.3.0",
     "react-native-vector-icons": "^10.2.0",
     "react-native-worklets": "^0.7.2",

apps/basic-integration/react-native/react-native-saas/src/config/posthog.js

@@ -0,0 +1,44 @@
+import PostHog from 'posthog-react-native';
+import Config from 'react-native-config';
+
+const projectToken = Config.POSTHOG_PROJECT_TOKEN;
+const host = Config.POSTHOG_HOST;
+
+if (!projectToken && __DEV__) {
+  throw new Error(
+    'POSTHOG_PROJECT_TOKEN variable required by PostHog is missing or un-configured, this causes events to be silently missed. This error stops appearing once POSTHOG_PROJECT_TOKEN is configured',
+  );
+}
+
+if (!host && __DEV__) {
+  throw new Error(
+    'POSTHOG_HOST variable required by PostHog is missing or un-configured, this causes events to be silently missed. This error stops appearing once POSTHOG_HOST is configured',
+  );
+}
+
+export const isPostHogConfigured = Boolean(projectToken && host);
+
+export const posthog = isPostHogConfigured
+  ? new PostHog(projectToken, {
+      host,
+      debug: __DEV__,
+      logs: {
+        serviceName: 'react-native-saas',
+        environment: __DEV__ ? 'development' : 'production',
+      },
+      errorTracking: {
+        autocapture: {
+          uncaughtExceptions: true,
+          unhandledRejections: true,
+          console: [],
+        },
+      },
+    })
+  : null;
+
+export const posthogLogger = posthog
+  ? {
+      info: (message, attributes) => posthog.logger.info(message, attributes),
+      warn: (message, attributes) => posthog.logger.warn(message, attributes),
+    }
+  : null;

apps/basic-integration/react-native/react-native-saas/src/routes.js

@@ -1,23 +1,33 @@
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { PostHogProvider } from 'posthog-react-native';
 
 import Main from './pages/Main';
 import SignIn from './pages/SignIn';
+import { posthog } from './config/posthog';
 import NavigationService from './services/navigation';
 
 const Stack = createNativeStackNavigator();
 
 export default function Routes({ initialRouteName }) {
+  const navigator = (
+    <Stack.Navigator
+      initialRouteName={initialRouteName}
+      screenOptions={{ headerShown: false }}
+    >
+      <Stack.Screen name="SignIn" component={SignIn} />
+      <Stack.Screen name="Main" component={Main} />
+    </Stack.Navigator>
+  );
+
   return (
     <NavigationContainer ref={NavigationService.navigationRef}>
-      <Stack.Navigator
-        initialRouteName={initialRouteName}
-        screenOptions={{ headerShown: false }}
-      >
-        <Stack.Screen name="SignIn" component={SignIn} />
-        <Stack.Screen name="Main" component={Main} />
-      </Stack.Navigator>
+      {posthog ? (
+        <PostHogProvider client={posthog}>{navigator}</PostHogProvider>
+      ) : (
+        navigator
+      )}
     </NavigationContainer>
   );
 }

apps/basic-integration/react-native/react-native-saas/src/store/modules/auth/sagas.js

@@ -3,6 +3,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import toast from '../../../services/toast';
 import api from '../../../services/api';
 import NavigationService from '../../../services/navigation';
+import { posthog, posthogLogger } from '../../../config/posthog';
 import { DEMO_TOKEN, isDemoMode, demoPermissions } from '../../../services/demoData';
 
 import {
@@ -43,6 +44,12 @@ export function* signIn({ payload }) {
       yield put(signInSuccess(DEMO_TOKEN));
       // Grant all permissions immediately in demo mode
       yield put(getPermissionsSuccess(demoPermissions.roles, demoPermissions.permissions));
+      if (posthog) {
+        posthog.capture('sign_in_succeeded', { sign_in_method: 'demo' });
+      }
+      if (posthogLogger) {
+        posthogLogger.info('sign_in_completed', { sign_in_method: 'demo' });
+      }
       toast.showSuccess('Welcome to demo mode!');
       NavigationService.navigate('Main');
       return;
@@ -53,13 +60,29 @@ export function* signIn({ payload }) {
     yield call([AsyncStorage, 'setItem'], '@Omni:token', response.data.token);
 
     yield put(signInSuccess(response.data.token));
+    if (posthog) {
+      posthog.capture('sign_in_succeeded', { sign_in_method: 'credentials' });
+    }
+    if (posthogLogger) {
+      posthogLogger.info('sign_in_completed', {
+        sign_in_method: 'credentials',
+      });
+    }
     NavigationService.navigate('Main');
   } catch (err) {
+    if (posthogLogger) {
+      posthogLogger.warn('sign_in_failed', { outcome: 'failed' });
+    }
     toast.showError('Invalid credentials');
   }
 }
 
 export function* signOut() {
+  if (posthog) {
+    posthog.capture('signed_out');
+    posthog.reset();
+  }
+
   yield call([AsyncStorage, 'clear']);
   NavigationService.reset('SignIn');
 }

apps/basic-integration/react-native/react-native-saas/src/store/modules/members/sagas.js

@@ -1,6 +1,7 @@
 import { takeLatest, call, put, all, select } from 'redux-saga/effects';
 import toast from '../../../services/toast';
 import api from '../../../services/api';
+import { posthog } from '../../../config/posthog';
 import { isDemoMode, demoMembers } from '../../../services/demoData';
 
 import { getMembersSuccess, inviteMemberSuccess } from './actions';
@@ -28,12 +29,24 @@ export function* updateMember({ payload }) {
   try {
     // Demo mode
     if (isDemoMode(token)) {
+      if (posthog) {
+        posthog.capture('member_roles_updated', {
+          update_mode: 'demo',
+          role_count: roles.length,
+        });
+      }
       toast.showSuccess('Member updated');
       return;
     }
 
     yield call(api.put, `members/${id}`, { roles: roles.map(role => role.id) });
 
+    if (posthog) {
+      posthog.capture('member_roles_updated', {
+        update_mode: 'api',
+        role_count: roles.length,
+      });
+    }
     toast.showSuccess('Member updated');
   } catch (err) {
     toast.showError('Error updating member');
@@ -54,12 +67,18 @@ export function* inviteMember({ payload }) {
         roles: [{ id: 3, name: 'Viewer' }],
       };
       yield put(inviteMemberSuccess(newMember));
+      if (posthog) {
+        posthog.capture('member_invited', { invitation_mode: 'demo' });
+      }
       toast.showSuccess('Member added');
       return;
     }
 
     yield call(api.post, 'invites', { invites: [email] });
 
+    if (posthog) {
+      posthog.capture('member_invited', { invitation_mode: 'api' });
+    }
     toast.showSuccess('Invite sent');
   } catch (err) {
     toast.showError('Error sending invite');

apps/basic-integration/react-native/react-native-saas/src/store/modules/projects/sagas.js

@@ -1,6 +1,7 @@
 import { takeLatest, call, put, all, select } from 'redux-saga/effects';
 import toast from '../../../services/toast';
 import api from '../../../services/api';
+import { posthog } from '../../../config/posthog';
 import { isDemoMode, demoProjects } from '../../../services/demoData';
 
 import {
@@ -35,6 +36,9 @@ export function* createProject({ payload }) {
       const newProject = { id: Date.now(), title };
       yield put(createProjectSuccess(newProject));
       yield put(closeProjectModal());
+      if (posthog) {
+        posthog.capture('project_created', { creation_mode: 'demo' });
+      }
       toast.showSuccess('Project created');
       return;
     }
@@ -43,6 +47,9 @@ export function* createProject({ payload }) {
 
     yield put(createProjectSuccess(response.data));
     yield put(closeProjectModal());
+    if (posthog) {
+      posthog.capture('project_created', { creation_mode: 'api' });
+    }
 
     toast.showSuccess('Project created');
   } catch (err) {

apps/basic-integration/react-native/react-native-saas/src/store/modules/teams/sagas.js

@@ -2,6 +2,7 @@ import { takeLatest, call, put, all, select } from 'redux-saga/effects';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import toast from '../../../services/toast';
 import api from '../../../services/api';
+import { posthog } from '../../../config/posthog';
 import { isDemoMode, demoTeams } from '../../../services/demoData';
 
 import { getTeamsSuccess, createTeamSuccess, closeTeamModal } from './actions';
@@ -34,6 +35,9 @@ export function* createTeam({ payload }) {
       const newTeam = { id: Date.now(), name, slug };
       yield put(createTeamSuccess(newTeam));
       yield put(closeTeamModal());
+      if (posthog) {
+        posthog.capture('team_created', { creation_mode: 'demo' });
+      }
       toast.showSuccess('Team created');
       return;
     }
@@ -42,6 +46,9 @@ export function* createTeam({ payload }) {
 
     yield put(createTeamSuccess(response.data));
     yield put(closeTeamModal());
+    if (posthog) {
+      posthog.capture('team_created', { creation_mode: 'api' });
+    }
 
     toast.showSuccess('Team created');
   } catch (err) {
@@ -54,6 +61,10 @@ export function* selectActiveTeam({ payload }) {
 
   yield call([AsyncStorage, 'setItem'], '@Omni:team', JSON.stringify(team));
 
+  if (posthog) {
+    posthog.capture('team_selected');
+  }
+
   yield put(getProjectsRequest());
 }