Skip to content

Instantly share code, notes, and snippets.

@jarvisluong
Created April 18, 2018 21:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jarvisluong/c696e88cf01b7a2eb7ff8072d67da59e to your computer and use it in GitHub Desktop.
Save jarvisluong/c696e88cf01b7a2eb7ff8072d67da59e to your computer and use it in GitHub Desktop.
import React from 'react';
import {TouchableWithoutFeedback, Text, View} from 'react-native';
import * as Animatable from 'react-native-animatable';
Animatable.initializeRegistryWithDefinitions({
bounceLeftRight: {
0: {
translateX: 0,
},
0.3: {
translateX: -25,
},
0.6: {
translateX: 0,
},
0.8: {
translateX: 25,
},
1: {
translateX: 0,
},
},
bounceLeft: {
0: {
translateX: 0,
},
0.3: {
translateX: -25,
},
0.6: {
translateX: 0,
},
0.8: {
translateX: -25,
},
1: {
translateX: 0,
},
},
bounceRight: {
0: {
translateX: 0,
},
0.3: {
translateX: 25,
},
0.6: {
translateX: 0,
},
0.8: {
translateX: 25,
},
1: {
translateX: 0,
},
}
});
export default class Bounce extends React.Component {
handleViewRef = ref => this.view = ref;
bounce = () => this.view.bounceLeftRight(800);
render() {
return (
<TouchableWithoutFeedback onPress={this.bounce}>
<Animatable.View ref={this.handleViewRef}>
{this.props.children}
</Animatable.View>
</TouchableWithoutFeedback>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment