bounceWhenTap.js

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>
    );
  }
}