Exception thrown while executing UI block: *** Collection <__NSSetM: 0x600000ff5820> was mutated while being enumerated.

[yonitou]

Description

Hey

I'm experiencing the weirdest error ever => I'm using Modal component from "react-native" and my app didn't have any issues. I started to use Layout transitions exiting and entering yesterday. Since then, everytime I'm dismissing a modal, I'm having this error and I can't find out what it is :

It's driving me crazy and I can't have any more debugs logs to help me out. I really hope you can find a solution because my app is in production and I'm completely stuck

And last but not least => It's happening randomly 🗡️, sometimes the modal will dismiss properly like 25 times in a row and at some point => error

Expected behavior

Nothing should happen

Actual behavior & steps to reproduce

An error is thrown.

Snack or minimal code example

Init a project with expo SDK 45 Install react native reanimated 2.8.0 Implement a simple Modal :

<View style={{flex: 1}} style={[styles.backdrop, modalVisible ? StyleSheet.absoluteFill : null]}>
<Modal animationType="slide" transparent visible={modalVisible} onRequestClose={onCloseClick} >
<Button onPress={onCloseClick} />
</View>

-->

Package versions

| name | version | | react-native-reanimated | 2.8.0 | | expo | 45 |

Affected platforms

• [ ] Android
• [ X] iOS
• [ ] Web

[yonitou]

Sorry, I tried for one hour to reproduce it in a Snack but it doesn't happen .. The only thing I have is someone that had the EXACT same problem (triggering randomly and on Modal components) on StackOverflow and resolved it by deleting exiting & entering props => https://stackoverflow.com/questions/71786288/strange-error-appearing-in-react-native-collection-nssetm-was-mutated-while-bei

[yonitou]

Please, I would be so thankful if you could take time to answer. I can't even use one animation anywhere in my repo without having this error ..

[graszka22]

It reproduces easily on iOS, not on snack though. Here is the repro code: https://snack.expo.dev/lPgsCKf7a

[yonitou]

Thanks for considering it :) I felt alone with this issue that didn't allow me to use transition at all in all my projects ..

[jojonarte]

Encountered this while doing a modal animation.

[chunghn]

Hello, I have the same issue when exiting Modal with animation. I am using expo sdk44 with react-native-reanimated (v2.3.1). Please let me know if there is any solution.

[LouisWT]

Same issue with exiting Modal, react-native-reanimated v2.9.1. Need help.

[hkar19]

there is rewriting on the way: #3332

dunno when this will be merged

[PedroBern]

I had the same issue on iOS device, didn't try on android, unfortunately, I don't have time to make a repro right now, but here is a description of my setup, if that's helpful:

• Root View controlling modals, and holding state
• Modal 1 with an animated view with entering/exiting
• Modal 2 is on top of Modal 1 and creates new content that is displayed in Modal 1
• When submitting inside Modal 2, we close everything and go back to the root view
• ☝️ If updating the state before closing the Modals, I was getting this bug, and crashing the app, due to the entering/exiting animations of new content in Modal 1 just before closing everything
• ✅ Closing the modals before updating the content solved the issue

// Modal 2 callback causing the crash
const modal2Callback1 = (value: Value) => {
  setMyNewValue(value) // triggers entering/exiting animation inside Modal 1
  closeModals() // closes Modal 1 and Modal 2
}

// Modal 2 callback working
const modal2Callback2 (value: Value) => {
  closeModals() // closes Modal 1 and Modal 2
  setMyNewValue(value) // don't trigger any animation, because all modals are hidden
}

const modal2CallbackWithAlert () => {
  Alert.alert(
        "message",
        "description",
        [
          { text: 'Cancel', style: 'cancel' },
          {
            text: 'Confirm',
            // onPress: modal2Callback1 // crashes the app because trigger animation inside modal 1 just before hiding it
            onPress: modal2Callback2 // works
          },
        ]
      ) 
}

The weird thing was:

• modal2Callback1 works if not inside the callbackWithAlert 🤷
• modal2Callback2 always work
• modal2CallbackWithAlert works if using modal2Callback2, but always crash if using modal2Callback1

[yonitou]

Hey, I know the layout animations are being rewritten atm. But do you have any approximative ETA to give us ? It's quite huge since I can't use layout animations anywhere in my apps.

[rpathways]

Any update on timeline or fix here? Encountering these issues as well.

[tristanheilman]

I'm also encountering this issue

[jwajgelt]

This issue doesn't seem to occur after the recent Layout Animations rewrite that's merged into the newer Reanimated 3 release candidates. If you can't wait for the release of version 3, you may have some luck patching in the fix in #3298

[wjaykim]

I am not using Layout Animation, but the exception is occurring when Animated component is unmounting. I was able to fix it by applying the fix #3298 . I think the patch must be released to the version 2 as well.

[nodir-js]

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);