Getting this error: error: bundling failed: Error: Unable to resolve module `react-native-safe-area-context`

React NativeReact Native-AndroidReact Native-IosReact Native-Navigation

React Native Problem Overview

I am getting this error after running my App:

> error: bundling failed: Error: Unable to resolve module react-native-safe-area-context from node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: react-native-safe-area-context could not be found within the project.

But the same thing I had done for my old demo. It worked perfectly fine.

I don't know what I am doing wrong here. Please check my code:

For installing:

  1. React Native Navigation & Gesture Handler:

npm install --save react-navigation

npm install --save react-native-gesture-handler

  1. React Native Stack:

npm install --save react-navigation-stack

App.js

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import FirstOptionsPage from "./FirstOptionsPage";

const MainNavigator = createStackNavigator(
  {
    FirstOptions: FirstOptionsPage
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        // backgroundColor: '#28F1A6',
        elevation: 0,
        shadowOpacity: 0
      },
      headerTintColor: "#ca375e",
      headerTitleStyle: {
        fontWeight: "bold",
        color: "#161616"
      }
    }
  }
);

const App = createAppContainer(MainNavigator); // For setting Navigation Stack
export default App;

And FirstOptionsPage.js:

import React from "react";
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  ScrollView,
  Switch
} from "react-native";

export default class FirstOptionsPage extends React.Component {
  static navigationOptions = {
    title: "Preferences"
  };

  constructor(props) {
    super(props);
    this.state = {
      switch1Value: false
    };
  }

  toggleSwitch1 = value => {
    this.setState({ switch1Value: value });
    console.log("Switch 1 is: " + value);
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
      <SafeAreaView style={styles.mainContainerStyle}>
        <View style={styles.subContainerStyle}>
          <Text style={styles.subtitleTextStyle}>Someone likes my post</Text>
          <View style={styles.switchStyle}>
            <Switch
              onValueChange={this.toggleSwitch1}
              value={this.state.switch1Value}
              thumbColor={MAGENTA_COLOR_CODE}
              trackColor={{
                false: GREY_COLOR_CODE,
                true: DARK_GREY_COLOR_CODE
              }}
            />
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

I am new to React-Native. How can I fix this?

React Native Solutions

Solution 1 - React Native

I think the problem is in the SafeAreaView, for the new react-native version, it has migrated to react-native-community/react-native-safe-area-view. if you want to use SafeAreaView, you should install it first.

the new use is like this:

import SafeAreaView from 'react-native-safe-area-view';

export default function MyAwesomeApp() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <Text>
          Look, I'm safe! Not under a status bar or notch or home indicator or
          anything! Very cool
        </Text>
      </View>
    </SafeAreaView>
  );
}

for installing it you can use the following commands:
yarn add react-native-safe-area-view react-native-safe-area-context.

if you do not use auto-link, you have to also link it. for details about it, see this link

Solution 2 - React Native

It is a little funny, I wanted to add navigation so I added

> npm install --save react-navigation

for this to work fine I had to add: > expo install react-native-gesture-handler react-native-reanimated

Then I got

> Unable to resolve "react-native-safe-area-context" So I added: > > expo install react-navigation-stack > > expo install react-native-safe-area-view react-native-safe-area-context

then I got > bundling failed: Error: Unable to resolve module @react-native-community/masked-view

So I searched for the masked-view (which currently is not supported by the expo, according to its git document). Then I found out that I can use: >expo install @react-native-community/masked-view which could work or not :)

Therefore, from now on I use following commands at the start of all of my react-native projects, to be able to use navigation properly:

> npm install --save react-navigation > > expo install react-native-gesture-handler react-native-reanimated react-navigation-stack > > expo install react-native-safe-area-view react-native-safe-area-context > > expo install @react-native-community/masked-view

Solution 3 - React Native

After running these commands:

npm i react-native-safe-area-view react-native-safe-area-context &&
react-native link react-native-safe-area-context

It prompted me an error about masked-view, so I also had to run npm i @react-native-community/masked-view and then my code can now be successfully run on Android physical device.

Thanks to Lenoarod and Gautam Shrivastav for pointing out the right direction.

Solution 4 - React Native

installing following two,

npm install --save @react-native-community/masked-view
npm install react-native-safe-area-context

it is work for me

Solution 5 - React Native

I think you miss link depency with your project so you can try as below:

With React Native 0.6 or higher:

On iOS, make sure you have Cocoapods installed and run:

cd ios
pod install
cd ..

With React native 0.59 and lower try:

react-native link react-native-safe-area-context

Solution 6 - React Native

copy all and paste in terminal

expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens

work for me

Solution 7 - React Native

Run the following:

expo install react-native-safe-area-context

expo will select the right version and then install it.

Solution 8 - React Native

To use React Navigation you need to run the following command

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

or

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Solution 9 - React Native

use the commend npm i react-navigation-stack t solve this error

Solution 10 - React Native

Starting the Metro Bundler directly from the project directory works for me.

Clean cache

rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all

Start Metro Bundler directly

react-native start

Now run react-native run-android or react-native run-ios in another tab

Solution 11 - React Native

Me I think it is due to incompatible version pairs for expo and safe area context. You should try run this:

npm uninstall react-native-safe-area-context

After, you run this :

expo install react-native-safe-area-context

Solution 12 - React Native

In two steps :

  1. npm i -g expo
  2. expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Solution 13 - React Native

Thanks for your solution, it helped me solve the problem

  1. npm i -g expo

  2. expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

  3. react-native start

Solution 14 - React Native

If you are using @react-native/stack then before installing it use following command to install it's dependency

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

read the documentation at https://reactnavigation.org/docs/getting-started/

Solution 15 - React Native

There might be multiple solutions, for me it was the blunder created by react native. So before deleting the node-modules and other commands, check imports in all your .js files in app. In my case import { TestScheduler } from 'jest'; this line automatically added to one of the .js file. I removed this line and it worked for me.

Solution 16 - React Native

run this command: npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Solution 17 - React Native

installing "@react-native-community/masked-view" "react-native-safe-area-context"

worked for me

Categories
Recommended React Native Solutions
Recommended React Native-Android Solutions
Recommended React Native-Ios Solutions

Previous Solution:

Selenium - wait until element is present, visible and interactable

PythonSeleniumSelenium WebdriverWebdriverwaitExpected Condition

Next Solution:

DataBufferLimitException: Exceeded limit on max bytes to buffer webflux error

JavaSpringWebclientSpring Webflux

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGautam ShrivastavView Question on Stackoverflow
Solution 1 - React NativeLenoarodView Answer on Stackoverflow
Solution 2 - React NativeArash RabieeView Answer on Stackoverflow
Solution 3 - React NativeAntonio JackView Answer on Stackoverflow
Solution 4 - React NativeKaumadie KariyawasamView Answer on Stackoverflow
Solution 5 - React NativeKim Thành VũView Answer on Stackoverflow
Solution 6 - React NativeMahdi HakamiView Answer on Stackoverflow
Solution 7 - React NativeJoey SmithView Answer on Stackoverflow
Solution 8 - React NativeDark MatterView Answer on Stackoverflow
Solution 9 - React NativeUmer JavedView Answer on Stackoverflow
Solution 10 - React NativeMilan.PatelView Answer on Stackoverflow
Solution 11 - React NativeSONKENG MBOGNING Brice D. N.View Answer on Stackoverflow
Solution 12 - React NativeAbdelmalek NouriView Answer on Stackoverflow
Solution 13 - React NativeFatemeh GhanbariView Answer on Stackoverflow
Solution 14 - React NativeEr. Mohit AgrawalView Answer on Stackoverflow
Solution 15 - React Nativeu_pendraView Answer on Stackoverflow
Solution 16 - React Nativeasd864View Answer on Stackoverflow
Solution 17 - React NativeTebatso ManakaView Answer on Stackoverflow