Modal does not do closing animation when "isVisible" is set to false; instead just disappears right away

Environment

info Fetching system and libraries information...
(node:21104) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 9 4900HS with Radeon Graphics
    Memory: 5.07 GB / 15.42 GB
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.3.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      Versions: 10.0.19041.0, 10.0.20348.0
  IDEs:
    Android Studio: Version     2020.3.0.0 AI-203.7717.56.2031.7935034
    Visual Studio: 17.0.32014.148 (Visual Studio Community 2022)
  Languages:
    Java: 17.0.2
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^17.0.2 => 17.0.2
    react-native: ^0.67.1 => 0.67.1
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Platforms

Android

Versions

• Android: 11.0 (Pixel 5 API 30 Emulator)
• react-native-modal: 13.0.0
• react-native: 0.67.1
• react: 17.0.2

Description

The modal in my program does not do a closing animation when I press the button that sets the isVisible component to false; instead, it just disappears. This is in contrast to the animation in, which seems to be working fine.

Reproducible Demo

Set up a toggleable Modal using react-native-modal in your program using the following code:

 const [dAC, setDAC] = useState(false)
const onSetDAC = () => setDAC(!dAC)

const someView = () => {
return(
      <View style={styles.testRow}>
      <FormButton buttonTitle="Delete Account" customBGColor={true} color='#DA302C' onPress={onSetDAC}/>
      <Modal avoidKeyboard={true} isVisible={dAC} animationInTiming={400} animationOutTiming={400}  animationIn={'slideInUp'} animationOut={'slideInDown'}>
        <View style={{justifyContent: 'center', alignSelf: 'center', width: '80%', paddingHorizontal: 10, paddingVertical:20, borderRadius: 10, backgroundColor: 'white'}}>
        <Text style={styles.label}>Are you sure you want to delete your account?</Text>
        <View style={{justifyContent:'center',flexDirection: "row"}}>
          <PopUpButton buttonTitle="Cancel" customBGColor={true} color='rgba(0,0,0,0.4)' onPress={onSetDAC} />
          <PopUpButton buttonTitle="Confirm" customBGColor={true} color='#DA302C' onPress={() => deleteAccount()} />
        </View>
        </View>
      </Modal>
)
}

The modal will animate in perfectly fine (when isVisible is set to true), but when isVisible is set to false, there will be no animation out and the modal will just disappear.

[Alex1899]

Having the same issue

[mmckinley8]

If you are showing the modal from a parent like this: {showModal && <Modal /> }

it will always disappear right away. You need to use the isVisible prop to fix

<Modal isVisible={isVisible} />