README
![](https://raw.githubusercontent.com/pedreviljoen/react-native-wiggle-box/HEAD/assets/wiggle.gif)
react-native-wiggle-box
A box that wiggles for clickable attention
Contents
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!
- Fork it.
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Or open up a issue.
License
MIT