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

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

Affected platforms

Android
[ X] iOS
Web

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 9
Comments: 15 (2 by maintainers)

Commits related to this issue

fix(Cross): [IOAPPX-263] IOS crash during root modal hiding (#5600) ## Short description This PR fixes a crash that sometimes happens while hiding the `RootModal` due to a bug in [`react-native-re... — committed to pagopa/io-app by shadowsheep1 3 months ago

Most upvoted comments

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.

yonitou on Sep 15, 2022

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

PedroBern on Aug 5, 2022

there is rewriting on the way: #3332

dunno when this will be merged

hkar19 on Aug 2, 2022

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

jwajgelt on Dec 19, 2022