There was an error with the response code of 500 on the development server for react-native

An issue has been encountered on the node.js window: error: bundling failed: Error: Unable to resolve module react-native-gesture-handler from

node_modules\@react-navigation\native\src\Scrollables.js
: react-native-gesture-handler could not be found within the project.

The error seems to be linked to the npm or yarn libraries.

This is the code in App.js:

import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Button
} from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation';

class FirstPage extends Component{
  render(){
    return(
      <View>
        <Text>This is the first page.</Text>
        <Button onPress={()=>this.props.navigation.navigate('test')} title="Go to the second page"/>
      </View>
    )
  }
}

class SecondPage extends Component{
  render(){
    return(
      <View>
        <Text>This is the second page.</Text>
        <Button onPress={()=>this.props.navigation.navigate('home')} title="Go to the first page"/>
      </View>
    )
  }
}

export default createStackNavigator({
  home:FirstPage,
  test:SecondPage
});

Answer №1

To ensure smooth operation, make sure to install the following packages in addition to react navigation:

You can do so by executing the command:

yarn add react-navigation react-native-gesture-handler react-native-reanimated react-native-screens

Alternatively, you can use:

npm i react-navigation react-native-gesture-handler react-native-reanimated react-native-screens

If you have any questions, don't hesitate to ask. Hope this information is helpful.

Answer №2

To properly utilize react-native-gesture-handler, it must be installed as react-navigation relies on it. For a more detailed explanation, refer to the documentation available at https://reactnavigation.org/

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

Tips for changing the navigation tab post authentication

I am currently learning React Native and working on a project to create a small application. The navigation I have set up displays the login screen to users who are not logged in, and other tabs for those who are logged in. {isLoggedIn == null ? ...

Inheritance best practices for node.js applications

In C#, the concept of inheritance can be easily demonstrated through classes like Animal and Dog. class Animal { string name; public Animal() { } } class Dog : Animal { public Dog() : base() { this.name = "Dog"; } } When working ...

The TypeScript declaration for `gapi.client.storage` is being overlooked

When I call gapi.client.storage.buckets.list(), TypeScript gives me an error saying "Property 'storage' does not exist on type 'typeof client'." This issue is occurring within a Vue.js application where I am utilizing the GAPI library. ...

The origin of the recipient window does not match the target origin provided when using postMessage on localhost

Currently, I am in the process of developing an application that utilizes single sign-on (SSO) for user authentication. Here is a breakdown of the workflow: Begin by launching the application on localhost:3000 (using a React Single Web Application). A po ...

The submit button in Angularjs does not respond to the Enter key press

Click below to submit: <input type="submit" ng-click="Showdata()" class="btn blue pull-right" Text="" /> Email input field: <input type="text" ng-model="texttype" class="form-control" ng-class="eml" placeholder="Enter Email" /> Password ...

Anonymous self-executing functions with parameters from an external scope

Recently, I stumbled upon the code snippet below while following a tutorial. const increment = (function(){ return function incrementbytwo (number){ return number+2; } })(); console.log(increment(1)); The result of the code above is 3. ...

Accessing the parent scope from a directive within a nested ng-repeat in AngularJs

Seeking guidance on accessing the parent scope within a directive nested in an ng-repeat. Here is an example: <div ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="section in sections"> {{section.Name}} <div ng-rep ...

Saving, displaying, and removing a JSON document

As someone new to the world of JavaScript, I am encountering an issue with JavaScript and AJAX. I am aiming to create a function that allows me to add new elements with unique indexes. After saving this information to a JSON file, I want to display it on a ...

The command "react-scripts" couldn't be located in the current environment

Currently enrolled in a Udemy course that involves using create-react-app. However, I encounter an error when attempting to run npm start and/or yarn start. You can find the course here: Complete React Developer in 2020 (w: Redux, Hooks, GraphQL) To init ...

Leveraging weather application programming interfaces

I am trying to set up a basic webpage that can display tide information from wunderground.com. However, for some reason I am not seeing any results on the page. I have included the load function in hopes of at least getting something to appear when the p ...

Using JavaScript and the Firefox browser, learn how to easily highlight an element with Selenium-WebDriver

I am struggling with creating a valid function to highlight specific elements on a webpage. As a beginner in coding, I suspect that the issue may either be related to my environment setup or a lack of knowledge about JavaScript/Selenium features. I am wri ...

Encountering an error while configuring webpack with ReactJS: Unexpected token found while

I'm attempting to update the state of all elements within an array in ReactJS, as illustrated below. As a newbie to this application development, it's challenging for me to identify the mistake in my code. closeState(){ this.state.itemList.f ...

Can Node.js endpoints effectively handle the garbage collection of new class instances?

Just diving into node.js I'm currently dealing with a lengthy and messy function that constructs a CYPHER query for Neo4j. I am considering transforming it into a class, complete with methods, along with a corresponding mocha spec. The expected usag ...

node.js experiencing crashing following loop iteration

I'm currently developing a performance testing tool using node.js to automate the process and store the results in MySQL. This tool is designed to track the load time of specific web pages in a browser, with the measurement displayed in seconds. I am ...

Update the class of the appropriate navigation tab when the corresponding div is scrolled into view

After reading similar questions and doing some research on scrollspy, I don't think it will provide the functionality I need. It seems to only support bootstrap style highlighting. If there is more to it that I'm not aware of, please inform me! ...

Automating a task on Raspberry Pi by setting up a cronjob to run a shell script that invokes an npm command instead of directly calling node

I have been working on creating a shell script that can be executed via a cronjob to trigger an npm nodejs application. Here is the content of my start.sh shell script: #!/bin/bash #!/usr/local/bin/npm cd /home/lharby/sites/mysite npm run start When I na ...

The difference between invoking a method directly and utilizing a function to invoke a method

Imagine we have a method inside a class that looks like this class Blog extends Component { postClicked = (id) => { this.setState({selectedPostId: id}) } render () { const newPosts = this.state.posts.map(el => { return & ...

What is the best way to retrieve a nested item from a JSON array within another array using React Native?

I'm working on fetching a Json array in React Native. Currently, I can retrieve data like "name" and "availability" but I'm facing an issue returning the "url" within the media.data array. { "data": [ { "id": 2, ...

What is the best way to obtain the final visible element using jQuery?

Could you please check out the following link: http://jsfiddle.net/SHfz4/ All of the blue boxes are technically visible, so I can't use the code $('.row .inner .item:visible:last'); as it will always return box 27. Some boxes may not be v ...

I'm experimenting with crafting a new color scheme using MUI, which will dynamically alter the background color of my card based on the API

I am attempting to create a function that will change the colors based on the type of Pokemon. However, I'm not sure how to go about it. Any suggestions or ideas!? Check out where I'm brainstorming this logic [This is where the color palette sh ...