Completing animation before unmounting (via exiting animation?)

[MarkusWendorf]

Hey there,

I have a linear progress (indeterminate) that moves from -50% width to 100% width on the screen (repeating, 1s each).

When the component unmounts, I would like to wait for the current iteration of the animation to finish.

Could this be done with exiting animations?

Found this in the docs, but I'm not sure whether this is something useful here:

https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/custom-animations/#remarks

Each Reanimated component has a shared value that keeps the current animations assigned to that particular component. If you start a new animation for a specific property without providing an initial value for that property, the initial value will be taken from the last animation assigned to the component.

import { useEffect } from 'react'
import { Dimensions, StyleSheet } from 'react-native'
import Animated, {
  ExitAnimationsValues,
  interpolate,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated'

const { width } = Dimensions.get('window')
const barDivider = 2
const barSize = width / barDivider
const animationDuration = 1500

export function IndeterminateProgressBar() {
  const translateX = useSharedValue(-barSize)

  useEffect(() => {
    translateX.value = withRepeat(
      withTiming(width, {
        duration: animationDuration,
      }),
      -1, // infinite
      false
    )
  }, [])

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }))

  return (
    <>
      <Animated.View className="bg-primary/30 h-1 absolute bottom-0 w-full z-50" />
      <Animated.View
        className="absolute bottom-0 bg-primary rounded-full h-1 z-50"
        style={[styles.animatedStrip, animatedStyle]}
        // exiting={customExiting}
      />
    </>
  )
}

const styles = StyleSheet.create({
  animatedStrip: {
    width: barSize,
  },
})

Help appreciated, thanks

[huseynovvusal]

To finish the current progress loop before unmounting you can manually manage the entire process to have full control over it. The implementation below might be what you are looking for:

const isUnmounting = useRef(false)

const loop = useCallback(() => {
  translateX.value = withTiming(
    width,
    { duration: animationDuration },
    finished => {
      if (!finished || isUnmounting.current) return
      translateX.value = -barSize
      loop()
    }
  )
}, [])

useEffect(() => {
  loop()   // Start endless (recursive) loop

  return () => {
    // Stop scheduling new loops
    isUnmounting.current = true          
    
    // Grab current position
    cancelAnimation(translateX)           
    const remaining = width - translateX.value
    const remDur= (remaining / (width + barSize)) * animationDuration

    // One final slide to 100%, then call onFullyHidden()
    translateX.value = withTiming(
      width,
      { duration: remDur },
      finished => {
        if (finished && onFullyHidden) runOnJS(onFullyHidden)() // Whatever you wanna do at the end of the animation
      }
    )
  }
}, [])

[MatiPl01]

A few concerns related to this proposed solution

1. It won't work because the loop function is not a worklet but the withTiming animation end callback requires a worklet to be passed, so you cannot just run the loop recursively from this callback. Even adding "worklet" directive to the loop function won't work as worklets must be fully declared before being used. If you mark the loop function as a worklet, then the attempt to call it within the animation end callback with end up with the loop is not a function (it is undefined) error.

How to fix the issue?

You can use the withRepeat helper function instead of the recursive loop

translateX.value = withRepeat(
  withTiming(width, { duration: animationDuration }),
  true
)

2. You don't need to use the isUnmounting helper ref. The useEffect cleanup callback (for useEffect without any dependencies or with dependencies that never change) will be called only once, when the component unmounts, so the isUnmounting flag is not necessary.

3. You don't have to call cancelAnimation manually. The animation is always cancelled when the new one starts, so just assigning a new animation will cancel the previous one.

4. Your One final slide to 100% always animates the position to 100% instead of finishing the iteration. It won't work if the currently running iteration was the animation from 100% to -50%.

5. And finally, this solution doesn't prevent the view from unmounting. You cannot make use of the useEffect cleanup function as it triggers when the view is being unmounted, so you will try to start the animation on the unmounted view, which makes no sense.

---

Refined implementation

Source code

import React, { useCallback, useEffect, useState } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import Animated, {
  Easing,
  interpolate,
  runOnJS,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

const animationDuration = 1000;

export default function EmptyExample() {
  const [isMounted, setIsMounted] = useState(true);

  const progress = useSharedValue(0);
  const currentIteration = useSharedValue(0);

  const unmount = useCallback(() => {
    let targetProgress, remainingDuration;

    if (currentIteration.value % 2 === 0) {
      targetProgress = 1;
      remainingDuration = (1 - progress.value) * animationDuration;
    } else {
      targetProgress = 0;
      remainingDuration = progress.value * animationDuration;
    }

    progress.value = withTiming(
      targetProgress,
      {
        duration: remainingDuration,
        easing: Easing.linear,
      },
      (finished) => {
        if (finished) runOnJS(setIsMounted)(false);
      }
    );
  }, [progress, currentIteration]);

  useEffect(() => {
    progress.value = withRepeat(
      withTiming(
        1,
        { duration: animationDuration, easing: Easing.linear },
        (finished) => {
          if (finished) currentIteration.value++;
        }
      ),
      -1,
      true
    );
  }, [progress, currentIteration]);

  const animatedStyle = useAnimatedStyle(() => {
    const value = interpolate(progress.value, [0, 1], [-50, 100]);
    return {
      transform: [{ translateX: `${value}%` }],
    };
  });

  return (
    <View style={styles.container}>
      <Button title="Unmount" onPress={unmount} />
      {isMounted && <Animated.View style={[styles.box, animatedStyle]} />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-07-07.at.11.16.41.mp4

[MatiPl01]

I posted a solution that doesn't use layout animations in the comment above. Here is a solution that utilizes Layout Animations for your requested case:

Code snippet

import React, { useCallback, useEffect, useState } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import Animated, {
  Easing,
  EntryExitAnimationFunction,
  interpolate,
  useAnimatedStyle,
  useDerivedValue,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

const animationDuration = 1000;

export default function EmptyExample() {
  const [isMounted, setIsMounted] = useState(true);

  const progress = useSharedValue(0);
  const currentIteration = useSharedValue(0);
  const translateX = useDerivedValue<`${number}%`>(
    () => `${interpolate(progress.value, [0, 1], [-50, 100])}%`
  );

  useEffect(() => {
    progress.value = withRepeat(
      withTiming(
        1,
        { duration: animationDuration, easing: Easing.linear },
        (finished) => {
          if (finished) {
            currentIteration.value++;
          }
        }
      ),
      -1,
      true
    );
  }, [progress, currentIteration]);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  const customExiting = useCallback<EntryExitAnimationFunction>(() => {
    'worklet';
    let targetX: `${number}%`, remainingDuration: number;

    if (currentIteration.value % 2 === 0) {
      targetX = '100%';
      remainingDuration = (1 - progress.value) * animationDuration;
    } else {
      targetX = '-50%';
      remainingDuration = progress.value * animationDuration;
    }

    return {
      initialValues: {
        transform: [{ translateX: translateX.value }],
      },
      animations: {
        transform: [
          {
            translateX: withTiming(targetX, {
              duration: remainingDuration,
              easing: Easing.linear,
            }),
          },
        ],
      },
    };
  }, [progress, currentIteration, translateX]);

  return (
    <View style={styles.container}>
      <Button title="Unmount" onPress={() => setIsMounted(false)} />
      {isMounted && (
        <Animated.View
          style={[styles.box, animatedStyle]}
          exiting={customExiting}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-07-07.at.11.16.41.1.mp4

[MarkusWendorf]

Thanks for the input, my experiments with customExiting where similiar, but I think I messed up the math somewhere.

For now I settled for not unmounting the component. I use a boolean prop instead (adding spin delay was also easier this way).

import { useEffect } from 'react'
import { Dimensions, StyleSheet } from 'react-native'
import Animated, {
  cancelAnimation,
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated'
import { useSpinDelay } from 'spin-delay'

const { width } = Dimensions.get('window')
const barDivider = 2
const barSize = width / barDivider
const animationDuration = 1500

type Props = {
  visible: boolean
  delay?: number
  minDuration?: number
}

export function ProgressBar({ visible, delay, minDuration }: Props) {
  const shouldRender = useSpinDelay(visible, {
    delay: delay ?? 300,
    minDuration: minDuration ?? 700,
  })

  const translateX = useSharedValue(-barSize)
  const isVisible = useSharedValue(false)
  const opacity = useSharedValue(0)

  useEffect(() => {
    isVisible.value = shouldRender

    if (shouldRender) {
      opacity.value = 1
      translateX.value = -barSize
      translateX.value = withRepeat(
        withTiming(
          width,
          {
            duration: animationDuration,
            easing: Easing.inOut(Easing.quad),
          },
          () => {
            if (!isVisible.value) {
              opacity.value = withTiming(0, { duration: 200, easing: Easing.inOut(Easing.quad) })
              cancelAnimation(translateX)
            }
          }
        ),
        -1,
        false
      )
    }
  }, [shouldRender, translateX, isVisible, opacity])

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }))

  return (
    <Animated.View
      className="h-1 absolute bottom-0 w-full z-50"
      pointerEvents="box-none"
      style={{ opacity, backgroundColor: '#bec3c1' }}
    >
      <Animated.View
        className="absolute bottom-0 bg-primary rounded-full h-1 z-50"
        style={[styles.animatedStrip, animatedStyle]}
      />
    </Animated.View>
  )
}

const styles = StyleSheet.create({
  animatedStrip: {
    width: barSize,
  },
})