What versions do I need to make my navigation packages work?

Question

I'm trying to build a react app from the ground up and the biggest headache has been getting my dependencies to be compatible with each other. I've been driving myself crazy googling and using copilot to try to fix this.

The biggest troublemakers have been react-navigation/native, react-navigation/native-stack, and react-navigation/bottom-tabs. It seems like my react-navigation/native and react-navigation/native-stack versions are compatible but once I introduced react-navigation/bottom-tabs that's when my app breaks. Can anyone tell me what versions of these I can use that are compatible with each other, or are there alternative packages I can use? I'll attach my package.json file below and I'm currently using react-native@0.76.5 and react@18.3.1

{
  "name": "app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/datetimepicker": "8.2.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "11.4.1",
    "@react-native-picker/picker": "2.9.0",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/drawer": "6.6.6",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^7.2.0",
    "@react-navigation/stack": "6.3.17",
    "@reduxjs/toolkit": "1.9.2",
    "expo": "^52.0.20",
    "expo-constants": "~17.0.3",
    "expo-image-manipulator": "~13.0.5",
    "expo-image-picker": "~16.0.3",
    "expo-mail-composer": "~14.0.1",
    "expo-media-library": "~17.0.4",
    "expo-notifications": "~0.29.11",
    "expo-secure-store": "~14.0.0",
    "expo-status-bar": "~2.0.0",
    "node": "^18.20.5",
    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-animatable": "^1.3.3",
    "react-native-elements": "^3.4.3",
    "react-native-gesture-handler": "~2.21.0",
    "react-native-get-random-values": "^1.11.0",
    "react-native-polyfill": "^1.2.1",
    "react-native-reanimated": "^3.16.6",
    "react-native-safe-area-context": "^4.12.0",
    "react-native-screens": "^4.4.0",
    "react-native-swipe-list-view": "^3.2.9",
    "react-redux": "8.0.5",
    "redux": "4.2.1",
    "redux-persist": "^6.0.0",
    "undefined": "^0.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@testing-library/jest-native": "^5.4.3",
    "@testing-library/react-native": "^12.8.1",
    "cross-spawn": "^7.0.3",
    "jest": "^29.7.0",
    "jest-fixed-jsdom": "^0.0.9",
    "undici": "^5.8.0",
    "web-streams-polyfill": "^4.0.0"
  },
  "peerDependencies": {
    "react": "18.3.1",
    "react-native": "0.76.5"
  },
  "private": true
}

Current versions of relevant dependency packages:

"@react-navigation/native": "^6.1.18",
"@react-navigation/native-stack": "^7.2.0",
"@react-navigation/stack": "6.3.17",
"@react-navigation/bottom-tabs": "^6.6.1",
"react-native-animatable": "^1.3.3",
"react-native-gesture-handler": "~2.21.0",
"react-native-get-random-values": "^1.11.0",
"react-native-safe-area-context": "^4.12.0"