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

[saimon-moore]

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: #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

[jacobp100]

Does removing your node_modules and reinstalling help?

[saimon-moore]

Just tried....Same thing :(

Thanks for the tip though

[Moussawi7]

Unfortunately I am facing exactly the same issue

[alubeck]

This last comment in the other issue just helped me out here: #549 (comment)

[MIG3075]

Has anybody figured out what the root cause is? I've been dealing with this error message for the past 2 days after attempting to create a react-native-web app in an nx monorepo.

[finkpong]

@MIG3075 im in the same boat as you .. 2-3 days wasted ><;

As i understand it the Nx equivalent of npm run start -- --reset-cache is nx start <appname> --clear i have run this so many times but still getting this issue

and i've also tried the commands here https://docs.expo.dev/troubleshooting/clear-cache-macos-linux/#expo-cli-and-npm

[MIG3075]

@MIG3075 im in the same boat as you .. 2-3 days wasted ><;

As i understand it the Nx equivalent of npm run start -- --reset-cache is nx start <appname> --clear i have run this so many times but still getting this issue

and i've also tried the commands here https://docs.expo.dev/troubleshooting/clear-cache-macos-linux/#expo-cli-and-npm

Haha, funnily enough that's approximately how long I ended up working on trying to get this working.

Yeah, I've tried all the comands possible but nothing ended up working. The best takeaway I saw was basically downgrading various packages required for react-navigation and seeing which combination works. I ended up just going away from routing even though it would have been preferred to have.

Sorry you're struggling with it so much!

[CodeByStella]

https://stackoverflow.com/questions/79198367/react-native-error-unimplemented-component-rncsafeareaprovider