Strange error appearing in React Native: Collection NSSetM was mutated while being enumerated

Question

I started getting strange error in React Native, usually in Modals. Sometimes it works, sometimes it can throw an error: Collections <_NSSetM was mutated while being enumerated.

I am using expo 44.0.0.

Here is my package.json file:

{
  "scripts": {
    "dev": "expo start",
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "eas-build-post-install": "jetify"
  },
  "dependencies": {
    "@expo-google-fonts/fira-sans": "^0.1.0",
    "@expo/metro-config": "^0.1.72",
    "@neverdull-agency/expo-unlimited-secure-store": "^1.0.10",
    "@ptomasroos/react-native-multi-slider": "https://github.com/ptomasroos/react-native-multi-slider",
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/datetimepicker": "4.0.0",
    "@react-native-community/hooks": "^2.6.0",
    "@react-native-community/netinfo": "6.0.0",
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-native-picker/picker": "2.2.1",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "@reduxjs/toolkit": "^1.7.1",
    "@sentry/react-native": "^3.2.13",
    "axios": "^0.24.0",
    "buffer": "^6.0.3",
    "date-fns": "^2.28.0",
    "dayjs": "^1.10.6",
    "expo": "~44.0.0",
    "expo-analytics-segment": "~11.1.0",
    "expo-application": "~4.0.1",
    "expo-asset": "~8.4.6",
    "expo-av": "~10.2.0",
    "expo-barcode-scanner": "~11.2.0",
    "expo-blur": "~11.0.0",
    "expo-camera": "~12.1.2",
    "expo-clipboard": "~2.1.0",
    "expo-constants": "~13.0.1",
    "expo-crypto": "~10.1.0",
    "expo-dev-client": "~0.8.4",
    "expo-device": "~4.1.0",
    "expo-document-picker": "~10.1.3",
    "expo-face-detector": "~11.1.3",
    "expo-file-system": "~13.1.4",
    "expo-gl": "~11.1.1",
    "expo-haptics": "~11.1.0",
    "expo-image-picker": "~12.0.1",
    "expo-linear-gradient": "~11.0.3",
    "expo-linking": "~3.0.0",
    "expo-local-authentication": "~12.1.0",
    "expo-media-library": "~14.0.0",
    "expo-modules-core": "~0.6.4",
    "expo-notifications": "~0.14.0",
    "expo-secure-store": "~11.1.0",
    "expo-sharing": "~10.1.0",
    "expo-splash-screen": "~0.14.1",
    "expo-status-bar": "~1.2.0",
    "expo-system-ui": "~1.1.0",
    "expo-updates": "~0.11.6",
    "expo-web-browser": "~10.1.0",
    "just-clone": "^3.2.1",
    "lottie-ios": "3.2.3",
    "lottie-react-native": "5.0.1",
    "query-string": "^7.0.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-hook-form": "7.11.1",
    "react-native": "0.64.3",
    "react-native-collapsible": "^1.6.0",
    "react-native-confirmation-code-field": "^7.3.0",
    "react-native-dropdown-picker": "^5.2.3",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-get-random-values": "~1.7.2",
    "react-native-htmlview": "^0.16.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-qrcode-svg": "^6.1.1",
    "react-native-reanimated": "~2.3.1",
    "react-native-reanimated-carousel": "^2.2.3",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-snap-carousel": "3.7.2",
    "react-native-svg": "12.1.1",
    "react-native-twilio-video-webrtc": "^2.1.0",
    "react-native-webview": "^11.15.0",
    "react-redux": "^7.2.6",
    "redux-persist": "^6.0.0",
    "rn-pdf-reader-js": "^4.1.1",
    "rodnecislo": "^1.6.0",
    "sentry-expo": "^4.0.0",
    "styled-components": "^5.3.3",
    "styled-system": "^5.1.5",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.5",
    "@types/node": "^15.12.1",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "@types/react-native-htmlview": "^0.12.3",
    "@types/react-native-snap-carousel": "^3.8.3",
    "@types/react-redux": "^7.1.18",
    "@types/styled-components-react-native": "^5.1.2",
    "@types/styled-system": "^5.1.11",
    "@types/uuid": "^8.3.1",
    "@welldone-software/why-did-you-render": "^6.2.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "jetifier": "^2.0.0",
    "prettier": "^2.3.2",
    "typescript": "~4.3.5"
  },
  "private": true,
  "name": "orbi",
  "version": "1.0.0"
}

Does anyone faced this issue before? Would really appreciate for any suggestions.

[Error hapenning on iOS while clicking on button in Modal][1]

Answer 1

Issue was fixed by downgrading package react-native-reanimated to the previous version and avoiding entering and exiting animations.

Answer 2

In my case it was happening very inconsistently once every 4-5 attempts, right when the modal is supposed to close itself after logout (clearing all the caches, state data, navigation etc.), so I tried this dirty hack and it seems like it works:

import { runOnUI } from 'react-native-reanimated';

setTimeout(() => {
  runOnUI(closeModal)();
}, 100);

Answer 3

Upgrading react-native-reanimated to version ^3.0.0 also solves the issue. Upgrading from version 2.x.x is easy since it has no breaking changes except dropping maintaining syntax for v1.x.x.

So yarn install react-native-reanimated@^3.0.0

And maybe also yarn add subscriptions-transport-ws@^0.11.0