react-native-reanimated
react-native-reanimated copied to clipboard
Fix layout animations crash when hiding RN modal
Description
Fixes a crash occurring when using layout animations and hiding RN modal.
Fixes #3286
Changes
Firstly make a copy of _toBeRemovedRegister
dictionary, mutate it while iterating through original and then assign a copy to the original.
Test code and steps to reproduce
Open and close a modal a few times. Doesn't reproduce on expo snack 🤔
import * as React from 'react';
import { View, StyleSheet, Modal, Button } from 'react-native';
import Constants from 'expo-constants';
import Animated from 'react-native-reanimated';
import {FadeIn} from 'react-native-reanimated';
export default function App() {
const [modalVisible, setModalVisible] = React.useState(false)
const [viewVisible, setViewVisible] = React.useState(false)
const onCloseClick = () => {
setModalVisible(!modalVisible)
setViewVisible(!viewVisible)
}
return (
<View style={styles.container}>
{
!!viewVisible && (
<Animated.View
entering={FadeIn.duration(300)}
exiting={FadeIn.duration(300)}
style={{ width: 100, height: 100, backgroundColor: 'blue' }
}/>
)
}
<Modal animationType="slide" transparent visible={modalVisible} onRequestClose={onCloseClick}>
<View style={{width: 100, height: 100, backgroundColor: 'red'}} />
<Button onPress={onCloseClick} title="CLOSE" />
</Modal>
<Button onPress={onCloseClick} title="OPEN" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
Checklist
- [ ] Included code example that can be used to test this change
- [ ] Updated TS types
- [ ] Added TS types tests
- [ ] Added unit / integration tests
- [ ] Updated documentation
- [ ] Ensured that CI passes
After patch this PR to react native reanimated, https://github.com/software-mansion/react-native-reanimated/issues/3286 still can be reproduced.
This issue is always present in version => 2.17.0