RNGestureHandlerModule could not be found

Question

I am creating a basic React-Native Expo App, and I have been consistently running into one problem. I have seen other Stack Overflow questions on the same topic, linked below. I have tried the solutions (if there are any solutions), but none of them worked.

Invariant Violation:TurboModuleRegistry.getEnforcing(...):'RNGestureHandlerModule' could not be found

When I make a development build for my app, and run the development build, I get the two error below:

Error 1:

Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGestureHandlerModule' could not be found. Verify that a module by this name is registered in the native binary.Bridgeless mode: false. TurboModule interop: false. Modules loaded: {"NativeModules":["PlatformConstants","LogBox","SourceCode","Timing","AppState","BlobModule","WebSocketModule","DevSettings","DevToolsSettingsManager","Networking","Appearance","DevLoadingView","HeadlessJsTaskSupport","DeviceInfo","UIManager","ImageLoader","SoundManager","IntentAndroid","DeviceEventManager","NativeAnimatedModule","I18nManager"],"TurboModules":[],"NotFound":["NativePerformanceCxx","NativePerformanceObserverCxx","RedBox","BugReporting","LinkingManager","NativeReactNativeFeatureFlagsCxx","RNCSafeAreaContext","RNGestureHandlerModule"]}, js engine: hermes

Error 2:

ERROR Invariant Violation: "main" has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

I must specify that this project does work locally. It only fails when I run it as a development build.

As for my code, I have a simple navigation setup, with an App.js file, HomeScreen.js, and ContactScreen.js. The app is brand new, and simply for testing.

App.js:

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import ContactScreen from './screens/ContactScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Contact" component={ContactScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js:

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Home Page</Text>
      <Button
        title="Go to Contact Page"
        onPress={() => navigation.navigate('Contact')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
});

export default HomeScreen;

ContactScreen.js:

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const ContactScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Contact Page</Text>
      <Button
        title="Go to Home Page"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
});

export default ContactScreen;

And here's my Package.json file:

{
  "name": "yoyo",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/stack": "^6.4.1",
    "expo": "^51.0.22",
    "expo-dev-client": "~4.0.20",
    "expo-status-bar": "~1.12.1",
    "react": "18.2.0",
    "react-native": "0.74.3",
    "react-native-document-picker": "^9.3.0",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-navigation": "^5.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

Steps to reproduce:

npx create-expo-app yoyo --template blank
cd yoyo
yarn add expo
npx expo install expo-dev-client
npm install -g eas-cli
eas login
npx eas build:configure
npx eas build --profile development --platform android

Answer 1

I had the same exact problem you're describing and after a lot of trials i found out that installing these packages in your project solves the issue

"react-native-gesture-handler": "~2.16.1",
"react-native-safe-area-context": "4.10.5",
"react-native-reanimated": "~3.10.1",
"react-native-screens": "3.31.1"

make sure it exists on you package.json and rebuild the project again to see results