Loading Animation with Reanimated 4

Install Reanimated 4 dependencies

npm i react-native-reanimated@latest react-native-worklets@latest

Prebuild your app

npx expo prebuild

Run your app

# Android
npx expo run:android
# IOS
npx expo run:ios

Code

import Animated, { CSSAnimationKeyframes } from "react-native-reanimated";

export default function LoadingAnimation({
  size,
  color,
}: {
  size: number;
  color: string;
}) {
  const animation: CSSAnimationKeyframes = {
    "0%": {
      transform: [{ scale: 0.5 }],
    },
    "100%": {
      borderWidth: size / 10,
      transform: [{ scale: 1 }],
    },
  };
  return (
    <Animated.View
      style={{
        width: size,
        height: size,
        borderRadius: size / 2,
        borderWidth: size / 10,
        borderColor: color,
        boxShadow: `0 0 ${size / 10}px 0 ${color}`,
        animationName: animation,
        animationDuration: 1000,
        animationIterationCount: "infinite",
        animationDirection: "alternate",
      }}
    />
  );
}