From db6b7fa543e41bf14cc4ac2d0ad1e6d87f984245 Mon Sep 17 00:00:00 2001
From: lucas <lucas-zimerman1@hotmail.com>
Date: Wed, 9 Oct 2024 23:37:25 -0300
Subject: [PATCH 1/7] add check version to new arch

---
 samples/react-native/src/App.tsx              |   5 +
 .../src/Screens/HeavyNativationScreen.tsx     | 103 ++++++++++++++++++
 .../src/Screens/PerformanceScreen.tsx         |  18 +++
 src/js/tracing/timetodisplay.tsx              |   5 +-
 test/tracing/timetodisplay.test.tsx           |  67 ++++++++++++
 5 files changed, 197 insertions(+), 1 deletion(-)
 create mode 100644 samples/react-native/src/Screens/HeavyNativationScreen.tsx

diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index 31b3b89e1d..5ea25616b4 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 HeavyNativationScreen from './Screens/HeavyNativationScreen';
 
 LogBox.ignoreAllLogs();
 
@@ -168,6 +169,10 @@ const TabTwoStack = Sentry.withProfiler(
               name="ManualTracker"
               component={ManualTrackerScreen}
             />
+            <Stack.Screen
+              name="HeavyFastNavigation"
+              component={HeavyNativationScreen}
+            />
             <Stack.Screen
               name="PerformanceTiming"
               component={PerformanceTimingScreen}
diff --git a/samples/react-native/src/Screens/HeavyNativationScreen.tsx b/samples/react-native/src/Screens/HeavyNativationScreen.tsx
new file mode 100644
index 0000000000..fe8053d963
--- /dev/null
+++ b/samples/react-native/src/Screens/HeavyNativationScreen.tsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import {
+  Button,
+  View,
+  StyleSheet,
+  Text,
+  ScrollView,
+} from 'react-native';
+
+import * as Sentry from '@sentry/react-native';
+import { StackNavigationProp } from '@react-navigation/stack';
+
+interface Props {
+  navigation: StackNavigationProp<any, 'HeavyNativationScreen'>;
+  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 TrackerScreen = (props: Props) => {
+
+  const content = (
+    <ScrollView style={styles.screen}>
+      <View style={styles.titleContainer}>
+        <Text style={styles.title}>
+          Heavy page only intended for navigating to another page while the page is loading.
+        </Text>
+      </View>
+      {buttonTitles.map((title, index) => (
+        <Button
+          key={index}
+          title={title}
+        />
+      ))}
+    </ScrollView>
+  );
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      props.navigation.goBack();
+    }, 250);
+  }, []);
+  return (
+    <>
+    {props.route?.params?.manualTrack ? (
+      <Sentry.TimeToInitialDisplay record={true}>
+        {content}
+      </Sentry.TimeToInitialDisplay>
+    ) : (
+      content
+    )}
+    </>
+  );
+};
+
+export default Sentry.withProfiler(TrackerScreen);
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    padding: 16,
+  },
+  titleContainer: {
+    paddingBottom: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+  },
+  card: {
+    width: '100%',
+    height: 240,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: '#79628C',
+    borderRadius: 6,
+    backgroundColor: '#F6F6F8',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  statisticContainer: {
+    width: '100%',
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  statisticTitle: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  statisticCount: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+});
diff --git a/samples/react-native/src/Screens/PerformanceScreen.tsx b/samples/react-native/src/Screens/PerformanceScreen.tsx
index c768d4b540..c71397e2ca 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<any, 'PerformanceScreen'>;
 }
 
+const Spacer = () => <View style={styles.spacer} />;
+
 const PerformanceScreen = (props: Props) => {
   const onPressPerformanceTiming = () => {
     // Navigate with a reset action just to test
@@ -62,6 +65,21 @@ const PerformanceScreen = (props: Props) => {
             props.navigation.navigate('Redux');
           }}
         />
+        <Spacer />
+        <Text>Heavy Page Navigation that navigates back automatically, right after finishing the display .</Text>
+        <Button
+          title="With Manual TimeToDisplay."
+          onPress={() => {
+            props.navigation.navigate('HeavyFastNavigation', { manualTrack: true });
+          }}
+        />
+        <Button
+          title="With Automatic TimeToDisplay."
+          onPress={() => {
+            props.navigation.navigate('HeavyFastNavigation');
+          }}
+        />
+        <Spacer />
         <View style={styles.mainViewBottomWhiteSpace} />
       </ScrollView>
     </>
diff --git a/src/js/tracing/timetodisplay.tsx b/src/js/tracing/timetodisplay.tsx
index 12e68fd5b7..7d02e1ef0e 100644
--- a/src/js/tracing/timetodisplay.tsx
+++ b/src/js/tracing/timetodisplay.tsx
@@ -3,6 +3,7 @@ import type { Span,StartSpanOptions  } from '@sentry/types';
 import { fill, logger } from '@sentry/utils';
 import * as React from 'react';
 
+import { isTurboModuleEnabled } from '../utils/environment';
 import { getRNSentryOnDrawReporter, nativeComponentExists } from './timetodisplaynative';
 import type {RNSentryOnDrawNextFrameEvent } from './timetodisplaynative.types';
 import { setSpanDurationAsMeasurement } from './utils';
@@ -59,8 +60,10 @@ function TimeToDisplay(props: {
   fullDisplay?: boolean;
 }): React.ReactElement {
   const RNSentryOnDrawReporter = getRNSentryOnDrawReporter();
+  const isNewArchitecture = isTurboModuleEnabled();
 
-  if (__DEV__ && !nativeComponentMissingLogged && !nativeComponentExists) {
+  if (isNewArchitecture ||
+    (__DEV__ && !nativeComponentMissingLogged && !nativeComponentExists)) {
     nativeComponentMissingLogged = true;
     // Using setTimeout with a delay of 0 milliseconds to defer execution and avoid printing the React stack trace.
     setTimeout(() => {
diff --git a/test/tracing/timetodisplay.test.tsx b/test/tracing/timetodisplay.test.tsx
index a70105ae5b..a7c2949ca4 100644
--- a/test/tracing/timetodisplay.test.tsx
+++ b/test/tracing/timetodisplay.test.tsx
@@ -1,9 +1,15 @@
 import * as mockedtimetodisplaynative from './mockedtimetodisplaynative';
 jest.mock('../../src/js/tracing/timetodisplaynative', () => mockedtimetodisplaynative);
+import { isTurboModuleEnabled } from '../../src/js/utils/environment';
+jest.mock('../../src/js/utils/environment', () => ({
+  isTurboModuleEnabled: jest.fn().mockReturnValue(false),
+}));
+jest.spyOn(logger, 'warn');
 
 import type { Span as SpanClass} from '@sentry/core';
 import { getActiveSpan, getCurrentScope, getGlobalScope, getIsolationScope, setCurrentClient, spanToJSON, startSpanManual} from '@sentry/core';
 import type { Event, Measurements, Span, SpanJSON} from '@sentry/types';
+import { logger } from '@sentry/utils';
 import React from "react";
 import TestRenderer from 'react-test-renderer';
 
@@ -373,6 +379,67 @@ describe('TimeToDisplay', () => {
     expect(spanToJSON(initialDisplaySpan!).timestamp).toEqual(initialDisplayEndTimestampMs / 1_000);
     expect(spanToJSON(fullDisplaySpan!).timestamp).toEqual(fullDisplayEndTimestampMs / 1_000);
   });
+
+  test('should not log a warning if native component exists and not in new architecture', async () => {
+
+    (isTurboModuleEnabled as jest.Mock).mockReturnValue(false);
+
+    const [testSpan, activeSpan] = startSpanManual(
+      {
+        name: 'Root Manual Span',
+        startTime: secondAgoTimestampMs(),
+      },
+      (activeSpan: Span | undefined) => {
+        const testSpan = startTimeToInitialDisplaySpan();
+        TestRenderer.create(<TimeToInitialDisplay record={true} />);
+
+        emitNativeInitialDisplayEvent();
+
+        activeSpan?.end();
+
+        return [testSpan, activeSpan];
+      },
+    );
+
+    await jest.runOnlyPendingTimersAsync();
+    await client.flush();
+
+    expectInitialDisplayMeasurementOnSpan(client.event!);
+    expectFinishedInitialDisplaySpan(testSpan, activeSpan);
+    expect(spanToJSON(testSpan!).start_timestamp).toEqual(spanToJSON(activeSpan!).start_timestamp);
+    expect(logger.warn).not.toHaveBeenCalled();
+  });
+
+  test('should log a warning if in new architecture', async () => {
+
+    (isTurboModuleEnabled as jest.Mock).mockReturnValue(true);
+
+    const [testSpan, activeSpan] = startSpanManual(
+      {
+        name: 'Root Manual Span',
+        startTime: secondAgoTimestampMs(),
+      },
+      (activeSpan: Span | undefined) => {
+        const testSpan = startTimeToInitialDisplaySpan();
+        TestRenderer.create(<TimeToInitialDisplay record={true} />);
+
+        emitNativeInitialDisplayEvent();
+
+        activeSpan?.end();
+
+        return [testSpan, activeSpan];
+      },
+    );
+
+    await jest.runOnlyPendingTimersAsync();
+    await client.flush();
+
+    expectInitialDisplayMeasurementOnSpan(client.event!);
+    expectFinishedInitialDisplaySpan(testSpan, activeSpan);
+    expect(spanToJSON(testSpan!).start_timestamp).toEqual(spanToJSON(activeSpan!).start_timestamp);
+    expect(logger.warn).toHaveBeenCalledWith(
+      'TimeToInitialDisplay and TimeToFullDisplay are not supported on the web, Expo Go and New Architecture. Run native build or report an issue at https://github.com/getsentry/sentry-react-native');
+  });
 });
 
 function getInitialDisplaySpan(span?: Span) {

From 3f308390af4963eeda9dcd560bc1fd753b77a6d2 Mon Sep 17 00:00:00 2001
From: lucas <lucas-zimerman1@hotmail.com>
Date: Thu, 10 Oct 2024 00:06:08 -0300
Subject: [PATCH 2/7] screen rename, nits on if condition

---
 CHANGELOG.md                                                | 1 +
 samples/react-native/src/App.tsx                            | 6 +++---
 ...{HeavyNativationScreen.tsx => HeavyNatigationScreen.tsx} | 2 +-
 samples/react-native/src/Screens/PerformanceScreen.tsx      | 4 ++--
 src/js/tracing/timetodisplay.tsx                            | 3 +--
 5 files changed, 8 insertions(+), 8 deletions(-)
 rename samples/react-native/src/Screens/{HeavyNativationScreen.tsx => HeavyNatigationScreen.tsx} (97%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54033f5b6d..959d35e440 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))
 - 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 5ea25616b4..b8c5106c60 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -33,7 +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 HeavyNativationScreen from './Screens/HeavyNativationScreen';
+import HeavyNatigationScreen from './Screens/HeavyNatigationScreen';
 
 LogBox.ignoreAllLogs();
 
@@ -170,8 +170,8 @@ const TabTwoStack = Sentry.withProfiler(
               component={ManualTrackerScreen}
             />
             <Stack.Screen
-              name="HeavyFastNavigation"
-              component={HeavyNativationScreen}
+              name="HeavyNavigation"
+              component={HeavyNatigationScreen}
             />
             <Stack.Screen
               name="PerformanceTiming"
diff --git a/samples/react-native/src/Screens/HeavyNativationScreen.tsx b/samples/react-native/src/Screens/HeavyNatigationScreen.tsx
similarity index 97%
rename from samples/react-native/src/Screens/HeavyNativationScreen.tsx
rename to samples/react-native/src/Screens/HeavyNatigationScreen.tsx
index fe8053d963..92b2db45ed 100644
--- a/samples/react-native/src/Screens/HeavyNativationScreen.tsx
+++ b/samples/react-native/src/Screens/HeavyNatigationScreen.tsx
@@ -11,7 +11,7 @@ import * as Sentry from '@sentry/react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
 
 interface Props {
-  navigation: StackNavigationProp<any, 'HeavyNativationScreen'>;
+  navigation: StackNavigationProp<any, 'HeavyNatigationScreen'>;
   route?: {
     params?: {
       manualTrack: boolean
diff --git a/samples/react-native/src/Screens/PerformanceScreen.tsx b/samples/react-native/src/Screens/PerformanceScreen.tsx
index c71397e2ca..6daccef35c 100644
--- a/samples/react-native/src/Screens/PerformanceScreen.tsx
+++ b/samples/react-native/src/Screens/PerformanceScreen.tsx
@@ -70,13 +70,13 @@ const PerformanceScreen = (props: Props) => {
         <Button
           title="With Manual TimeToDisplay."
           onPress={() => {
-            props.navigation.navigate('HeavyFastNavigation', { manualTrack: true });
+            props.navigation.navigate('HeavyNavigation', { manualTrack: true });
           }}
         />
         <Button
           title="With Automatic TimeToDisplay."
           onPress={() => {
-            props.navigation.navigate('HeavyFastNavigation');
+            props.navigation.navigate('HeavyNavigation');
           }}
         />
         <Spacer />
diff --git a/src/js/tracing/timetodisplay.tsx b/src/js/tracing/timetodisplay.tsx
index 7d02e1ef0e..1b0d167d3d 100644
--- a/src/js/tracing/timetodisplay.tsx
+++ b/src/js/tracing/timetodisplay.tsx
@@ -62,8 +62,7 @@ function TimeToDisplay(props: {
   const RNSentryOnDrawReporter = getRNSentryOnDrawReporter();
   const isNewArchitecture = isTurboModuleEnabled();
 
-  if (isNewArchitecture ||
-    (__DEV__ && !nativeComponentMissingLogged && !nativeComponentExists)) {
+  if (__DEV__ && (isNewArchitecture || (!nativeComponentExists && !nativeComponentMissingLogged))){
     nativeComponentMissingLogged = true;
     // Using setTimeout with a delay of 0 milliseconds to defer execution and avoid printing the React stack trace.
     setTimeout(() => {

From fd81ee6f6f994a4771bf9ea74fbb965f90eb2626 Mon Sep 17 00:00:00 2001
From: lucas <lucas-zimerman1@hotmail.com>
Date: Thu, 10 Oct 2024 00:24:58 -0300
Subject: [PATCH 3/7] lint?

---
 .../src/Screens/HeavyNatigationScreen.tsx     | 41 ++++++++-----------
 src/js/tracing/timetodisplay.tsx              |  3 +-
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/samples/react-native/src/Screens/HeavyNatigationScreen.tsx b/samples/react-native/src/Screens/HeavyNatigationScreen.tsx
index 92b2db45ed..a340a63d8e 100644
--- a/samples/react-native/src/Screens/HeavyNatigationScreen.tsx
+++ b/samples/react-native/src/Screens/HeavyNatigationScreen.tsx
@@ -1,11 +1,5 @@
 import * as React from 'react';
-import {
-  Button,
-  View,
-  StyleSheet,
-  Text,
-  ScrollView,
-} from 'react-native';
+import { Button, View, StyleSheet, Text, ScrollView } from 'react-native';
 
 import * as Sentry from '@sentry/react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
@@ -14,18 +8,20 @@ interface Props {
   navigation: StackNavigationProp<any, 'HeavyNatigationScreen'>;
   route?: {
     params?: {
-      manualTrack: boolean
-    }
-  }
+      manualTrack: boolean;
+    };
+  };
 }
-const buttonTitles = Array.from({ length: 500 }, (_, index) => `Sample button ${index + 1}`);
+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 TrackerScreen = (props: Props) => {
-
   const content = (
     <ScrollView style={styles.screen}>
       <View style={styles.titleContainer}>
@@ -34,10 +30,7 @@ const TrackerScreen = (props: Props) => {
         </Text>
       </View>
       {buttonTitles.map((title, index) => (
-        <Button
-          key={index}
-          title={title}
-        />
+        <Button key={index} title={title}/>
       ))}
     </ScrollView>
   );
@@ -46,16 +39,16 @@ const TrackerScreen = (props: Props) => {
     setTimeout(() => {
       props.navigation.goBack();
     }, 250);
-  }, []);
+  });
   return (
     <>
-    {props.route?.params?.manualTrack ? (
-      <Sentry.TimeToInitialDisplay record={true}>
-        {content}
-      </Sentry.TimeToInitialDisplay>
-    ) : (
-      content
-    )}
+      {props.route?.params?.manualTrack ? (
+        <Sentry.TimeToInitialDisplay record={true}>
+          {content}
+        </Sentry.TimeToInitialDisplay>
+      ) : (
+        content
+      )}
     </>
   );
 };
diff --git a/src/js/tracing/timetodisplay.tsx b/src/js/tracing/timetodisplay.tsx
index 1b0d167d3d..3a8ab3de32 100644
--- a/src/js/tracing/timetodisplay.tsx
+++ b/src/js/tracing/timetodisplay.tsx
@@ -66,7 +66,8 @@ function TimeToDisplay(props: {
     nativeComponentMissingLogged = true;
     // Using setTimeout with a delay of 0 milliseconds to defer execution and avoid printing the React stack trace.
     setTimeout(() => {
-      logger.warn('TimeToInitialDisplay and TimeToFullDisplay are not supported on the web, Expo Go and New Architecture. Run native build or report an issue at https://github.com/getsentry/sentry-react-native');
+      logger.warn(
+          'TimeToInitialDisplay and TimeToFullDisplay are not supported on the web, Expo Go and New Architecture. Run native build or report an issue at https://github.com/getsentry/sentry-react-native');
     }, 0);
   }
 

From 7a8902c7e46d04138fdcccbbbb8bd11c0cdd56d1 Mon Sep 17 00:00:00 2001
From: lucas <lucas-zimerman1@hotmail.com>
Date: Thu, 10 Oct 2024 00:28:34 -0300
Subject: [PATCH 4/7] lint

---
 samples/react-native/src/Screens/PerformanceScreen.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/samples/react-native/src/Screens/PerformanceScreen.tsx b/samples/react-native/src/Screens/PerformanceScreen.tsx
index 6daccef35c..6cdfa9ab13 100644
--- a/samples/react-native/src/Screens/PerformanceScreen.tsx
+++ b/samples/react-native/src/Screens/PerformanceScreen.tsx
@@ -66,7 +66,9 @@ const PerformanceScreen = (props: Props) => {
           }}
         />
         <Spacer />
-        <Text>Heavy Page Navigation that navigates back automatically, right after finishing the display .</Text>
+        <Text>
+          Heavy Page Navigation that navigates back automatically, right after finishing the display .
+        </Text>
         <Button
           title="With Manual TimeToDisplay."
           onPress={() => {

From 10952b140e0f60589fd899f356e19678aa3820d1 Mon Sep 17 00:00:00 2001
From: lucas <lucas-zimerman1@hotmail.com>
Date: Thu, 10 Oct 2024 00:32:33 -0300
Subject: [PATCH 5/7] lint

---
 samples/react-native/src/Screens/HeavyNatigationScreen.tsx | 5 +++--
 samples/react-native/src/Screens/PerformanceScreen.tsx     | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/samples/react-native/src/Screens/HeavyNatigationScreen.tsx b/samples/react-native/src/Screens/HeavyNatigationScreen.tsx
index a340a63d8e..116e7d4021 100644
--- a/samples/react-native/src/Screens/HeavyNatigationScreen.tsx
+++ b/samples/react-native/src/Screens/HeavyNatigationScreen.tsx
@@ -26,11 +26,12 @@ const TrackerScreen = (props: Props) => {
     <ScrollView style={styles.screen}>
       <View style={styles.titleContainer}>
         <Text style={styles.title}>
-          Heavy page only intended for navigating to another page while the page is loading.
+          Heavy page only intended for navigating to another page while the page
+          is loading.
         </Text>
       </View>
       {buttonTitles.map((title, index) => (
-        <Button key={index} title={title}/>
+        <Button key={index} title={title} />
       ))}
     </ScrollView>
   );
diff --git a/samples/react-native/src/Screens/PerformanceScreen.tsx b/samples/react-native/src/Screens/PerformanceScreen.tsx
index 6cdfa9ab13..b80bca95bc 100644
--- a/samples/react-native/src/Screens/PerformanceScreen.tsx
+++ b/samples/react-native/src/Screens/PerformanceScreen.tsx
@@ -67,7 +67,8 @@ const PerformanceScreen = (props: Props) => {
         />
         <Spacer />
         <Text>
-          Heavy Page Navigation that navigates back automatically, right after finishing the display .
+          Heavy Page Navigation that navigates back automatically, right after
+          finishing the display.
         </Text>
         <Button
           title="With Manual TimeToDisplay."

From 748de3ee6d919087967fd5ac7625bf084f90d32f Mon Sep 17 00:00:00 2001
From: lucas <lucas-zimerman1@hotmail.com>
Date: Thu, 10 Oct 2024 23:14:55 -0300
Subject: [PATCH 6/7] make more data from sample, requested changes

---
 samples/react-native/src/App.tsx              |  4 +-
 ...onScreen.tsx => HeavyNavigationScreen.tsx} | 37 +++-----------
 .../src/Screens/PerformanceScreen.tsx         |  4 +-
 test/tracing/timetodisplay.test.tsx           | 49 ++-----------------
 4 files changed, 15 insertions(+), 79 deletions(-)
 rename samples/react-native/src/Screens/{HeavyNatigationScreen.tsx => HeavyNavigationScreen.tsx} (68%)

diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index b8c5106c60..ce23f6828f 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -33,7 +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 HeavyNatigationScreen from './Screens/HeavyNatigationScreen';
+import HeavyNavigationScreen from './Screens/HeavyNavigationScreen';
 
 LogBox.ignoreAllLogs();
 
@@ -171,7 +171,7 @@ const TabTwoStack = Sentry.withProfiler(
             />
             <Stack.Screen
               name="HeavyNavigation"
-              component={HeavyNatigationScreen}
+              component={HeavyNavigationScreen}
             />
             <Stack.Screen
               name="PerformanceTiming"
diff --git a/samples/react-native/src/Screens/HeavyNatigationScreen.tsx b/samples/react-native/src/Screens/HeavyNavigationScreen.tsx
similarity index 68%
rename from samples/react-native/src/Screens/HeavyNatigationScreen.tsx
rename to samples/react-native/src/Screens/HeavyNavigationScreen.tsx
index 116e7d4021..89d9b10b7d 100644
--- a/samples/react-native/src/Screens/HeavyNatigationScreen.tsx
+++ b/samples/react-native/src/Screens/HeavyNavigationScreen.tsx
@@ -5,7 +5,7 @@ import * as Sentry from '@sentry/react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
 
 interface Props {
-  navigation: StackNavigationProp<any, 'HeavyNatigationScreen'>;
+  navigation: StackNavigationProp<any, 'HeavyNatigavionScreen'>;
   route?: {
     params?: {
       manualTrack: boolean;
@@ -17,11 +17,13 @@ const buttonTitles = Array.from(
   (_, index) => `Sample button ${index + 1}`,
 );
 
+const beforeEffectSpanStart = Date.now();
+
 /**
  * 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 TrackerScreen = (props: Props) => {
+const HeavyNavigationScreen = (props: Props) => {
   const content = (
     <ScrollView style={styles.screen}>
       <View style={styles.titleContainer}>
@@ -37,9 +39,10 @@ const TrackerScreen = (props: Props) => {
   );
 
   React.useEffect(() => {
+    Sentry.startInactiveSpan({ name: "before Effect", startTime: beforeEffectSpanStart})?.end();
     setTimeout(() => {
       props.navigation.goBack();
-    }, 250);
+    }, 1);
   });
   return (
     <>
@@ -54,7 +57,7 @@ const TrackerScreen = (props: Props) => {
   );
 };
 
-export default Sentry.withProfiler(TrackerScreen);
+export default Sentry.withProfiler(HeavyNavigationScreen);
 
 const styles = StyleSheet.create({
   screen: {
@@ -68,30 +71,4 @@ const styles = StyleSheet.create({
     fontSize: 24,
     fontWeight: '700',
   },
-  card: {
-    width: '100%',
-    height: 240,
-    padding: 12,
-    borderWidth: 1,
-    borderColor: '#79628C',
-    borderRadius: 6,
-    backgroundColor: '#F6F6F8',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  statisticContainer: {
-    width: '100%',
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  statisticTitle: {
-    fontSize: 16,
-    fontWeight: '500',
-  },
-  statisticCount: {
-    fontSize: 16,
-    fontWeight: '700',
-  },
 });
diff --git a/samples/react-native/src/Screens/PerformanceScreen.tsx b/samples/react-native/src/Screens/PerformanceScreen.tsx
index b80bca95bc..9d69b14a29 100644
--- a/samples/react-native/src/Screens/PerformanceScreen.tsx
+++ b/samples/react-native/src/Screens/PerformanceScreen.tsx
@@ -67,8 +67,8 @@ const PerformanceScreen = (props: Props) => {
         />
         <Spacer />
         <Text>
-          Heavy Page Navigation that navigates back automatically, right after
-          finishing the display.
+          Heavy Page Navigation that navigates back automatically, before
+          finishing the time to display.
         </Text>
         <Button
           title="With Manual TimeToDisplay."
diff --git a/test/tracing/timetodisplay.test.tsx b/test/tracing/timetodisplay.test.tsx
index a7c2949ca4..23e0de8482 100644
--- a/test/tracing/timetodisplay.test.tsx
+++ b/test/tracing/timetodisplay.test.tsx
@@ -384,59 +384,18 @@ describe('TimeToDisplay', () => {
 
     (isTurboModuleEnabled as jest.Mock).mockReturnValue(false);
 
-    const [testSpan, activeSpan] = startSpanManual(
-      {
-        name: 'Root Manual Span',
-        startTime: secondAgoTimestampMs(),
-      },
-      (activeSpan: Span | undefined) => {
-        const testSpan = startTimeToInitialDisplaySpan();
-        TestRenderer.create(<TimeToInitialDisplay record={true} />);
-
-        emitNativeInitialDisplayEvent();
-
-        activeSpan?.end();
+    TestRenderer.create(<TimeToInitialDisplay record={true} />);
+    await jest.runOnlyPendingTimersAsync(); // Flush setTimeout.
 
-        return [testSpan, activeSpan];
-      },
-    );
-
-    await jest.runOnlyPendingTimersAsync();
-    await client.flush();
-
-    expectInitialDisplayMeasurementOnSpan(client.event!);
-    expectFinishedInitialDisplaySpan(testSpan, activeSpan);
-    expect(spanToJSON(testSpan!).start_timestamp).toEqual(spanToJSON(activeSpan!).start_timestamp);
     expect(logger.warn).not.toHaveBeenCalled();
   });
 
   test('should log a warning if in new architecture', async () => {
 
     (isTurboModuleEnabled as jest.Mock).mockReturnValue(true);
+    TestRenderer.create(<TimeToInitialDisplay record={true} />);
+    await jest.runOnlyPendingTimersAsync(); // Flush setTimeout.
 
-    const [testSpan, activeSpan] = startSpanManual(
-      {
-        name: 'Root Manual Span',
-        startTime: secondAgoTimestampMs(),
-      },
-      (activeSpan: Span | undefined) => {
-        const testSpan = startTimeToInitialDisplaySpan();
-        TestRenderer.create(<TimeToInitialDisplay record={true} />);
-
-        emitNativeInitialDisplayEvent();
-
-        activeSpan?.end();
-
-        return [testSpan, activeSpan];
-      },
-    );
-
-    await jest.runOnlyPendingTimersAsync();
-    await client.flush();
-
-    expectInitialDisplayMeasurementOnSpan(client.event!);
-    expectFinishedInitialDisplaySpan(testSpan, activeSpan);
-    expect(spanToJSON(testSpan!).start_timestamp).toEqual(spanToJSON(activeSpan!).start_timestamp);
     expect(logger.warn).toHaveBeenCalledWith(
       'TimeToInitialDisplay and TimeToFullDisplay are not supported on the web, Expo Go and New Architecture. Run native build or report an issue at https://github.com/getsentry/sentry-react-native');
   });

From 2580ddfe3f5d0a9503d8a8a7a80e7432ce4ed1c3 Mon Sep 17 00:00:00 2001
From: lucas <lucas-zimerman1@hotmail.com>
Date: Sun, 13 Oct 2024 22:15:53 -0300
Subject: [PATCH 7/7]  remove before effect

---
 samples/react-native/src/Screens/HeavyNavigationScreen.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/samples/react-native/src/Screens/HeavyNavigationScreen.tsx b/samples/react-native/src/Screens/HeavyNavigationScreen.tsx
index 89d9b10b7d..708a1d303f 100644
--- a/samples/react-native/src/Screens/HeavyNavigationScreen.tsx
+++ b/samples/react-native/src/Screens/HeavyNavigationScreen.tsx
@@ -17,8 +17,6 @@ const buttonTitles = Array.from(
   (_, index) => `Sample button ${index + 1}`,
 );
 
-const beforeEffectSpanStart = Date.now();
-
 /**
  * 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.
@@ -39,7 +37,6 @@ const HeavyNavigationScreen = (props: Props) => {
   );
 
   React.useEffect(() => {
-    Sentry.startInactiveSpan({ name: "before Effect", startTime: beforeEffectSpanStart})?.end();
     setTimeout(() => {
       props.navigation.goBack();
     }, 1);