Sign Up

Sign In

Forget Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

You must login to ask question.

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

  • 2

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. Please help me to fix this.

Click to rate this post!
[Total: 0 Average: 0]
Share This Post
Share
  1. to make it solve, install

    • “@react-native-community/masked-view”
    • “react-native-safe-area-context”
    • 0
  2. Starting the Metro Bundler directly from the project directory works for me. Can someone let me know if it works for them too?

    # 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

    • 0
  3. 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

    • 0
Leave an answer

Leave an answer

Browse

close