The development server returned response error code: 500 react-native

Question

Error 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.

I think the error is related to libraries of the npm or the yarn.

App.js code:

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

You need to install the below packages along with raeact navigation for it to work ,

you can add by

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

or

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

Hope it helps. feel free for doubts

Answer 2

You just need to install react-native-gesture-handler because react-navaigation used it. So for more explanation you can go trough the documentation https://reactnavigation.org/