Animated.loop in React Native doesn’t make the animation loop on web

It took me a while of testing, but whatever I tried resulted in one animation loop when compiling a React Native component for the Web. Turns out, there’s one parameter that was causing it.

Whenever you create a looped animation with Animated.loop() and Animated.timing(), remember about the parameter useNativeDriver in Animated.timing: it has to be false for web, as there’s no native driver per sē. For example:

import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';

const AnimatedIconComponent = Animated.createAnimatedComponent(MaterialCommunityIcons);

const spinValue = new Animated.Value(0);

Animated.loop(
  Animated.timing(
    spinValue,
    {
      toValue: 1,
      duration: 1000,
      easing: Easing.linear,
      // prevents loop from working on the 'web', set to true only on devices
      useNativeDriver: false
    }
  ))
.start()

// Next, interpolate beginning and end values (in this case 0 and 1)
const spin = spinValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg']
});

return <AnimatedIconComponent name="loading" size={32} color="black" style={{ transform: [{ rotate: spin }] }} />

---

Did you know that I made an in-browser image converter, where you can convert your images without uploading them anywhere? Try it out and let me know what you think. It's free.