Componentschevron_rightShake

Shake

Shake animation triggered by a prop, perfect for error states or attention grabbing.

9:41

signal_cellular_altwifibattery_full

Please enter a valid value

Preview Controls

Animation

Shakes horizontally

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

export default function LoginForm() {
  const { trigger, shake } = useShake();

  const handleSubmit = () => {
    if (!isValid) {
      shake(); // Trigger shake animation
    }
  };

  return (
    <Shake trigger={trigger}>
      <TextInput placeholder="Password" />
    </Shake>
  );
}

Full Component Code

Shake.tsx

1import React from 'react';
2import { ViewStyle, StyleProp } from 'react-native';
3import Animated, {
4  useSharedValue,
5  useAnimatedStyle,
6  withSequence,
7  withTiming,
8  withRepeat,
9  Easing,
10} from 'react-native-reanimated';
11
12interface ShakeProps {
13  children: React.ReactNode;
14  trigger?: boolean;
15  intensity?: number;
16  duration?: number;
17  style?: StyleProp<ViewStyle>;
18}
19
20export const Shake: React.FC<ShakeProps> = ({
21  children,
22  trigger = false,
23  intensity = 10,
24  duration = 80,
25  style,
26}) => {
27  const translateX = useSharedValue(0);
28
29  React.useEffect(() => {
30    if (trigger) {
31      translateX.value = withSequence(
32        withTiming(-intensity, { duration, easing: Easing.linear }),
33        withRepeat(
34          withTiming(intensity, { duration, easing: Easing.linear }),
35          5,
36          true
37        ),
38        withTiming(0, { duration, easing: Easing.linear })
39      );
40    }
41  }, [trigger]);
42
43  const animatedStyle = useAnimatedStyle(() => ({
44    transform: [{ translateX: translateX.value }],
45  }));
46
47  return (
48    <Animated.View style={[style, animatedStyle]}>
49      {children}
50    </Animated.View>
51  );
52};
53
54export const useShake = () => {
55  const [trigger, setTrigger] = React.useState(false);
56
57  const shake = () => {
58    setTrigger(true);
59    setTimeout(() => setTrigger(false), 500);
60  };
61
62  return { trigger, shake };
63};
64
65export default Shake;

Props

Name	Type	Default	Description
children	React.ReactNode	-	Content to animate
trigger	boolean	false	When true, triggers shake
intensity	number	10	Shake distance in pixels
duration	number	80	Duration of each shake

arrow_backBounce

Pulsearrow_forward