├── LICENSE
├── README.md
├── bounceable.js
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Steven Dakh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <img src="https://zippy.gfycat.com/DimTeemingIraniangroundjay.gif"/>
 2 | 
 3 | #### Installation
 4 | To install:
 5 | ```
 6 | npm install --save react-native-bounceable
 7 | ```
 8 | 
 9 | #### Props
10 | - `level: number`
11 |   The maximum scale of the bounce animation (default: 1.1)
12 | - `onPress: function`
13 |   An optional function to be called after a press
14 | 
15 | ### Example
16 | ```js
17 | import Bounceable from "react-native-bouceable";
18 | 
19 | render() {
20 |   return <Bounceable
21 |             onPress={()=>console.log("Pressed!")}
22 |             level={1.1}>
23 |             <View
24 |               style={{
25 |                 width: 100,
26 |                 padding:8
27 |               }}>
28 |               <Text>Click Me!</Text>
29 |             </View>
30 |   </Bounceable>
31 | }
32 | ```
33 | 


--------------------------------------------------------------------------------
/bounceable.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import React, {Component} from "react";
 4 | import {Animated, PanResponder, View} from "react-native";
 5 | import PropTypes from 'prop-types';
 6 | 
 7 | const moveTolerance = 30; // Amount of movement before it is no longer a press
 8 | 
 9 | export default class Bounceable extends Component {
10 |   static propTypes = {
11 |     onPress: PropTypes.func, //Optional function to be excecuted after succesful press
12 |     level: PropTypes.number // Maximum scale of animation
13 |   };
14 | 
15 |   static defaultProps = {
16 |       level: 1.1
17 |   };
18 | 
19 |   constructor (props) {
20 |     super( props);
21 | 
22 |     this.state = {
23 |       scale: new Animated.Value(1)
24 |     };
25 |   }
26 | 
27 |   panResponder = {};
28 | 
29 |   componentWillMount() {
30 |     this._panResponder = PanResponder.create({
31 |       onStartShouldSetPanResponder: (evt, gestureState) => true,
32 |       onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
33 |       onMoveShouldSetPanResponder: (evt, gestureState) => true,
34 |       onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
35 |       onPanResponderTerminationRequest: (evt, gestureState) => true,
36 |       onPanResponderTerminate: (evt, gestureState) => {
37 |       },
38 | 
39 |       onPanResponderGrant: (evt, gestureState) => {
40 |         Animated.timing(
41 |           this.state.scale,
42 |           {
43 |             toValue: this.props.level,
44 |             friction: 1,
45 |             duration: 200
46 |           },
47 |         ).start();
48 |       },
49 | 
50 |       onPanResponderRelease: (evt, gestureState) => {
51 |         if (gestureState.dy > moveTolerance || gestureState.dy < (-moveTolerance) || gestureState.dx > moveTolerance || gestureState.dx < (-moveTolerance)) {
52 |           // Do nothing
53 |         } else {
54 |           setTimeout(() => { // 50ms delay makes press response more natural
55 |             Animated.spring(
56 |               this.state.scale,
57 |               {
58 |                 toValue: 1,
59 |                 friction: 1,
60 |                 duration: 200
61 |               },
62 |             ).start();
63 | 
64 |             if (this.props.onPress) {
65 |               this.props.onPress();
66 |             }
67 |           }, 50);
68 |         }
69 |       }
70 |     });
71 |   }
72 | 
73 |   render () {
74 |     return (
75 |       <Animated.View
76 |         style={[{
77 |           transform: [
78 |             {
79 |               scale: this.state.scale
80 |             }
81 |           ]
82 |         }, this.props.style
83 |         ]}>
84 |         <View
85 |           {...this._panResponder.panHandlers}>
86 |           <View>
87 |             {this.props.children}
88 |           </View>
89 |         </View>
90 |       </Animated.View>
91 |     );
92 |   }
93 | }
94 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 |  { 
 2 |   "name": "react-native-bounceable",
 3 |   "author": "Steven Dakh <slavik0329@gmail.com> (https://github.com/slavik0329)",
 4 |   "version": "0.2.1",
 5 |   "license": "MIT",
 6 |   "main": "bounceable.js",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "https://github.com/slavik0329/react-native-bounceable"
10 |   },
11 |   "description": "A touchable bounce animation that can wrap any React Native view.",
12 |   "keywords": [
13 |     "react-component",
14 |     "react-native",
15 |     "ios",
16 |     "android",
17 |     "animation",
18 |     "bounce",
19 |     "button"
20 |   ]
21 | }
22 | 


--------------------------------------------------------------------------------