ERROR Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.

[bojarovski]

I have this error. Does someone know how I can resolve this?
I'm having a problem with this error when building my application. I'm using Expo Go, and I'm building with expo-dev-client. I've also tried removing Expo and rebuilding, but I still get the same error message. I've tried everything I can think of, and I'm out of ideas.

Note
This error only occurs when I build the application. I didn’t notice this error before because I was working on Expo Go, and in that case, I don’t have this problem. The issue arises only when I build the application.

App.js

export default function App() {
  return (
    <Provider store={store}>
      <PaperProvider>
        <StatusBar style="light" />
        <GestureHandlerRootView style={{ flex: 1 }}>
          <Root />
        </GestureHandlerRootView>
      </PaperProvider>
    </Provider>
  );
}

I installed this library

`react-native-safe-area-context": ^4.7.4`

[mtch99]

The problem might be dependency version mismatch or missing dependency
Could you provide your package.json?

[lukewalczak]

Did you rebuild the android app after installing the react-native-safe-area-context library?

[bojarovski]

Did you rebuild the android app after installing the react-native-safe-area-context library?

yes i did, also i didnt mention im using expo go

[bojarovski]

The problem might be dependency version mismatch or missing dependency Could you provide your package.json?
`{
"name": "buzzhub",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@dietime/react-native-date-picker": "^1.2.1",
"@gorhom/bottom-sheet": "^4.4.7",
"@react-native-async-storage/async-storage": "1.18.2",
"@react-native-community/datetimepicker": "7.2.0",
"@react-native-community/geolocation": "^3.0.6",
"@react-native-community/slider": "4.4.2",
"@react-native-picker/picker": "^2.4.10",
"@react-navigation/bottom-tabs": "^6.5.8",
"@react-navigation/material-top-tabs": "^6.6.4",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"@reduxjs/toolkit": "^1.9.5",
"axios": "^1.5.0",
"expo": "^49.0.0",
"expo-build-properties": "~0.8.3",
"expo-constants": "~14.4.2",
"expo-dev-client": "~2.4.12",
"expo-device": "~5.4.0",
"expo-location": "~16.1.0",
"expo-notifications": "~0.20.1",
"expo-permissions": "~14.2.1",
"expo-status-bar": "~1.6.0",
"expo-task-manager": "~11.3.0",
"i18next": "^23.6.0",
"libphonenumber-js": "^1.10.44",
"lodash.debounce": "^4.0.8",
"moment-timezone": "^0.5.43",
"pinar": "^0.12.2",
"react": "18.2.0",
"react-i18next": "^13.3.1",
"react-native": "0.72.6",
"react-native-actionsheet": "^2.4.2",
"react-native-animatable": "^1.3.3",
"react-native-chart-kit": "^6.12.0",
"react-native-element-dropdown": "^2.9.0",
"react-native-gesture-handler": "~2.12.0",
"react-native-gifted-chat": "^2.4.0",
"react-native-google-mobile-ads": "^12.3.0",
"react-native-maps": "1.7.1",
"react-native-pager-view": "6.2.0",
"react-native-paper": "^5.11.1",
"react-native-progress": "^5.0.0",
"react-native-progress-steps": "^1.3.4",
"react-native-ratings": "^8.1.0",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "^4.7.4",
"react-native-svg": "13.9.0",
"react-native-svg-transformer": "^1.1.0",
"react-native-swiper": "^1.6.0",
"react-native-tab-view": "^3.5.2",
"react-native-vector-icons": "^10.0.0",
"react-redux": "^8.1.1",
"typescript": "^5.1.3"
},
"devDependencies": {
"@babel/core": "^7.20.0"
},
"private": true
}

[bojarovski]

export default function App() {
  return (
    <PaperProvider>
      <Provider store={store}>
        <StatusBar style="light" />
        <GestureHandlerRootView style={{ flex: 1 }}>
          <Root />
        </GestureHandlerRootView>
      </Provider>
    </PaperProvider>
  );
}

when i changed <PaperProvider> and <Provider store={store}> i got this error

[bojarovski]

I FIXED ISSUE
I cahged position of PaperProvider and Provider and alos import in app.js import "react-native-screens";
and now everything works fine :D

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <Provider store={store}>
        <StatusBar style="light" />
        <GestureHandlerRootView style={{ flex: 1 }}>
          <Root />
        </GestureHandlerRootView>
      </Provider>
    </PaperProvider>
  );
}

[Ruto]

having a similar issue with expo 51. I have rebuild the development build app but the error still persist while in the expo go app it doesn't raise any warnings or errors. I am using "react-native-safe-area-context": "4.10.5" my app screens

import 'react-native-gesture-handler';
import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react'
import { store, persistor} from './src/redux/store';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import AppContainer from './src/navigation'

function App() {
return (







);
}

export default App;

When i check with npm ls react-native-safe-area-context i get ├─┬ @react-navigation/bottom-tabs@6.6.1
│ ├─┬ @react-navigation/elements@1.3.31
│ │ └── react-native-safe-area-context@4.10.5 deduped
│ └── react-native-safe-area-context@4.10.5 deduped
├─┬ @react-navigation/drawer@6.7.2
│ └── react-native-safe-area-context@4.10.5 deduped
├─┬ @react-navigation/native-stack@6.11.0
│ └── react-native-safe-area-context@4.10.5 deduped
├─┬ react-native-elements@3.4.3
│ └── react-native-safe-area-context@4.10.5 deduped
├─┬ react-native-paper@5.12.5
│ └── react-native-safe-area-context@4.10.5 deduped
└── react-native-safe-area-context@4.10.5

Showing that there are no conflicts between dependancies .
Kindly help I have been at this issue for a while now without any solution this post is the closest to a possibble solution I have come. Please Help

[FieldOpsByIspl]

This is the navigation compatible issue, but i cannot able to fix this, i only able to solve this by create a new react app , and add all my code and then create its build.

[Ahmetaksungur]

Did you find the solution?