How to conditionally open/close the modal with/without animation?

[aminsaedi]

Hi.
I'm looking for a way to close the modal immediately and without animation. I can't set animationOutTiming to zero because it some situations i need the animation

I implemented this by setting a state for animationOutTiming and when i want to close it change state to zero and then change isVisible to false, but i guess there is a better way.

[mmazzarolo]

Hi @aminsaedi.
My understanding is that you want to conditionally turning on/off the closing animation based on some specific constraints, right?
In that case, I think your approach of keeping the animationOutTiming value in the state is correct 👍

An alternative approach, instead of adding a separate state entry for animationOutTiming is using an enum/string as the modal state.

Something like:

// Visibility state can be:
// - "visible"
// - "hidden-with-animation"
// - "hidden-without-animation"
const [visibility, setVisibility] = useState("hidden-with-animation");

function showModal () {
  setVisibility("visible");
}

function hideModalWithAnimation () {
  setVisibility("hidden-with-animation");
}

function hideModalWithoutAnimation () {
  setVisibility("hidden-without-animation");
}

return (
  <Modal
    isVisibile={visibility === "visible"}
    animationOut={"hidden-with-animation" ? 300 : 0}
  >
  </Modal>
)

[qilovehua]

Hi @mmazzarolo,

I hope to open modal immediately and without animation, but the follow code doesn't work.
Page show red firstly and then turn to orange.
How to open modal immediately?
Thanks.

<View>
    <View style={{flex: 1, backgroundColor: 'red'}}>
    <Modal
          useNativeDriver={true}
          isVisible={true}
          style={{flex: 1, margin: 0}}
          backdropColor="orange"
          animationIn="none"
          animationInTiming={0}
          backdropTransitionInTiming={0}>
          <Text>.....</Text>
     </Modal>
<View>

[mmazzarolo]

Do you mean you're trying to show the modal automatically on the first render? I don't think it's possible to do so using the native Modal component (without the initial flash I mean)

[qilovehua]

@mmazzarolo Thanks for your quick response.
I do trying to show modal on the first render for Privacy Policy after bootsplash.
I will try to find another way to do it.
Thanks Again.