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>