v2 types (#840)

Co-authored-by: Terry Sahaidak <tasssik@gmail.com>
Co-authored-by: William Candillon <wcandillon@gmail.com>
Co-authored-by: Victor Malov <victor.malov@breeffy.com>

docs/docs/api/useAnimatedScrollHandler.md

@@ -64,7 +64,7 @@ function ScrollExample() {
     return {
       transform: [
         {
-          translateY: transY.value,
+          translateY: translationY.value,
         },
       ],
     };

package.json

@@ -8,7 +8,8 @@
     "test:unit": "jest",
     "format": "prettier --write --list-different './src/**/*.js'",
     "lint": "eslint './src/**/*.js'",
-    "release": "npm login && release-it"
+    "release": "npm login && release-it",
+    "type:check": "tsc"
   },
   "main": "lib/commonjs/Animated",
   "module": "lib/module/Animated",
@@ -52,7 +53,8 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-gesture-handler": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.7.5",
@@ -61,8 +63,7 @@
     "@babel/preset-typescript": "^7.7.4",
     "@react-native-community/bob": "^0.14.3",
     "@react-native-community/eslint-config": "^0.0.5",
-    "@types/react": "^16.9.0",
-    "@types/react-native": "0.60.19",
+    "@types/react-native": "^0.62.13",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "eslint": "^6.5.1",
@@ -74,12 +75,15 @@
     "eslint-plugin-standard": "^4.0.1",
     "husky": "^4.2.5",
     "jest": "^24.9.0",
-    "lint-staged": "^9.4.2",
+    "lint-staged": "^10.2.11",
     "prettier": "^1.13.7",
     "react": "^16.11.0",
     "react-native": "0.63.0",
+    "react-native-gesture-handler": "^1.6.1",
     "react-test-renderer": "16.9.0",
-    "release-it": "^13.1.1"
+    "release-it": "^13.1.1",
+    "tsc": "^1.20150623.0",
+    "typescript": "^3.9.5"
   },
   "lint-staged": {
     "*.js": [

react-native-reanimated-tests.tsx

@@ -0,0 +1,330 @@
+/* eslint-disable */
+import React from 'react';
+import { StyleSheet, Button, View } from 'react-native';
+import { PanGestureHandler } from 'react-native-gesture-handler';
+import Animated, {
+  useSharedValue,
+  useDerivedValue,
+  useAnimatedStyle,
+  useAnimatedScrollHandler,
+  useAnimatedGestureHandler,
+  Easing,
+  withTiming,
+  withSpring,
+  cancelAnimation,
+  delay,
+  repeat,
+  sequence,
+  withDecay,
+} from 'react-native-reanimated';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  box: {
+    height: 50,
+    backgroundColor: 'blue',
+  },
+});
+
+/**
+ * Reanimated 1
+ */
+
+// @TODO: add reanimated 1 tests here
+
+/**
+ * Reanimated 2 Hooks
+ */
+
+// useSharedValue
+function SharedValueTest() {
+  const translate = useSharedValue(0);
+  return <Animated.View style={styles.container} />;
+}
+
+// useAnimatedStyle
+function AnimatedStyleTest() {
+  const width = useSharedValue(50);
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      width: width.value,
+    };
+  });
+  return <Animated.View style={[styles.box, animatedStyle]} />;
+}
+
+// useDerivedValue
+function DerivedValueTest() {
+  const progress = useSharedValue(0);
+  const width = useDerivedValue(() => {
+    return progress.value * 250;
+  });
+
+  return (
+    <Button title="Random" onPress={() => (progress.value = Math.random())} />
+  );
+}
+
+// useAnimatedScrollHandler
+function AnimatedScrollHandlerTest() {
+  const translationY = useSharedValue(0);
+  const scrollHandler = useAnimatedScrollHandler((event) => {
+    translationY.value = event.contentOffset.y;
+  });
+  const stylez = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: translationY.value,
+        },
+      ],
+    };
+  });
+  return (
+    <View style={styles.container}>
+      <Animated.View style={[styles.box, stylez]} />
+      <Animated.ScrollView onScroll={scrollHandler} scrollEventThrottle={16} />
+    </View>
+  );
+}
+
+// useAnimatedGestureHandler
+function AnimatedGestureHandlerTest() {
+  const x = useSharedValue(0);
+  const gestureHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx) => {
+      ctx.startX = x.value;
+    },
+    onActive: (event, ctx) => {
+      x.value = ctx.startX + event.translationX;
+    },
+    onEnd: (_) => {
+      x.value = 0;
+    },
+  });
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: x.value,
+        },
+      ],
+    };
+  });
+  return (
+    <PanGestureHandler onGestureEvent={gestureHandler}>
+      <Animated.View style={[styles.box, animatedStyle]} />
+    </PanGestureHandler>
+  );
+}
+
+/**
+ * Reanimated 2 Animations
+ */
+
+// withTiming
+function WithTimingTest() {
+  const width = useSharedValue(50);
+  const style = useAnimatedStyle(() => {
+    return {
+      width: withTiming(width.value, {
+        duration: 500,
+        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+      }),
+    };
+  });
+  return (
+    <View>
+      <Animated.View style={[styles.box, style]} />
+      <Button onPress={() => (width.value = Math.random() * 300)} title="Hey" />
+    </View>
+  );
+}
+
+// withSpring
+function WithSpringTest() {
+  const x = useSharedValue(0);
+  const gestureHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx) => {
+      ctx.startX = x.value;
+    },
+    onActive: (event, ctx) => {
+      x.value = ctx.startX + event.translationX;
+    },
+    onEnd: (_) => {
+      x.value = withSpring(0);
+    },
+  });
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: x.value,
+        },
+      ],
+    };
+  });
+  return (
+    <PanGestureHandler onGestureEvent={gestureHandler}>
+      <Animated.View style={[styles.box, animatedStyle]} />
+    </PanGestureHandler>
+  );
+}
+
+// cancelAnimation
+function CancelAnimationTest() {
+  const x = useSharedValue(0);
+  const gestureHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx) => {
+      cancelAnimation(x);
+    },
+    onActive: (event, ctx) => {
+      x.value = ctx.startX + event.translationX;
+    },
+    onEnd: (_) => {
+      x.value = 0;
+    },
+  });
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: x.value,
+        },
+      ],
+    };
+  });
+  return (
+    <PanGestureHandler onGestureEvent={gestureHandler}>
+      <Animated.View style={[styles.box, animatedStyle]} />
+    </PanGestureHandler>
+  );
+}
+
+// delay
+function DelayTest() {
+  const x = useSharedValue(0);
+  const gestureHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx) => {
+      cancelAnimation(x);
+    },
+    onActive: (event, ctx) => {
+      x.value = ctx.startX + event.translationX;
+    },
+    onEnd: (_) => {
+      x.value = delay(1000, withTiming(70));
+    },
+  });
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: x.value,
+        },
+      ],
+    };
+  });
+  return (
+    <PanGestureHandler onGestureEvent={gestureHandler}>
+      <Animated.View style={[styles.box, animatedStyle]} />
+    </PanGestureHandler>
+  );
+}
+
+// repeat
+function RepeatTest() {
+  const x = useSharedValue(0);
+  const gestureHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx) => {
+      cancelAnimation(x);
+    },
+    onActive: (event, ctx) => {
+      x.value = ctx.startX + event.translationX;
+    },
+    onEnd: (_) => {
+      x.value = repeat(withTiming(70), 1, true);
+    },
+  });
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: x.value,
+        },
+      ],
+    };
+  });
+  return (
+    <PanGestureHandler onGestureEvent={gestureHandler}>
+      <Animated.View style={[styles.box, animatedStyle]} />
+    </PanGestureHandler>
+  );
+}
+
+// sequence
+function SequenceTest() {
+  const x = useSharedValue(0);
+  const gestureHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx) => {
+      cancelAnimation(x);
+    },
+    onActive: (event, ctx) => {
+      x.value = ctx.startX + event.translationX;
+    },
+    onEnd: (_) => {
+      x.value = sequence(withTiming(70), withTiming(70));
+    },
+  });
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: x.value,
+        },
+      ],
+    };
+  });
+  return (
+    <PanGestureHandler onGestureEvent={gestureHandler}>
+      <Animated.View style={[styles.box, animatedStyle]} />
+    </PanGestureHandler>
+  );
+}
+
+// withDecay
+function WithDecayTest() {
+  const x = useSharedValue(0);
+
+  const gestureHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx) => {
+      ctx.startX = x.value;
+    },
+    onActive: (event, ctx) => {
+      x.value = ctx.startX + event.translationX;
+    },
+    onEnd: (evt) => {
+      x.value = withDecay({
+        velocity: evt.velocityX,
+        clamp: [0, 200], // optionally define boundaries for the animation
+      });
+    },
+  });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: x.value,
+        },
+      ],
+    };
+  });
+
+  return (
+    <PanGestureHandler onGestureEvent={gestureHandler}>
+      <Animated.View style={[styles.box, animatedStyle]} />
+    </PanGestureHandler>
+  );
+}