This package lets you easily add microinteractions to your app and reward users with the rain of confettis or flying emoji in seconds.
npm install react-native-rewards![]()
$ npm install react-native-rewards --save
$ yarn add react-native-root-view-background
Library is 100% javascript so, there is no need to do native linking
using props:
``javascript
import RewardsComponent from 'react-native-rewards';
import React, { Component, createRef } from 'react';
class App extends Component {
state={
animationState: 'rest',
}
render() {
const { animationState } = this.state;
return (
state={animationState}
onRest={() => this.setState({ animationState: 'rest' })}
>
style={styles.buttonProps}
>
)
}
}
`
using ref:
`javascript
import RewardsComponent from 'react-native-rewards';
import React, { Component, createRef } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.rewardsComponent = createRef();
}
render() {
return (
animationType="emoji"
>
style={styles.button}
>
)
}
}
`
| React Element | content to animate e.g. Button | YES | | | Number/Float | initial speed of partices | NO | 1 |
| spread | Number/Float | Multiplier of distance beetween partices | NO | 1 |
| deacceleration | Number/Float | Multiplier how fast partices deaccelerate in firt phase | NO | 1 |
| rotationXSpeed | Number/Float | Rotation speed multiplier in X axis | NO | 5 |
| rotationZSpeed | Number/Float | Rotation speed multiplier in Z axis | NO | 5 |
| particiesCount | Number/Integer | Partices count in reward animation | NO | 20 |
| colors | Array | Colors used to generate confetti | NO | Some colors :) |
| emoji | Array | Emojis used to generate confetti | NO | ['👍','😊','🎉'] |
| animationType | String | Type of animation confetti/emoji | NO | confetti |
| state | String | State of animation, changing of this value triggers animation | NO | rest |
| onRest | Function | Callback when animation goes to rest state | NO | |
Methods
You can call this method by using refs of component
*
rewardMe - Triggers reward animation
* punishMe - Triggers punish animationNotes for local development
You need to have facebook watchman installed
1.
cd example
2. yarn
4. yarn start
5. yarn run sync in another terminal window (doesn't matter where)If you have any issues, you can clear your watches using
watchman watch-del-all` and try again.Feel free to ask me qustion on Twitter @JanRomaniak!