Componentschevron_rightRotate

Rotate

Rotation animation with infinite loop by default for spinners.

9:41

signal_cellular_altwifibattery_full

refresh

Preview Controls

Animation

Continuous rotation

This is a CSS-based preview of the animation. The actual React Native component uses physics-based springs for a more natural feel.

Installation

Usage

Example.tsx

import { Rotate } from './components/Rotate';

export default function App() {
  return (
    <Rotate loop duration={800}>
      <SpinnerIcon />
    </Rotate>
  );
}

Full Component Code

Rotate.tsx

1import React, { useEffect } from 'react';
2import { View, ViewStyle, StyleProp } from 'react-native';
3import Animated, {
4  useSharedValue,
5  useAnimatedStyle,
6  withRepeat,
7  withTiming,
8  Easing,
9  withDelay,
10} from 'react-native-reanimated';
11
12interface RotateProps {
13  children: React.ReactNode;
14  duration?: number;
15  delay?: number;
16  loop?: boolean;
17  degrees?: number;
18  style?: StyleProp<ViewStyle>;
19}
20
21export const Rotate: React.FC<RotateProps> = ({
22  children,
23  duration = 1000,
24  delay = 0,
25  loop = true,
26  degrees = 360,
27  style,
28}) => {
29  const rotation = useSharedValue(0);
30
31  useEffect(() => {
32    const animation = withTiming(degrees, {
33      duration,
34      easing: Easing.linear,
35    });
36
37    if (loop) {
38      rotation.value = withDelay(
39        delay,
40        withRepeat(animation, -1, false)
41      );
42    } else {
43      rotation.value = withDelay(delay, animation);
44    }
45  }, [loop, degrees]);
46
47  const animatedStyle = useAnimatedStyle(() => ({
48    transform: [{ rotate: `${rotation.value}deg` }],
49  }));
50
51  return (
52    <View style={{ alignSelf: 'flex-start' }}>
53      <Animated.View style={[style, animatedStyle]}>
54        {children}
55      </Animated.View>
56    </View>
57  );
58};
59
60export default Rotate;

Props

Name	Type	Default	Description
children	React.ReactNode	-	Content to animate
degrees	number	360	Degrees to rotate
duration	number	1000	Animation duration
loop	boolean	true	Whether to loop infinitely
delay	number	0	Delay before animation

arrow_backPulse

AnimatedButtonarrow_forward