Modal doesn't dismiss on iOS if LayoutAnimation queued beforehand

Description

This appears to have broken during the 0.65.2 -> 0.66.0 release and is still broken in 0.68.1+.

We tend to use modals/overlays to indicate progress (such as deleting rows from tables) after which we want to schedule a layout animation and then close the modal. Below is a minimal program to reproduce and a gif showing the issue (you’ll notice the modal pops back up even though it’s not supposed to be visible and modalVisible is false!).

This behavior can be worked around by waiting for the animation to complete before closing the modal but in our case this is very tricky and couples the components too much together in our case.

https://user-images.githubusercontent.com/396866/165829849-540ce7c9-965e-4bda-81ef-cb4dbf1da7d6.mp4

import React, { useState, useCallback } from "react";
import { Modal, StyleSheet, Text, Pressable, View, LayoutAnimation } from "react-native";

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [count, setCount] = useState(0);
  const dismiss = useCallback(() => {
    LayoutAnimation.easeInEaseOut();
    setCount(c => c + 1);
    setModalVisible(false);
  }, [setCount, setModalVisible]);
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={dismiss}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.textStyle}>Show Modal</Text>
      </Pressable>
      <Text>{`Current count ${count}`}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;

Version

0.68.1

Output of npx react-native info

$ npx react-native info 12:10:34 info Fetching system and libraries information… System: OS: macOS 12.3 CPU: (16) x64 Intel® Core™ i9-9980HK CPU @ 2.40GHz Memory: 65.53 MB / 32.00 GB Shell: 3.4.1 - /usr/local/bin/fish Binaries: Node: 18.0.0 - /usr/local/bin/node Yarn: 1.22.18 - /usr/local/bin/yarn npm: 8.6.0 - /usr/local/bin/npm Watchman: 2022.03.21.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: API Levels: 28, 29, 30, 31 Build Tools: 28.0.3, 29.0.0, 29.0.2, 30.0.2, 31.0.0 System Images: android-29 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7935034 Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild Languages: Java: 17.0.3 - /Users/vincent.pizzo/.jenv/shims/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.68.1 => 0.68.1 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Queue an animation, perform your state change followed by a request to close the modal.

Snack, code example, screenshot, or link to a repository

https://user-images.githubusercontent.com/396866/165829849-540ce7c9-965e-4bda-81ef-cb4dbf1da7d6.mp4

[hetanthakkar1]

@vincentjames501 The issue seems legit, I will work on this issue

[Ymjir]

The problem is with animation, changing animationType=“fade” to animationType=“none” fixed the issue for me.