Having trouble resolving "react-native-screens" from "node_modules\react-navigation-stack\lib\module\views\StackView\StackViewCard.js"? Here's how to fix it

Here is the command I used for setting up react app routes:

npm i react-native-router-flux --save

After restarting npm with "npm start," I encountered this error message:

Unable to resolve "react-native-screens" from "node_modules\react-navigation-stack\lib\module\views\StackView\StackViewCard.js" Failed building JavaScript bundle.

How can I resolve this issue? I have already updated npm.

Below is the content of my package.json file:


{
    "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": "~36.0.0",
        "react": "~16.9.0",
        "react-dom": "~16.9.0",
        "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
        "react-native-router-flux": "^4.2.0",
        "react-native-web": "~0.11.7"
    },
    "devDependencies": {
        "babel-preset-expo": "~8.0.0",
        "@babel/core": "^7.0.0"
    },
    "private": true
}

Answer №2

Encountered a similar problem where the package.json file in the repository was lacking the react-native-screens dependency.

To resolve this, I ran the command: npm i react-native-screens

Answer №3

The reason for this issue is attributed to recent modifications made in the react-navigation. When performing a npm install at present, it fetches and installs the most up-to-date versions instead of reverting back to the previous ones.

To resolve this, it is recommended to clear the cache by deleting the directories such as node_module, expo, and package-lock.json, followed by reinstalling all the packages. After that, initiate the project by executing the command: expo r -c. This will effectively reset the cache and restore the functionality of the project as desired.

For further information, please refer to More Info

Answer №4

To successfully set up your project, you need to download and install the following packages:

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

This method has been proven effective for me in the past.

Alternatively, you can also try:

npm install @react-navigation/native

This will help you with installing 'react-navigation' on your project.

Answer №5

After transitioning from React Navigation V3 to V4, I encountered a comparable error.

All it took was

npm install react-native-screens

to resolve the issue effectively.

Answer №6

To begin, ensure you have the necessary dependencies set up.

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

Answer №7

Try using expo install to add the following packages: react-native-reanimated, react-native-gesture-handler, react-native-screens, react-native-safe-area-context, and @react-native-community/masked-view

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I obtain an array using onClick action?

Can anyone help me figure out why my array onClick results are always undefined? Please let me know if the explanation is unclear and I will make necessary adjustments. Thank you! Here is the code snippet: const chartType = ["Line", "Bar", "Pie", " ...

The response from the ajax call is still pending

I am currently working on integrating MySQL data (select query) using Spring and MyBatis. I have a controller function that is called via ajax in JavaScript to retrieve the database data. For example: ajax url: /testmysql controller requestmapp ...

Preventing autocomplete from filling in empty password fields (React.js)

Once the browser autocompletes my login form, I notice that the password input's value is initially empty. However, when I click on the password field, suddenly the value appears. Additionally, there are several inexplicable events being triggered by ...

Is Jade monitoring *.jade files?

Though I am not sure of the internal workings of Jade, my best guess is that it compiles each template file once and then employs a compiled and cached version for subsequent HTTP requests. One intriguing observation I have made while running my Express a ...

Amplify encounters the "Failed to load resource: the server responded with a status of 400" issue

I encountered an error while using Amplify, although the build was completed successfully. Failed to load resource: the server responded with a status of 400 manifest.json:1 The system is functional in the local environment. Below is the Package.json scri ...

Share the hyperlink to a webpage with someone else

In my SQL command, I have a unique feature that retrieves the complete URL value of the current page: [##cms.request.rawurl##]. This code returns the entire URL. I need to send this address to another page and load it into a special div called "load-fac". ...

Determine if an object has been submitted in a MEAN / AngularJS application

I am working with an AngularJS frontend and using Express, Node, and MongoDB on the backend. My current setup is as follows: // my data to push to the server $scope.things = [{title:"title", other properties}, {title:"title", other properties}, {titl ...

Is there a way to dynamically update the text of $ionicPopup's subTitle in Ionic?

I am currently attempting to modify both the value and style of the subText attribute linked to an $ionicPopup within my app. Despite searching extensively, I have been unable to uncover a viable method for accomplishing this task. Is there a way to achi ...

Check the connectivity of Angular 2 application

I currently have an Angular 2 application running on one server, and a Java application on another server. My goal is to be able to ping the Angular application from the Java application in order to check its status (whether it is up or down). Would it b ...

Discovered a total of 11 minor vulnerabilities within a React Native Project

Every time I start a new React Native project using react-native init <projname>, and then attempt to install any necessary NPM Package, I always encounter this issue - identified 11 low severity vulnerabilities How can I resolve this problem? ...

Include CakePHP named parameters in the URL when selecting from a list

If I have a selection list like the one below: <select name='languages'> <option value='german'>German</option> <option value='english'>English</option> </select> How can I use Jav ...

Mastering the acceptance of license agreements on Android using React Native

While trying to execute react-native run-android, I encountered an error message stating: Error Details: An issue occurred while configuring project ':RNSwipeView'. The license agreements for the following SDK components have not been accept ...

Exploring the concept of embedding documents in Mongoose through modeling

I have structured two different kinds of events (events and subevents) in a MongoDB database as shown below: var EventSchema = mongoose.Schema({ 'name' : String, 'subEvent' : [ SubeventSchema ] }); var SubeventSchema = mongoos ...

Utilizing the jQuery slideToggle method on the specified target element

I'm encountering an issue with jQuery slideToggle, and here's the code I have: $(".dropdownmainmenu").click(function(){ $(this).children(".showmenu").slideToggle(); $(this).toggleClass("activemainmenu"); $(this).find(".showarrowmainmen ...

What is the best way to eliminate or substitute Unicode Characters in Node.js 16?

Currently, I have a file that is being read into a JSON Object. { "city": "Delicias", "address": "FRANCISCO DOMÍN\u0002GUEZ 9" } We are using this address to send it to the Google Maps API in order to ...

The technique for handling intricate calls in node.js

My goal is to create a social community where users are rewarded for receiving upvotes or shares on their answers. Additionally, I want to send notifications to users whenever their answers receive some interaction. The process flow is detailed in the com ...

Can you explain the concepts of 'theme' and 'classes'?

Currently, I am working on a web application using React. I have chosen to incorporate the latest version of Material-UI for designing the user interface. During this process, I came across the demo examples provided by Material-UI (like ) In each demo ...

How can multiple buttons be added to each row in Jquery datatables and how can events be applied to them?

I currently have one button, but I am in need of two buttons. These buttons will trigger MySql commands when clicked to retrieve data from the database. How can I set up an event handler for these buttons? $(document).ready(function () { var table= ...

What is the easiest way to clear browser cache automatically?

Hello, I have implemented an ajax auto complete function in one of my forms. However, I am facing an issue where over time, the suggestions get stored and the browser's suggestion list appears instead of the ajax auto complete list, making it difficul ...

Having trouble with the Vuejs validation code not functioning correctly?

I need help with a JavaScript function that posts objects to the backend only if all items are numbers. Here is the code snippet I'm working with: var MyApp = new Vue({ el: '#my_element', data: { errors: [], ...