React Native Animated.sequence not running when JS thread is blocked

I'm trying to create a custom animation loop using a combination of react-native Animated.parallel and Animated.sequence.

looping animation around a box

The problem is when I introduce a long running operation that blocks the JS thread, the animation stops working.

I'm using useNativeDriver: true for all the animation component. I suspect this has to do with the timing of when Animated.sequence sends the next set of animations to native before starting the animation.

looping animation blocked

Anyone have a workaround to do this issue? Here's a snippet of the animation code:

function animateTranslate(anim: Animated.Value, toValue: number) {  return Animated.timing(anim, {    toValue: toValue,    duration: translateDuration,    useNativeDriver: true,  });}function animateExpand(anim: Animated.Value) {  return Animated.timing(anim, {    toValue: lineScaleMultiplier,    duration: lineScaleExpandDuration,    useNativeDriver: true,  });}function animateShrink(anim: Animated.Value) {  return Animated.timing(anim, {    toValue: 1,    duration: lineScaleShrinkDuration,    useNativeDriver: true,  });}function animateTopLeftToTopRight() {  return Animated.parallel([    animateTranslate(translateX, distance),    Animated.sequence([animateExpand(scaleX), animateShrink(scaleX)]),  ]);}function animateTopRightToBottomRight() {  return Animated.parallel([    animateTranslate(translateY, distance),    Animated.sequence([animateExpand(scaleY), animateShrink(scaleY)]),  ]);}function aniamteBottomRightToBottomLeft() {  return Animated.parallel([    animateTranslate(translateX, 0),    Animated.sequence([animateExpand(scaleX), animateShrink(scaleX)]),  ]);}function aniamteBottomLeftToTopLeft() {  return Animated.parallel([    animateTranslate(translateY, 0),    Animated.sequence([animateExpand(scaleY), animateShrink(scaleY)]),  ]);}function animateLine() {  return Animated.sequence([    animateTopLeftToTopRight(),    aniamteTopRightToBottomRight(),    animateBottomRightToBottomLeft(),    animateBottomLeftToTopLeft(),  ]);}useEffect(() => {  Animated.loop(animateLine()).start();},[]);return <Animated.View style={{ transform code here }}/>