Merge pull request #10 from JWWon/build-walk-edit-page

Build walk edit page

android/app/build.gradle

@@ -101,7 +101,7 @@ android {
         applicationId "com.woodongdang.client.android"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 9
+        versionCode 10
         versionName "0.1.5"
         ndk {
             abiFilters "armeabi-v7a", "x86"

ios/WddClient/Info.plist

@@ -34,7 +34,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>9</string>
+	<string>10</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>

package.json

@@ -30,8 +30,7 @@
     "react-redux": "^6.0.1",
     "redux": "^4.0.1",
     "redux-actions": "^2.6.4",
-    "redux-saga": "^1.0.0",
-    "tslib": "^1.9.3"
+    "redux-saga": "^1.0.0"
   },
   "devDependencies": {
     "@types/jest": "^24.0.6",

src/components/module/TouchableScale/TouchableScale.tsx

@@ -10,28 +10,21 @@ interface Props {
   style?: object;
   defaultScale?: number;
   activeScale?: number;
-  tension?: number;
-  friction?: number;
-  pressInTension?: number;
-  pressInFriction?: number;
-  pressOutTension?: number;
-  pressOutFriction?: number;
-  onPressIn?: (e: GestureResponderEvent) => void;
-  onPressOut?: (e: GestureResponderEvent) => void;
+  activeDuration?: number;
+  restoreDuration?: number;
+  onPress?: (e: GestureResponderEvent) => void;
 }
 
 class TouchableScale extends PureComponent<Props> {
-  private tension = this.props.tension || 150;
-  private friction = this.props.friction || 5;
   private defaultScale = this.props.defaultScale || 1;
   private activeScale = this.props.activeScale || 1.1;
+  private activeDuration = this.props.activeDuration || 70;
+  private restoreDuration = this.props.restoreDuration || 50;
   private scaleAnimation = new Animated.Value(this.props.defaultScale || 1);
 
   render() {
     return (
-      <TouchableWithoutFeedback
-        onPressIn={this.onPressIn}
-        onPressOut={this.onPressOut}>
+      <TouchableWithoutFeedback onPressIn={this.onPress}>
         <Animated.View
           style={[
             this.props.style,
@@ -45,30 +38,23 @@ class TouchableScale extends PureComponent<Props> {
     );
   }
 
-  onPressIn = (e: GestureResponderEvent) => {
-    const { pressInTension, pressInFriction, onPressIn } = this.props;
+  onPress = (e: GestureResponderEvent) => {
+    const { onPress } = this.props;
+    if (onPress) onPress(e);
 
-    Animated.spring(this.scaleAnimation, {
-      tension: pressInTension || this.tension,
-      friction: pressInFriction || this.friction,
+    Animated.timing(this.scaleAnimation, {
       toValue: this.activeScale,
+      duration: this.activeDuration,
       useNativeDriver: true,
-    }).start();
-
-    if (onPressIn) onPressIn(e);
-  };
-
-  onPressOut = (e: GestureResponderEvent) => {
-    const { pressOutTension, pressOutFriction, onPressOut } = this.props;
-
-    Animated.spring(this.scaleAnimation, {
-      tension: pressOutTension || this.tension,
-      friction: pressOutFriction || this.friction,
-      toValue: this.defaultScale,
-      useNativeDriver: true,
-    }).start();
-
-    if (onPressOut) onPressOut(e);
+    }).start(c => {
+      if (c.finished) {
+        Animated.timing(this.scaleAnimation, {
+          toValue: this.defaultScale,
+          duration: this.restoreDuration,
+          useNativeDriver: true,
+        }).start();
+      }
+    });
   };
 }
 

src/pages/Walk/Walk/MarkerButton.tsx

@@ -34,12 +34,7 @@ const styles = StyleSheet.create({
 });
 
 const MarkerButton: React.FC<Props> = ({ icon, onPress }) => (
-  <TouchableScale
-    style={styles.wrapper}
-    pressInTension={70}
-    pressOutTension={50}
-    friction={5}
-    onPressIn={onPress}>
+  <TouchableScale style={styles.wrapper} onPress={onPress}>
     <Image source={icon} style={styles.icon} />
   </TouchableScale>
 );