Detect click outside of component to trigger animation

Question

I'm having Animated View that once clicked performs some kind of animation.

I have trouble canceling the animation once user clicks outside of this View. I'm trying to figure out a way to deal with this. Extra difficulty is because its just a small View that's nested inside two parent views.

If that helps anything im basically trying to replicate Iphone's add contact:

In other words - clicking on circle red button triggers the slide animation (i got this covered) but clicking anywhere outside the Delete Button triggers the reverse animation.

Would be grateful for any tips.

Code ive got right now with relevant partd:

    <Animated.View
  style={[containerAnimatedStyle]}
>
  <Pressable onPress={displayDeleteButton} hitSlop={12}>
    <MinusCircleFillSVG width={24} height={24} />
  </Pressable>
  <Pressable>
    <Text>Label</Text>
  </Pressable>

  {renderInputField()}
  <AnimatedTouchable
    style={[deleteButtonAnimatedStyle]}
    onPress={() => handleDeleteField(index)}
  >
    <Text style={[styles.deleteText, { color: colors.white }]}>Delete</Text>
  </AnimatedTouchable>
</Animated.View>

Answer 1

This isnt ideal solution because of the scroll view, but maybe someone will find this useful:

You add pressable component with this styling and the same level as the button that dismisses the animation:

  overlay: {
position: "absolute",
height: layout.window.height,
width: layout.window.width,
},

and on press you dismiss the animation