react-native-wiggle-box

react-native-wiggle-box

A box that wiggles for clickable attention

Contents

• Install
• Usage
• Props
• Contribute
• License

Install

yarn add 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}
                type={'wiggle'}
            >
                <Text>
                    I wiggle
                </Text>
            </WiggleBox>
            <WiggleBox
                active={true}
                handlePress={this.handleClick}
                boxStyle={styles.boxContainer}
                type={'bounce'}
            >
                <Text>
                    I bounce
                </Text>
            </WiggleBox>
        </View>
    }
}

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

Props

Property	Description	Type	Default Value
active	Value toggling wiggle of box	Boolean	false
boxStyle	Styles of box	Object	{}
handlePress	Function to execute on click of the box	Function	() => {}
duration	Time (ms) for duration of animation	Integer	100
type	Distinguish between wiggle or bounce, to draw attention	String	wiggle

Contribute

Contributions are welcome!

1. Fork it.
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Or open up a issue.

License

MIT