I recently set up react-native
project with expo and later on I added @react-navigation
packages.
It seems like this wasn't enough as NavigationContainer
render complains about SafeAreaContext
I tried to install required packages with expo install react-native-safe-area-context ...
but It didn't solve it.
Thought deleting node_modules
&& npm install
could help, but it didn't work either.
There were related questions to this issue, but they didn't provide much help
I will appreciate your help.
Here's what I get in android emulator
terminal
Unable to resolve "./SafeAreaContext" from "node_modules\react-native-safe-area-context\src\index.tsx"Failed building JavaScript bundle.
App.tsx
import React, { useState } from 'react';import { AppLoading } from 'expo'import { View, Text } from 'react-native';import { NavigationContainer } from '@react-navigation/native';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { createStackNavigator } from '@react-navigation/stack';function Test() { return (<View style={{ flex: 1, justifyContent: 'space-between', alignItems: 'center' }}><Text>Test</Text></View> );}const Stack = createStackNavigator();const Tab = createBottomTabNavigator();export default function App() { const [loaded, setLoaded] = useState(false); if(!loaded) { return <AppLoading startAsync={() => Promise.resolve()} onFinish={() => setLoaded(true)}/> } return <NavigationContainer></NavigationContainer>}
package.json
{"main": "node_modules/expo/AppEntry.js","scripts": {"start": "expo start","android": "expo start --android","ios": "expo start --ios","web": "expo start --web","eject": "expo eject" },"dependencies": {"@expo/vector-icons": "^10.2.0","@react-native-community/masked-view": "^0.1.6","@react-navigation/bottom-tabs": "^5.5.1","@react-navigation/native": "^5.5.0","@react-navigation/stack": "^5.4.1","expo": "^37.0.12","expo-asset": "^8.1.5","expo-constants": "^9.0.0","expo-linking": "^1.0.1","expo-splash-screen": "^0.2.3","expo-web-browser": "^8.2.1","react": "~16.9.0","react-dom": "~16.9.0","react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-gesture-handler": "~1.6.0","react-native-reanimated": "~1.7.0","react-native-safe-area-context": "0.7.3","react-native-safe-area-view": "^1.1.1","react-native-screens": "~2.2.0","react-native-web": "~0.11.7","react-redux": "^7.2.0","redux": "^4.0.5" },"devDependencies": {"@babel/core": "^7.8.6","@types/react": "~16.9.23","@types/react-native": "~0.61.17","babel-preset-expo": "~8.1.0","typescript": "~3.8.3" },"private": true}