Clickable outside of the AnimatePresence requires second click

[Bayramito]

I have a simple popup component like below that i am showing by clicking a button outside of the AnimatePresence...

It sets the street.detailCreateMenuVisibility to true and there is a fullscreen TouchableOpacity below, with this one i simulate the backdrop action, when user click outside of the content, it sets the street.detailCreateMenuVisibility back to false again.

Functionally this is working but when i set to false the trigger for re-open not taking action on first hit..but on second click

      <AnimatePresence exitBeforeEnter>
        {street.detailCreateMenuVisibility && (
          <MotiView
            style={styles().newContentContainer}
            from={{
              opacity: 0,
              translateY: -300,
            }}
            transition={{
              type: "timing",
            }}
            animate={{
              opacity: 1,
              translateY: 0,
            }}
            exit={{
              opacity: 0,
              translateY: -300,
            }}
            exitTransition={{type: "spring", delay: 250}}
          >
            <TouchableOpacity
              style={[StyleSheet.absoluteFill, {zIndex: 998}]}
              activeOpacity={0.8}
              onPress={() => (street.detailCreateMenuVisibility = false)}
            />
            <View style={{marginTop: 50, position: "absolute", right: 10, top: 50, zIndex: 999}}>
                  {/* my content */}
          </View>
     </MotiView>
      </AnimatePresence>

Simulator.Screen.Recording.-.iPhone.14.-.2023-07-06.at.11.48.00.mp4

as you can see when i close it i cannot click to plus sign again on first try

[nandorojo]

why not pull the trigger outside of the animate presence component?

[Bayramito]

why not pull the trigger outside of the animate presence component?

It is already outside. This touchable for backdrop press

[nandorojo]

i’m not exactly sure what the issue is, but it sounds like you want to set pointer events to none for the popover when it’s in a closed state. try doing that. it’s not clear to me this is a moti issue.

[Bayramito]

i’m not exactly sure what the issue is, but it sounds like you want to set pointer events to none for the popover when it’s in a closed state. try doing that. it’s not clear to me this is a moti issue.

Imagine you have popup content which has a full screen backdrop component in it...

and you are making visible/invisible with a pressable....

1. I hit + sign to make it visible (the + not in the animatedpresence just absolute positioned regular component)
2. the popup content being visible
3. then there is a TouchableOpacity in this popup with absoluteFill... just behind the actualy content
4. you hit somewhere else in the screen
5. the popup content being invisible
6. next time you want to click + sign, the first click is not being registered... second click works usual

if i remove AnimatedPresence everything works as expected... but exiting animation not working