Initial transaction from React Navigation routing instrumentation starts after app component mount

[jennmueng]

The initial transaction started by both React Navigation V4/V5 instrumentations starts after the app component mounts.
This means any child spans created by code occurring before the navigator ref is present and registered to the routing instrumentation is present is not accounted for.

// Root App component

React.useEffect(() => {
    // This gets called before the next useEffect block
    const transaction = Sentry.getCurrentHub().getScope().getTransaction(); // undefined

    console.log(`Transaction exists: ${!!transaction}`); // "Transaction exists: false"
}, []);

React.useEffect(() => {
    // This gets called after the first useEffect block, and as of now is when the initial transaction is set on scope
    reactNavigationInstrumentation.registerNavigationContainer(navigation);
}, []);

For example, if any Fetch/XHR requests occur within the first useEffect block they will be instrumented by the tracing integration but not recorded to any transaction as none exist on the scope.