Return back RN-like Animated api

[ozgentl]

WIth current API it is too hard to make such animations (animating 3 dots ...):

const SHOW_DOT_DURATION = 80
const SHOW_DOT_INTERVAL = 420
const SHOW_DOT_OPTIONS = {
    toValue: 1,
    delay: SHOW_DOT_INTERVAL - SHOW_DOT_DURATION,
    duration: SHOW_DOT_DURATION,
    useNativeDriver: true,
}

const dotStyles = useMemo(() => {
    if (!showDots) return undefined
    
    return [
	    {opacity: new AnimatedRN.Value(1)},
	    {opacity: new AnimatedRN.Value(1)},
	    {opacity: new AnimatedRN.Value(1)},
    ]
}, [showDots])

const animation = AnimatedRN.loop(
    AnimatedRN.sequence([
        AnimatedRN.delay(SHOW_DOT_INTERVAL),
        AnimatedRN.parallel(
            dotStyles.map(({opacity}) =>
	              AnimatedRN.timing(opacity, {toValue: 0, duration: 0, useNativeDriver: true}),
            ),
        ),
        AnimatedRN.timing(dotStyles[0].opacity, SHOW_DOT_OPTIONS),
        AnimatedRN.timing(dotStyles[1].opacity, SHOW_DOT_OPTIONS),
        AnimatedRN.timing(dotStyles[2].opacity, SHOW_DOT_OPTIONS),
    ]),
)

While with RN API it looks trivial (but works terrible).

[MatiPl01]

Hey @ozgentl! Have you tried using Reanimated's CSS animations API?

import { useState } from 'react';
import { Button, View } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

type Props = {
  showDots: boolean;
};

const AnimatedDots = ({ showDots }: Props) => {
  if (!showDots) return null;

  return (
    <View style={styles.dots}>
      {[0, 1, 2].map((i) => (
        <Animated.View
          key={i}
          style={[
            styles.dot,
            {
              animationDelay: `${-i * 180}ms`,
            },
          ]}
        />
      ))}
    </View>
  );
};

export default function EmptyExample() {
  const [showDots, setShowDots] = useState(false);

  return (
    <>
      <Button
        title={showDots ? 'Hide Dots' : 'Show Dots'}
        onPress={() => setShowDots(!showDots)}
      />
      <AnimatedDots showDots={showDots} />
    </>
  );
}

const styles = css.create({
  dots: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
  },
  dot: {
    width: 12,
    height: 12,
    borderRadius: '50%',
    backgroundColor: 'red',
    opacity: 0,
    animationDuration: '1.1s',
    animationTimingFunction: 'ease-in-out',
    animationIterationCount: 'infinite',
    animationName: {
      '0%, 80%, 100%': { opacity: 0.25 },
      '40%': { opacity: 1 },
    },
  },
});

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-04-29.at.13.17.45.mov

[ozgentl]

@MatiPl01 thanks for reaching out so fast, no haven't used them yet because we are on a pretty old RN version (76) with reanimated v3. But thanks for pointing out, indeed looks much better.