react-native-component-shaker

A simple component for shaking component.
It supports horizon, vertical shake.
It has law dependency. (React, React Native)

Installation

npm

npm i react-native-component-shaker

yarn

yarn add react-native-component-shaker

Properties

props	required	type	description
shakeDirection	X	shakeDirection("horizon", "vertical")	Shake direction.You can select horizon or vertical.defafult: "horizon"
shakeDistance	X	number	Shake distance.This prop work like padding.defafult: 16
shakeCount	X	number	Shake count.Decide how many moves to make to the left and right. Move by the number you enter+1, and the last move is to return to the center.defafult: 8
shakeDuration	X	number	Shake duration.It's the time the animation is running. It's in milliseconds.defafult: 1000
isShakeActivate	O	boolean	Animation start trigger.When ture, the animation started.
children	O	JSX.Element, JSX.Element[]	The React Native component used for shaking.
onShakeEnd	X	() => void	It triggers when the animation finishes.

Example

import React, { useState } from "react";
import {
    SafeAreaView,
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
} from "react-native";
import ComponentShaker from "react-native-component-shaker";

const App = () => {
    const [isShaking, setIsShaking] = useState(false);

    return (
        <SafeAreaView>
            <ComponentShaker
                isShakeActivate={isShaking}
                onShakeEnd={() => setIsShaking(false)}
            >
                <View style={styles.shakeView}>
                    <Text style={styles.shakeFont}>
                        this is component shaker
                    </Text>
                </View>
            </ComponentShaker>

            <View style={styles.shakeButtonContainer}>
                <TouchableOpacity
                    style={styles.shakeButton}
                    onPress={() => setIsShaking(true)}
                >
                    <Text>Shake!</Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    );
};

export default App;

const styles = StyleSheet.create({
    shakeView: {
        alignItems: "center",
        justifyContent: "center",
        width: "100%",
        height: 200,
        borderWidth: 2,
        borderColor: "#063970",
        borderRadius: 16,
        backgroundColor: "#abdbe3",
    },
    shakeFont: {
        fontSize: 24,
        fontWeight: "600",
    },
    shakeButtonContainer: {
        alignItems: "center",
        width: "100%",
        padding: 16,
    },
    shakeButton: {
        alignItems: "center",
        justifyContent: "center",
        padding: 16,
        borderWidth: 1,
        backgroundColor: "#e28743",
    },
});