React-native EXPO - APK EAS build app crashes on startup (probably) because of react-navigation

Question

Right now I'm trying to export my app with eas as an apk, but it doesnt work.

When I bundle with expo everything works fine but when I build, the app crashes on startup.
I've been removing and debugging most of my code, and the build only crashes when I'm using react-navigation. I've looked online and I have all the necessary dependecies for it, I dont see what I'm doing wrong.
Expo doctor shows no issues, files are in the right location (also I'd see that in expoGo if it where the case) and the app builds with all green flags.

Also tried debugging with logcat and got this error (see below). It seems like it's an issue related to "react-native-gesture-handler".

Here is my code (dont mind for page1, since when building with just that without react-navigation the app worked just fine):

const themeColor1 = "#7CFC00";
const themeColor3 = "#394230";
const themeColor4 = "#141712";

import React from 'react';
import { View, Text} from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator, DrawerItemList } from '@react-navigation/drawer';

import Page1 from './assets/screens/Page1.js';

const Drawer = createDrawerNavigator();

export default function App() {
    return (
    <NavigationContainer>
      <Drawer.Navigator 
        initialRouteName="Page1"
        drawerContent={(props) => (
          <SafeAreaView style={{ flex: 1 }}>
            <View
              style={{
                height: 180,
                width: '100%',
                justifyContent: 'center',
                borderBottomColor: themeColor1,
                inactiveTintColor: themeColor1,
                borderBottomWidth: 0.5,
                marginLeft: 0,
                alignItems: 'center',
                textAlign: 'center',
              }}>
              <Text
                style={{
                  fontSize: 30,
                  marginVertical: 6,
                  justifyContent: 'space-evenly',
                  color: themeColor1,
                  textAlign: 'center', 
                }}>
                App that crashes
                on startup 
              </Text>
            </View>
            <DrawerItemList {...props} />
          </SafeAreaView>
        )}

        screenOptions={{
          drawerStyle: {
            backgroundColor: themeColor4,
            width: 250,
          },
          headerStyle: {
            backgroundColor: themeColor4,
          },
          
          headerTintColor: themeColor1,

          headerTitleStyle: {
          },

          drawerLabelStyle: {
            color: '#111',
          },

          headerTitle :{
            color: '#111',
          },
          drawerActiveBackgroundColor: themeColor3,         
        }}>
        <Drawer.Screen
          name="Page1"
          options={{
            title: 'Page1',
            drawerLabel: () => (<Text>Page1</Text>),
            drawerIcon: () => (<MaterialCommunityIcons name="file-document-edit" size={30} color={themeColor1}/>),
          }}
          component={Page1}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

app.json:

{
  "expo": {
    "name": "App",
    "slug": "App",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.nicola.app"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "04e732f6-d275-463b-b775-45ca301b9be1"
      }
    },
    "runtimeVersion": {
      "policy": "appVersion"
    },
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "usesCleartextTraffic": true
          }
        }
      ]
    ]
  }
}

and eas.json:

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "preview4": {
      "distribution": "internal"
    },
    "production": {}
  }
}

//logcat log:
 
AndroidRuntime: com.facebook.react.common.JavascriptException: 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":["HeadlessJsTaskSupport","PlatformConstants","SourceCode","DeviceInfo","UIManager","DeviceEventManager","RNCSafeAreaContext","NativeAnimatedModule","SoundManager","I18nManager","Timing","ReanimatedModule","ImageLoader"],"TurboModules":[],"NotFound":["NativePerformanceCxx","NativePerformanceObserverCxx","RedBox","BugReporting","NativeReactNativeFeatureFlagsCxx","FrameRateLogger","KeyboardObserver","RNGestureHandlerModule"]}

Do you have any suggestions? I'm running out of ideas to be honest.
Thanks

Tried removing all the code sequentially until I've arrived to the point where the app only crashes when using navigation.

Answer 1

After a bit of debugging and suggestions from others, I got to isolate the problem to adding

import "react-native-gesture-handler";

to my main app.js

When developing in expo this wasn't an issue, but as I've now found out it's necessary in the built project.