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.