SafeAreaContext error on Expo Dev Client Build

145 Views Asked by At

I am looking to add a simple SafeAreaView in my react native application using the 'react-native-safe-area-context'. I am on a windows PC, using expo dev client. My goal is simply to use the safe area context properly.

Here is the current App.js:

import { SafeAreaView } from 'react-native-safe-area-context';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <SafeAreaView>
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
        </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'gray',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Here is the error:

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

This error is located at:
    in RNCSafeAreaView
    in Unknown (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes

Here is my package.json:

{
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-masked-view/masked-view": "^0.2.9",
    "expo": "^49.0.0",
    "expo-dev-client": "~2.4.6",
    "expo-splash-screen": "~0.20.4",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.3",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

I am again on a windows PC, using expo dev client, and am doing this on Android Studio running with an android emulator on my PC.

I have tried: npx expo-doctor npx pod-install (on windows so obviously didn't work) expo update And a couple other commands that I've forgotten already. Been working on it for a couple hours.

Let me know if you need more information and thank you in advance.

0

There are 0 best solutions below