Componentschevron_rightPulse

Pulse

Continuous pulsing animation for loading states or drawing attention.

9:41

signal_cellular_altwifibattery_full

notifications

Preview Controls

Animation

Continuous pulsing

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 { Pulse } from './components/Pulse';

export default function App() {
  return (
    <Pulse active={isLoading}>
      <LoadingIndicator />
    </Pulse>
  );
}

Full Component Code

Pulse.tsx

1import React, { useEffect } from 'react';
2import { ViewStyle, StyleProp } from 'react-native';
3import Animated, {
4  useSharedValue,
5  useAnimatedStyle,
6  withRepeat,
7  withSequence,
8  withTiming,
9  Easing,
10} from 'react-native-reanimated';
11
12interface PulseProps {
13  children: React.ReactNode;
14  minScale?: number;
15  maxScale?: number;
16  duration?: number;
17  style?: StyleProp<ViewStyle>;
18  active?: boolean;
19}
20
21export const Pulse: React.FC<PulseProps> = ({
22  children,
23  minScale = 0.95,
24  maxScale = 1.05,
25  duration = 1000,
26  style,
27  active = true,
28}) => {
29  const scale = useSharedValue(1);
30  const opacity = useSharedValue(1);
31
32  useEffect(() => {
33    if (active) {
34      scale.value = withRepeat(
35        withSequence(
36          withTiming(maxScale, { duration: duration / 2, easing: Easing.inOut(Easing.ease) }),
37          withTiming(minScale, { duration: duration / 2, easing: Easing.inOut(Easing.ease) })
38        ),
39        -1,
40        true
41      );
42      opacity.value = withRepeat(
43        withSequence(
44          withTiming(0.8, { duration: duration / 2 }),
45          withTiming(1, { duration: duration / 2 })
46        ),
47        -1,
48        true
49      );
50    } else {
51      scale.value = withTiming(1);
52      opacity.value = withTiming(1);
53    }
54  }, [active]);
55
56  const animatedStyle = useAnimatedStyle(() => ({
57    transform: [{ scale: scale.value }],
58    opacity: opacity.value,
59  }));
60
61  return (
62    <Animated.View style={[style, animatedStyle]}>
63      {children}
64    </Animated.View>
65  );
66};
67
68export default Pulse;

Props

Name	Type	Default	Description
children	React.ReactNode	-	Content to animate
minScale	number	0.95	Minimum scale
maxScale	number	1.05	Maximum scale
duration	number	1000	Full pulse cycle duration
active	boolean	true	Whether pulsing is active

arrow_backShake

Rotatearrow_forward