Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6212

Unable to resolve "./SafeAreaContext"

$
0
0

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

red screen of death by react=native

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}

Viewing all articles
Browse latest Browse all 6212

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>