chore: upgrade Expo app and make it use navigation#1784
Merged
daniel-graham-amplitude merged 6 commits intoJun 3, 2026
Conversation
size-limit report 📦
|
Contributor
There was a problem hiding this comment.
Pull request overview
Upgrades the examples/react-native/expo-app Expo example to a newer Expo/RN baseline and wires it to the monorepo workspace SDK packages, adding React Navigation to exercise screen changes and updating Metro/Android tooling to support workspace linking.
Changes:
- Upgrade Expo app dependencies (Expo SDK 48 / React Native 0.71) and switch Amplitude deps to
workspace:*packages. - Add React Navigation stack (Home/Settings) and update Amplitude initialization/autocapture configuration.
- Adjust Metro + pnpm + Android Gradle configuration for monorepo/workspace + RN 0.71 (
react-android) compatibility.
Reviewed changes
Copilot reviewed 12 out of 13 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| examples/react-native/expo-app/tsconfig.json | Adds path mapping for workspace packages and updates include/exclude. |
| examples/react-native/expo-app/react-native.config.js | Adds RN CLI Android platform command/config wiring. |
| examples/react-native/expo-app/pnpm-workspace.yaml | Declares a local pnpm workspace including repo packages/*. |
| examples/react-native/expo-app/package.json | Upgrades Expo/RN deps, adds React Navigation, switches Amplitude deps to workspace:*. |
| examples/react-native/expo-app/metro.config.js | Watches specific workspace packages and forces app react/react-native resolution. |
| examples/react-native/expo-app/babel.config.js | Inlines AMPLITUDE_API_KEY at bundle time via Babel plugin. |
| examples/react-native/expo-app/App.tsx | Adds navigation screens and updates Amplitude init + plugin registration. |
| examples/react-native/expo-app/android/gradle/wrapper/gradle-wrapper.properties | Bumps Gradle wrapper version. |
| examples/react-native/expo-app/android/gradle.properties | Adds pickFirsts to resolve overlapping native libs. |
| examples/react-native/expo-app/android/build.gradle | Switches force/substitution to react-android and sets Kotlin plugin version. |
| examples/react-native/expo-app/android/app/build.gradle | Switches dependency from react-native:+ to react-android. |
| examples/react-native/expo-app/.npmrc | Uses hoisted node linker + hoist patterns for Metro/Gradle compatibility. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
|
Hi @daniel-graham-amplitude, could you share a screenshot of the app to confirm it can be successfully built? Thanks! |
Collaborator
Author
|
@Mercy811 added it to the description, thanks for the suggestion! |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Autofix Details
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Browser plugin misses navigation
- Replaced the browser page-view plugin in the Expo app with React Navigation route-change tracking that emits page-view events on native screens.
Or push these changes by commenting:
@cursor push e77b402fdb
Preview (e77b402fdb)
diff --git a/examples/react-native/expo-app/App.tsx b/examples/react-native/expo-app/App.tsx
--- a/examples/react-native/expo-app/App.tsx
+++ b/examples/react-native/expo-app/App.tsx
@@ -1,14 +1,25 @@
-import {StatusBar} from 'expo-status-bar';
-import {Button, StyleSheet, Text, View} from 'react-native';
-import {useEffect} from 'react';
-import {identify, Identify, init, track, add, Types} from '@amplitude/analytics-react-native';
-import { pageViewTrackingPlugin } from '@amplitude/plugin-page-view-tracking-browser';
-import { NavigationContainer } from "@react-navigation/native";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { StatusBar } from 'expo-status-bar';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import { useEffect, useRef } from 'react';
+import { identify, Identify, init, track, Types } from '@amplitude/analytics-react-native';
+import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
+const PAGE_VIEW_EVENT = '[Amplitude] Page Viewed';
-function HomeScreen({ navigation }) {
+const trackPageView = (routeName?: string) => {
+ if (!routeName) {
+ return;
+ }
+
+ track(PAGE_VIEW_EVENT, {
+ '[Amplitude] Page Path': routeName,
+ '[Amplitude] Page Title': routeName,
+ });
+};
+
+function HomeScreen({ navigation }: { navigation: any }) {
return (
<View style={styles.container}>
<Text>Home Screen</Text>
@@ -17,7 +28,7 @@
);
}
-function SettingsScreen({navigation}: {navigation: any}) {
+function SettingsScreen({ navigation }: { navigation: any }) {
return (
<View style={styles.container}>
<Text>Settings Screen</Text>
@@ -27,23 +38,41 @@
}
export default function App() {
+ const navigationRef = useNavigationContainerRef();
+ const routeNameRef = useRef<string>();
+
useEffect(() => {
(async () => {
- // AMPLITUDE_API_KEY is inlined at bundle time (see babel.config.js).
- await init(process.env.AMPLITUDE_API_KEY || 'YOUR_API_KEY', 'react-native-user-id', {
- logLevel: Types.LogLevel.Error,
- autocapture: {
- sessions: true,
- pageViews: false,
- },
- }).promise;
- add(pageViewTrackingPlugin());
- track('expo-app/react-native/test-event');
- await identify(new Identify().set('react-native-test', 'yes')).promise;
+ // AMPLITUDE_API_KEY is inlined at bundle time (see babel.config.js).
+ await init(process.env.AMPLITUDE_API_KEY || 'YOUR_API_KEY', 'react-native-user-id', {
+ logLevel: Types.LogLevel.Error,
+ autocapture: {
+ sessions: true,
+ pageViews: false,
+ },
+ }).promise;
+ track('expo-app/react-native/test-event');
+ await identify(new Identify().set('react-native-test', 'yes')).promise;
})();
}, []);
return (
- <NavigationContainer>
+ <NavigationContainer
+ ref={navigationRef}
+ onReady={() => {
+ const currentRouteName = navigationRef.getCurrentRoute()?.name;
+ routeNameRef.current = currentRouteName;
+ trackPageView(currentRouteName);
+ }}
+ onStateChange={() => {
+ const previousRouteName = routeNameRef.current;
+ const currentRouteName = navigationRef.getCurrentRoute()?.name;
+
+ if (currentRouteName && currentRouteName !== previousRouteName) {
+ trackPageView(currentRouteName);
+ }
+ routeNameRef.current = currentRouteName;
+ }}
+ >
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
diff --git a/examples/react-native/expo-app/package.json b/examples/react-native/expo-app/package.json
--- a/examples/react-native/expo-app/package.json
+++ b/examples/react-native/expo-app/package.json
@@ -10,7 +10,6 @@
},
"dependencies": {
"@amplitude/analytics-react-native": "workspace:*",
- "@amplitude/plugin-page-view-tracking-browser": "workspace:*",
"@babel/runtime": "^7.20.0",
"@react-native-async-storage/async-storage": "~1.17.11",
"@react-navigation/native": "^6.1.18",
diff --git a/examples/react-native/expo-app/pnpm-lock.yaml b/examples/react-native/expo-app/pnpm-lock.yaml
--- a/examples/react-native/expo-app/pnpm-lock.yaml
+++ b/examples/react-native/expo-app/pnpm-lock.yaml
@@ -11,9 +11,6 @@
'@amplitude/analytics-react-native':
specifier: workspace:*
version: link:../../../packages/analytics-react-native
- '@amplitude/plugin-page-view-tracking-browser':
- specifier: workspace:*
- version: link:../../../packages/plugin-page-view-tracking-browser
'@babel/runtime':
specifier: ^7.20.0
version: 7.28.6You can send follow-ups to the cloud agent here.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Autocapture sessions option ineffective
- Replaced the unsupported React Native example autocapture sessions setting with trackingSessionEvents so session lifecycle events are enabled.
Or push these changes by commenting:
@cursor push 3c54cde182
You can send follow-ups to the cloud agent here.
Reviewed by Cursor Bugbot for commit 707600d. Configure here.
daniel-graham-amplitude
deleted the
SDK-45-react-native-autocapture-hacking
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Checklist
Note
Low Risk
Changes are confined to the Expo example app and its build/config; no production SDK or auth/data-path changes.
Overview
Upgrades the examples/react-native/expo-app sample to React Native 0.71.14, links
@amplitude/analytics-react-nativeviaworkspace:*, and replaces the single-screen demo with a React Navigation native stack (Home ↔ Settings) for manual screen-transition testing.Monorepo / tooling: Adds a local
.npmrc(hoistednode_modules+ hoist patterns for Metro/Gradle), extendsmetro.config.jsto watch linked packages underpackages/and pinreact/react-nativeto the app’s copies, and inlinesAMPLITUDE_API_KEYat bundle time via Babel. Amplitude init now reads that env var (fallback placeholder), usesTypes.LogLevel.Error, and sends a renamed test event.Android (RN 0.71): Switches Gradle deps from
react-nativetoreact-android, addsreact-androidsubstitution and Kotlin classpath, bumps the wrapper to Gradle 7.6.4, and setspickFirstsfor overlapping native.sofiles.Reviewed by Cursor Bugbot for commit 3f39d58. Bugbot is set up for automated code reviews on this repo. Configure here.