/ Animation

Simple box that wiggles for attention

Simple box that wiggles for attention

react-native-wiggle-box

A box that wiggles for clickable attention.

react-native-wiggle-box

Install

yarn install react-native-wiggle-box

OR

npm install react-native-wiggle-box

Usage

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import WiggleBox from 'react-native-wiggle-box'

class Example extends React.Component {

    handleClick = () => console.log("You've just clicked on the box")

    render() {
        <View>
            <WiggleBox
                active={true}
                handlePress={this.handleClick}
                boxStyle={styles.boxContainer}
                duration={200}
            >
                <Text>
                    I wiggle
                </Text>
            </WiggleBox>
        </View>
    }
}

const styles = StyleSheet.create({
    boxContainer: {
        backgroundColor: "#3BD0F5",
        height: 100,
        width: 100,
        alignItems: "center",
        justifyContent: "center"
    }
})

Props

Property Description Default Value
active Boolean value toggling wiggle of box false
boxStyle Styles of box {}
handlePress Function to execute on click of the box () => {}
duration Time (ms) for duration of animation 100

GitHub