[Android] animationOut for animate hiding the Modal didn't work on RN 0.61.5

[Android] react-native-modal props animationOut didn’t work…

I want to asking my problem about the animationOut on my modal. When I want to hide / close the modal, its working. But the animationOut props not working. I dont know it is bug or my code was wrong…

I’m using: “react-native”: “0.61.5” and “react-native-modal”: “^11.5.6”

And this is my code:

import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import Modal from 'react-native-modal';
import {colors} from '../../../../../../utils';

const ModalChooseProduct = props => {
  return (
    <Modal
      animationIn="slideInUp"
      animationOut="slideOutLeft"
      animationInTiming={1000}
      animationOutTiming={1000}
      onSwipeComplete={props.onSwipeComplete}
      swipeDirection="down"
      isVisible={props.isVisible}
      onBackdropPress={props.onBackdropPress}
      hideModalContentWhileAnimating={true}
      backdropTransitionInTiming={0}
      backdropTransitionOutTiming={0}
      style={{margin: 0, height: 100, justifyContent: 'flex-end'}}>
      <View
        style={{
          height: '70%',
          backgroundColor: colors.modal.outline,
          borderRadius: 10,
        }}>
        <View style={{height: 30}} />
        <View
          style={{
            borderTopStartRadius: 10,
            borderTopEndRadius: 10,
            backgroundColor: 'white',
            height: '100%',
            padding: 20,
          }}>
          <Text
            style={{
              color: colors.text.default,
              fontWeight: 'bold',
              fontSize: 15,
            }}>
            Please Choose your product:
          </Text>
          <TouchableOpacity
            style={{width: '50%', height: '10%', backgroundColor: 'green'}}
            onPress={props.closeModal}>
            <Text>Close modal</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
};

export default ModalChooseProduct;

Then I export them and importing to my Main file.js,

const [isModalVisible, setIsModalVisible] = useState(false);
  const ToggleModal = () => {
    setIsModalVisible(!isModalVisible);
  };
  const ModalProduct = () => {
    return (
      <ModalChooseProduct
        isVisible={isModalVisible}
        onBackdropPress={ToggleModal}
        closeModal={ToggleModal}
        onSwipeComplete={ToggleModal}
      />
    );
  };

  return (
    <View style={styles.container}>
      <AddVoucherHeader
        title="Create Voucher"
        onPress={() => props.navigation.goBack()}
      />
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <View style={{height: 13.3}} />
        <Text
          style={{paddingLeft: 10, fontSize: 16, color: colors.text.default}}>
          Choose Product
        </Text>
        <ModalProduct />
        <TouchableOpacity
          onPress={ToggleModal}
          style={{
            justifyContent: 'center',
            alignSelf: 'center',
            width: '90%',
            height: '10%',
            backgroundColor: '#78be63',
            borderRadius: 10,
          }}>
          <View
           {...}

But if i try using “react-native”: “0.62.2”, its work properly, both of animationIn and animationOut.

What should I do ? I hope you can help me and solving my problem without updating my RN to 0.62.2…

[akmallmr]

I solved my problem… You can’t put the Modal container into the function… you CAN’T do this:

const ModalProduct = () => {
    return (
      <ModalChooseProduct
        isVisible={isModalVisible}
        onBackdropPress={ToggleModal}
        closeModal={ToggleModal}
        onSwipeComplete={ToggleModal}
      />
    );
  };

return (
<View>
.
.
.
<ModalProduct />
</View>
)

Because it will re-render your Modal Component. So the animationOut didn’t work… So, the solution is you should put <ModalChooseProduct /> outside the function, and put it directly to the main jsx… And theres no need create const ModulProduct = () => {} again 😄

return (
<View>
.
.
.
 <ModalChooseProduct
        isVisible={isModalVisible}
        onBackdropPress={ToggleModal}
        closeModal={ToggleModal}
        onSwipeComplete={ToggleModal}
      />
.
.
.
</View>
)

[akmallmr]

Thanks @akmallmr, it worked. Although I was developing in iOS but I suppose it will happen in both Android and iOS.

I kept the Modal in the main JSX and the content part of modal in another function. This way my code became much cleaner and readable.

P.S: It happened on react-native: 0.62.2.

Your welcome, glad to hear that @chaiiplss