[iOS] SafeAreaView has incorrect dimensions in screen when deep linked

[itsramiel]

My main app screen, let's call it screen A, has a view that renders a SafeAreaView. I have some ui calculationst that depends on the size of that view. The issue is that when a user is being deep linked into the app into another screen, let's call it screen B, then the SafeAreaView on screen A has incorrect, value of 0, safe area insets and only get correct when the user swipes back to screen A, but then my calculations are wrong.

However the useSafeAreaInsets return the correct result

In this example I am focusing on the top inset

Here is a sample app:

import * as React from 'react';
import {View, Text, Button} from 'react-native';
import {NavigationContainer, NavigationProp} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';

type TRoutes = {
  Home: undefined;
  Details: undefined;
};

function HomeScreen({navigation}: {navigation: NavigationProp<TRoutes>}) {
  const insets = useSafeAreaInsets();

  console.log('insets.top', insets.top);

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <SafeAreaView
        edges={['top']}
        onLayout={e => {
          console.log(e.nativeEvent.layout.height);
        }}
      />
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer
      linking={{
        prefixes: ['myapp://'],
        config: {
          initialRouteName: 'Home',
          screens: {
            Home: 'home',
            Details: 'details',
          },
        },
      }}>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

And here is a recording of how it goes:

Screen.Recording.2024-08-13.at.12.51.19.PM.mov

Repo: https://github.com/itsramiel/safe-area-wrong-inset