React Native Reanimated 3 - How to prevent View exiting animation on parent unmount

Question

I am using a <View/> for a card component that has some info text and I am trying to use reanimated to make two blurbs of info text fade in and out between each other. This works fine and the text fades in and out perfectly, however when this card component needs to unmount to show a separate component, the entire card component waits for the exiting animation on the child text before disappearing. Is there a way that I can prevent this exiting animation from occurring when the parent component unmounts or programmatically? Here's how the code is setup.

   const [showSection1, setShowSection1] = useState(false)

   return (
    <>
      { showSection1 &&
        <cardWithText/>
        :
        <someOtherComponent/>
      }
      <Button onPress={() => setShowSection1(false)} />
    </>
   )
}

const cardWithText = () => {
   const [shownText, setShownText] = useState('text1') // the text to be shown in the card
   const currentTimeout = useRef(0)
   
   // when the component mounts being the timeout loop to toggle the shown text between the 'text1' and 'text2'
   useEffect(() => {
      if(!currentTimeout.current){
         toggleText();
      }   
   },[])

   const toggleText = () => {
      setShownText(prev => prev == "text1" ? "text2" : "text1")
      currentTimeout.current = setTimeout(() => toggleShownText(), 2500)
   }

   return (
      <View>
         <Animated.Text entering={FadeIn.duration(600).delay(1500)} exiting={FadeOut.duration(600).delay(1200)} key={"card-info-" + infoText}>
            {infoText}
         </Animated.Text>
      </View>
   )
}

So here when the button is pressed to show section 2 and unmount the card, the entire card component View waits for the text components exiting animation before unmounting. I tried a few work arounds such as passing the value that triggers the parent unmount down to the child card to prevent the exiting animation if said condition were true, but this did not work. I also am unable to find any reanimated documentation for such a scenario.

I also found a similar thread on GitHub here https://github.com/software-mansion/react-native-reanimated/discussions/2513 but could not find any work arounds for the exiting animation as there were for entering animations.

Answer 1

I have come up with a decent work around. Also note that a maintainer is also currently working on a feature that will allow exiting/entering animations to be bypassed as per his update.

Anyways the exiting animation can be hidden by setting the parent view to display: 'none'. In doing this the child's exiting animation will not be shown and it will immediately disappear.