diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88edc6e3ed..782e0a1f81 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
### Fixes
+- TimetoTisplay correctly warns about not supporting the new React Native architecture ([#4160](https://github.com/getsentry/sentry-react-native/pull/4160))
- Handles error with string cause ([#4163](https://github.com/getsentry/sentry-react-native/pull/4163))
- Use `appLaunchedInForeground` to determine invalid app start data on Android ([#4146](https://github.com/getsentry/sentry-react-native/pull/4146))
- Upload source maps for all release variants on Android (not only the last found) ([#4125](https://github.com/getsentry/sentry-react-native/pull/4125))
diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index 31b3b89e1d..ce23f6828f 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -33,6 +33,7 @@ import { HttpClient } from '@sentry/integrations';
import Ionicons from 'react-native-vector-icons/Ionicons';
import PlaygroundScreen from './Screens/PlaygroundScreen';
import { logWithoutTracing } from './utils';
+import HeavyNavigationScreen from './Screens/HeavyNavigationScreen';
LogBox.ignoreAllLogs();
@@ -168,6 +169,10 @@ const TabTwoStack = Sentry.withProfiler(
name="ManualTracker"
component={ManualTrackerScreen}
/>
+
;
+ route?: {
+ params?: {
+ manualTrack: boolean;
+ };
+ };
+}
+const buttonTitles = Array.from(
+ { length: 500 },
+ (_, index) => `Sample button ${index + 1}`,
+);
+
+/**
+ * this page takes around 300ms to initially display, we navigate to another page in 100ms.
+ * The time to initial display will never be finished on this page.
+ */
+const HeavyNavigationScreen = (props: Props) => {
+ const content = (
+
+
+
+ Heavy page only intended for navigating to another page while the page
+ is loading.
+
+
+ {buttonTitles.map((title, index) => (
+
+ ))}
+
+ );
+
+ React.useEffect(() => {
+ setTimeout(() => {
+ props.navigation.goBack();
+ }, 1);
+ });
+ return (
+ <>
+ {props.route?.params?.manualTrack ? (
+
+ {content}
+
+ ) : (
+ content
+ )}
+ >
+ );
+};
+
+export default Sentry.withProfiler(HeavyNavigationScreen);
+
+const styles = StyleSheet.create({
+ screen: {
+ flex: 1,
+ padding: 16,
+ },
+ titleContainer: {
+ paddingBottom: 12,
+ },
+ title: {
+ fontSize: 24,
+ fontWeight: '700',
+ },
+});
diff --git a/samples/react-native/src/Screens/PerformanceScreen.tsx b/samples/react-native/src/Screens/PerformanceScreen.tsx
index c768d4b540..9d69b14a29 100644
--- a/samples/react-native/src/Screens/PerformanceScreen.tsx
+++ b/samples/react-native/src/Screens/PerformanceScreen.tsx
@@ -11,11 +11,14 @@ import {
import { StackNavigationProp } from '@react-navigation/stack';
import { CommonActions } from '@react-navigation/native';
import * as Sentry from '@sentry/react-native';
+import { Text } from 'react-native';
interface Props {
navigation: StackNavigationProp;
}
+const Spacer = () => ;
+
const PerformanceScreen = (props: Props) => {
const onPressPerformanceTiming = () => {
// Navigate with a reset action just to test
@@ -62,6 +65,24 @@ const PerformanceScreen = (props: Props) => {
props.navigation.navigate('Redux');
}}
/>
+
+
+ Heavy Page Navigation that navigates back automatically, before
+ finishing the time to display.
+
+