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

Question

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:

React Native Navigation & Gesture Handler:

npm install --save react-navigation

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

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?

check for `react-native-safe-area-context` in your node modules, `react-navigation-stack` requires that but your node modules do not have that — Jigar Shah, Jan 02 '20 at 08:32
I had to add `react-native-safe-area-context` to my `package.json` file. I don't understand why this isn't a peer dependency of React Navigation. But, maybe due to version conflict or something. If it needs it, it should be a peer dependency. — Joshua Pinter, Sep 13 '21 at 13:43

score 85 · Accepted Answer · edited Jul 06 '20 at 18:18

85

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

edited Jul 06 '20 at 18:18

AmerllicA

29,059
15
130
154

answered Jan 02 '20 at 08:42

Lenoarod

3,441
14
25

1

Now I am getting this error ```error: bundling failed: Error: Unable to resolve module `@react-native-community/masked-view` from `node_modules/react-navigation-stack/lib/module/vendor/views/MaskedView.js`: @react-native-community/masked-view could not be found within the project.``` – Gautam Shrivastav Jan 02 '20 at 09:26
And actually everything was working fine in my previous project. Now it is showing this issue. – Gautam Shrivastav Jan 02 '20 at 09:27
you should know since react-native 0.6, many libraries had removed form react-native core. this problem like pre problem, read this link[https://github.com/react-native-community/react-native-masked-view] – Lenoarod Jan 02 '20 at 10:18
9

Well after doing what you said in your answer I also had to install ```@react-native-community/masked-view``` to fix it. Then my code worked successfully. Thanks for the help. – Gautam Shrivastav Jan 02 '20 at 11:45
1

Yeah, this is written in the release notes https://github.com/react-navigation/stack/releases/tag/v2.0.1 – mexique1 Jan 03 '20 at 16:34

score 47 · Answer 2 · edited Jan 08 '23 at 22:05

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.

Module not found: Can't resolve 'react-native-screens' LOL – Dr.G Apr 18 '20 at 20:25 — Dr.G, Apr 18 '20 at 20:25

score 23 · Answer 3 · answered Jan 03 '20 at 05:03

23

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.

answered Jan 03 '20 at 05:03

Antonio Jack

241
1
3

2

For react native version `0.60` and above, use yarn instead of npm and **do not link**. – Fatih Mert Doğancan Jan 03 '20 at 08:33
Thanks this worked for me. I used yarn as suggested by Fatih – Ram Fattah Mar 07 '22 at 07:22

Kaumadie Kariyawasam · Answer 4 · 2021-03-28T16:47:41.493

15

installing following two,

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

it is work for me

edited Mar 28 '21 at 16:47

answered Jun 22 '20 at 16:47

Kaumadie Kariyawasam

1,232
3
17
35

1

I don't understand why this is not in dependencies list of react-navigation. Anyways installing these two worked for me. – Ali Rehman Jun 24 '20 at 22:35

score 6 · Answer 5 · answered Jan 02 '20 at 08:48

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

score 5 · Answer 6 · answered Jan 02 '20 at 22:10

5

copy all and paste in terminal

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

work for me

answered Jan 02 '20 at 22:10

Mahdi Hakami

59
3

score 3 · Answer 7 · edited Jan 13 '20 at 08:09

3

Run the following:

expo install react-native-safe-area-context

expo will select the right version and then install it.

edited Jan 13 '20 at 08:09

answered Jan 13 '20 at 03:01

Joey Smith

31
1

score 3 · Answer 8 · answered Jul 07 '20 at 08:08

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

score 1 · Answer 9 · answered Jul 24 '22 at 00:25

1

i did this yarn add @react-native-community/masked-view yarn add react-native-safe-area-context and it gave me another error on import type { ScreenProps } from 'react-native-screens'

then did yarn add react-native-screens all went well

answered Jul 24 '22 at 00:25

Drweb12

19
4

score 0 · Answer 10 · answered Jan 13 '20 at 08:40

0

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

answered Jan 13 '20 at 08:40

Umer Javed

39
1
5

score 0 · Answer 11 · edited Jun 08 '20 at 10:35

0

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

edited Jun 08 '20 at 10:35

Adriaan

17,741
7
42
75

answered Jan 20 '20 at 14:16

Milan.Patel

9
2

score 0 · Answer 12 · answered Jan 31 '21 at 16:45

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/

score 0 · Answer 13 · answered Sep 07 '21 at 05:54

0

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

answered Sep 07 '21 at 05:54

SONKENG MBOGNING Brice D. N.

37
3

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. – Community Sep 07 '21 at 06:43

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

13 Answers13