Looping Opacity Animation in React Native

I needed to animate a red dot similar to how a recording light flashes. Kinda like this 👇

CSS Keyframes make it as easy as pie 🥧

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.blinking-dot {
  width: 30px;
  height: 30px;
  background: rgba(179, 0, 0, 0.8);
  border-radius: 15px;
  animation: blink 1s infinite;
}

A blinking dot in React Native requires a little more work. Animations are usually implemented using react-native-reanimated. With the help of react-native-redash from William Candillon, who does the Can it be done in React Native videos on YouTube, animating this blinking dot isn't that bad. Using the loop() function with the boomerang option set to true, the opacity will bounce back and forth from 0 to 1 🦘

import Svg, { Circle } from 'react-native-svg';
import Animated, { Easing } from 'react-native-reanimated';
import { loop, mix } from 'react-native-redash';

const { set, useCode, Value } = Animated;

function BlinkingDot() {
  const animation = new Value(0);

  useCode(
    () =>
      set(
        animation,
        loop({
          duration: 1000,
          easing: Easing.inOut(Easing.ease),

          // the animation goes from 0 to 1 and then
          // from 1 to 0 in the next cycle
          boomerang: true,
          autoStart: true,
        })
      ),
    [animation]
  );

  // Interpolate the node from 0 to 1 without clamping
  const opacity = mix(animation, 0.1, 1);

  return (
    <Animated.View style={{ opacity }}>
      <Svg style={styles.circle} viewBox="0 0 100 100">
        <Circle cx="50" cy="50" r="50" fill={Colors.red} fillOpacity="1" />
      </Svg>
    </Animated.View>
  );
}

React Native Reanimated uses a declarative API, so it's a lot easier to understand what's going on. Animations are performed in steps, which is very similar to how keyframe animations are executed. This is great because it lowers the barrier of entry for developers getting into React Native.

Blog

Looping Opacity Animation in React Native

Dereck Quock

Join Our Newsletter. No Spam, Only the good stuff.

Related