iOS Only - "Unimplemented Component: <RNCSafeAreaProvider>" Message on Screen (again)

Description

Hi,

I just created a new react native app over the weekend, and as is usually the case, I quickly ran into an issue.

I'm getting the same issue as here: https://github.com/AppAndFlow/react-native-safe-area-context/issues/549

Fails with:

But unlike in that issue, I tried:

1. clearing cache: npx react-native start --reset-cache
2. Removing Podfile.lock & workspace & pod install & then rebuilding the workspace via xcode.

and nothing seems to work... :(

So very stuck at this point...

Really hope someone can help with this 🙏 🙏 🙏

Steps to reproduce

Steps to Reproduce:

• Set up a React Native project with the following dependencies:
  • React Native: 0.81.3
  • @react-navigation/bottom-tabs: 7.2.1
  • @react-navigation/elements: 2.2.6
  • @react-navigation/native: 7.0.15
  • @react-navigation/native-stack: ^7.2.1
  • react-native-safe-area-context: ^5.3.0
  • react-native-screens: 4.9.1

Wrap the navigation container in as recommended in the App.js setup:

export const App = () => (
  <SafeAreaProvider>
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  </SafeAreaProvider>
);

const RootStack = () => (
  <Stack.Navigator initialRouteName="HomeTabs" id={undefined}>
    <Stack.Screen
      name="HomeTabs"
      component={HomeTabs}
      options={{ headerShown: false }}
    />
  </Stack.Navigator>
);

function HomeTabs() {
  return (
    <Tab.Navigator id={undefined}>
      <Tab.Screen name="Dashboard" component={DashboardScreen} />
    </Tab.Navigator>
  );
}

export const Layout = ({ children }) => {
  const scrollViewRef = useRef<null | ScrollView>(null);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView
        style={{
          flex: 1,
        }}
      >
        <ScrollView
          ref={(ref) => {
            scrollViewRef.current = ref;
          }}
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}
        >
          {children}
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

export const DashboardScreen = () => (
  <Layout>
    <Ui />
    <Core />
  </Layout>
);

Build and run the app on iOS.

Snack or a link to a repository

https://github.com/saimonmoore/bookmarker/tree/main/app/nx/bookmarker/apps/mobile

Safe Area Context version

5.3.0

React Native version

0.81.3

Platforms

iOS

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes