React native – React Navigation Crash with react-native-reanimated

I am facing a problem with my navigation setup after integrating the react-native-reanimated library into my React Native project. Prior to integrating react-native-reanimated, my navigation system was working fine, and I was able to navigate using the defined types without any issues. However, after adding react-native-reanimated to my project, I encountered a serious problem.

The issue occurs when interacting with the navigation stack headers’ back button or when switching tabs in the bottom tab navigator. Instead of providing any error feedback, the app crashes abruptly.

I have used Flipper for debugging, and it pointed me to an error labeled "EXC_BAD_ACCESS." This error seems to be related to memory access problems. Interestingly, I only experience this issue after adding the react-native-reanimated package. When I remove this package, the problem disappears.

{
  "name": "DocvivoMobil",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/checkbox": "^0.5.16",
    "@react-native-community/datetimepicker": "^7.4.2",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "babel-plugin-module-resolver": "^5.0.0",
    "formik": "^2.4.3",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-dropdown-select-list": "^2.0.5",
    "react-native-gesture-handler": "^2.12.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-linear-gradient": "^2.8.2",
    "react-native-phone-number-input": "^2.1.0",
    "react-native-safe-area-context": "^4.7.1",
    "react-native-screens": "^3.24.0",
    "react-native-svg": "^13.13.0",
    "react-native-vector-icons": "^10.0.0",
    "styled-components": "^6.0.7",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.4",
    "@types/react": "^18.2.21",
    "@types/react-native": "^0.72.2",
    "@types/react-native-vector-icons": "^6.4.14",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.2.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

I have tried the following steps to resolve the issue, but none of them have worked:

1. Updated all packages to their latest versions.

2. Ensured proper linking of the react-native-reanimated library.

3. Verified that the other modules I’m using are compatible and not causing conflicts.

4. Checked the compatibility of react-native-reanimated with my React Native version.

5. Adjusted the order of packages in my package.json.

Has anyone else encountered a similar problem when integrating react-native-reanimated into their navigation setup? Any help or suggestions would be greatly appreciated. Thank you!