react-native-reanimated 2.3.0-beta.2 → 2.3.1

package/lib/reanimated2/layoutReanimation/defaultAnimations/Rotate.js

@@ -22,8 +22,8 @@ export class RotateInDownLeft extends ComplexAnimationBuilder {
                         opacity: 0,
                         transform: [
                             { rotate: '-90deg' },
-                            { translateX: values.width / 2 - values.height / 2 },
-                            { translateY: -(values.width / 2 - values.height / 2) },
+                            { translateX: values.targetWidth / 2 - values.targetHeight / 2 },
+                            { translateY: -(values.targetWidth / 2 - values.targetHeight / 2) },
                         ],
                     },
                     callback: callback,
@@ -58,8 +58,8 @@ export class RotateInDownRight extends ComplexAnimationBuilder {
                         opacity: 0,
                         transform: [
                             { rotate: '90deg' },
-                            { translateX: -(values.width / 2 - values.height / 2) },
-                            { translateY: -(values.width / 2 - values.height / 2) },
+                            { translateX: -(values.targetWidth / 2 - values.targetHeight / 2) },
+                            { translateY: -(values.targetWidth / 2 - values.targetHeight / 2) },
                         ],
                     },
                     callback: callback,
@@ -94,8 +94,8 @@ export class RotateInUpLeft extends ComplexAnimationBuilder {
                         opacity: 0,
                         transform: [
                             { rotate: '90deg' },
-                            { translateX: values.width / 2 - values.height / 2 },
-                            { translateY: values.width / 2 - values.height / 2 },
+                            { translateX: values.targetWidth / 2 - values.targetHeight / 2 },
+                            { translateY: values.targetWidth / 2 - values.targetHeight / 2 },
                         ],
                     },
                     callback: callback,
@@ -130,8 +130,8 @@ export class RotateInUpRight extends ComplexAnimationBuilder {
                         opacity: 0,
                         transform: [
                             { rotate: '-90deg' },
-                            { translateX: -(values.width / 2 - values.height / 2) },
-                            { translateY: values.width / 2 - values.height / 2 },
+                            { translateX: -(values.targetWidth / 2 - values.targetHeight / 2) },
+                            { translateY: values.targetWidth / 2 - values.targetHeight / 2 },
                         ],
                     },
                     callback: callback,
@@ -159,10 +159,10 @@ export class RotateOutDownLeft extends ComplexAnimationBuilder {
                         transform: [
                             { rotate: delayFunction(delay, animation('90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(values.width / 2 - values.height / 2, config)),
+                                translateX: delayFunction(delay, animation(values.currentWidth / 2 - values.currentHeight / 2, config)),
                             },
                             {
-                                translateY: delayFunction(delay, animation(values.width / 2 - values.height / 2, config)),
+                                translateY: delayFunction(delay, animation(values.currentWidth / 2 - values.currentHeight / 2, config)),
                             },
                         ],
                     },
@@ -195,10 +195,10 @@ export class RotateOutDownRight extends ComplexAnimationBuilder {
                         transform: [
                             { rotate: delayFunction(delay, animation('-90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(-(values.width / 2 - values.height / 2), config)),
+                                translateX: delayFunction(delay, animation(-(values.currentWidth / 2 - values.currentHeight / 2), config)),
                             },
                             {
-                                translateY: delayFunction(delay, animation(values.width / 2 - values.height / 2, config)),
+                                translateY: delayFunction(delay, animation(values.currentWidth / 2 - values.currentHeight / 2, config)),
                             },
                         ],
                     },
@@ -231,10 +231,10 @@ export class RotateOutUpLeft extends ComplexAnimationBuilder {
                         transform: [
                             { rotate: delayFunction(delay, animation('-90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(values.width / 2 - values.height / 2, config)),
+                                translateX: delayFunction(delay, animation(values.currentWidth / 2 - values.currentHeight / 2, config)),
                             },
                             {
-                                translateY: delayFunction(delay, animation(-(values.width / 2 - values.height / 2), config)),
+                                translateY: delayFunction(delay, animation(-(values.currentWidth / 2 - values.currentHeight / 2), config)),
                             },
                         ],
                     },
@@ -267,10 +267,10 @@ export class RotateOutUpRight extends ComplexAnimationBuilder {
                         transform: [
                             { rotate: delayFunction(delay, animation('90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(-(values.width / 2 - values.height / 2), config)),
+                                translateX: delayFunction(delay, animation(-(values.currentWidth / 2 - values.currentHeight / 2), config)),
                             },
                             {
-                                translateY: delayFunction(delay, animation(-(values.width / 2 - values.height / 2), config)),
+                                translateY: delayFunction(delay, animation(-(values.currentWidth / 2 - values.currentHeight / 2), config)),
                             },
                         ],
                     },

package/lib/reanimated2/layoutReanimation/defaultAnimations/Slide.js

@@ -13,10 +13,10 @@ export class SlideInRight extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originX: delayFunction(delay, animation(values.originX, config)),
+                        originX: delayFunction(delay, animation(values.targetOriginX, config)),
                     },
                     initialValues: {
-                        originX: values.originX + width,
+                        originX: values.targetOriginX + width,
                     },
                     callback: callback,
                 };
@@ -39,10 +39,10 @@ export class SlideInLeft extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originX: delayFunction(delay, animation(values.originX, config)),
+                        originX: delayFunction(delay, animation(values.targetOriginX, config)),
                     },
                     initialValues: {
-                        originX: values.originX - width,
+                        originX: values.targetOriginX - width,
                     },
                     callback: callback,
                 };
@@ -65,10 +65,10 @@ export class SlideOutRight extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originX: delayFunction(delay, animation(Math.max(values.originX + width, width), config)),
+                        originX: delayFunction(delay, animation(Math.max(values.currentOriginX + width, width), config)),
                     },
                     initialValues: {
-                        originX: values.originX,
+                        originX: values.currentOriginX,
                     },
                     callback: callback,
                 };
@@ -91,10 +91,10 @@ export class SlideOutLeft extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originX: delayFunction(delay, animation(Math.min(values.originX - width, -width), config)),
+                        originX: delayFunction(delay, animation(Math.min(values.currentOriginX - width, -width), config)),
                     },
                     initialValues: {
-                        originX: values.originX,
+                        originX: values.currentOriginX,
                     },
                     callback: callback,
                 };
@@ -117,10 +117,10 @@ export class SlideInUp extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originY: delayFunction(delay, animation(values.originY, config)),
+                        originY: delayFunction(delay, animation(values.targetOriginY, config)),
                     },
                     initialValues: {
-                        originY: height,
+                        originY: -height,
                     },
                     callback: callback,
                 };
@@ -143,10 +143,10 @@ export class SlideInDown extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originY: delayFunction(delay, animation(values.originY, config)),
+                        originY: delayFunction(delay, animation(values.targetOriginY, config)),
                     },
                     initialValues: {
-                        originY: values.originY + height,
+                        originY: values.targetOriginY + height,
                     },
                     callback: callback,
                 };
@@ -169,9 +169,9 @@ export class SlideOutUp extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originY: delayFunction(delay, animation(Math.min(values.originY - height, -height), config)),
+                        originY: delayFunction(delay, animation(Math.min(values.currentOriginY - height, -height), config)),
                     },
-                    initialValues: { originY: values.originY },
+                    initialValues: { originY: values.currentOriginY },
                     callback: callback,
                 };
             };
@@ -193,9 +193,9 @@ export class SlideOutDown extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originY: delayFunction(delay, animation(Math.max(values.originY + height, height), config)),
+                        originY: delayFunction(delay, animation(Math.max(values.currentOriginY + height, height), config)),
                     },
-                    initialValues: { originY: values.originY },
+                    initialValues: { originY: values.currentOriginY },
                     callback: callback,
                 };
             };

package/lib/reanimated2/layoutReanimation/defaultAnimations/Zoom.js

@@ -191,7 +191,7 @@ export class ZoomInEasyUp extends ComplexAnimationBuilder {
                         ],
                     },
                     initialValues: {
-                        transform: [{ translateY: -values.height }, { scale: 0 }],
+                        transform: [{ translateY: -values.targetHeight }, { scale: 0 }],
                     },
                     callback: callback,
                 };
@@ -220,7 +220,7 @@ export class ZoomInEasyDown extends ComplexAnimationBuilder {
                         ],
                     },
                     initialValues: {
-                        transform: [{ translateY: values.height }, { scale: 0 }],
+                        transform: [{ translateY: values.targetHeight }, { scale: 0 }],
                     },
                     callback: callback,
                 };
@@ -417,7 +417,7 @@ export class ZoomOutEasyUp extends ComplexAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateY: delayFunction(delay, animation(-values.height, config)),
+                                translateY: delayFunction(delay, animation(-values.currentHeight, config)),
                             },
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
@@ -448,7 +448,7 @@ export class ZoomOutEasyDown extends ComplexAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateY: delayFunction(delay, animation(values.height, config)),
+                                translateY: delayFunction(delay, animation(values.currentHeight, config)),
                             },
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],

package/lib/reanimated2/layoutReanimation/defaultTransitions/CurvedTransition.js

@@ -24,16 +24,28 @@ export class CurvedTransition extends BaseAnimationBuilder {
                 'worklet';
                 return {
                     initialValues: {
-                        originX: values.boriginX,
-                        originY: values.boriginY,
-                        width: values.bwidth,
-                        height: values.bheight,
+                        originX: values.currentOriginX,
+                        originY: values.currentOriginY,
+                        width: values.currentWidth,
+                        height: values.currentHeight,
                     },
                     animations: {
-                        originX: delayFunction(delay, withTiming(values.originX, { duration, easing: easing.easingX })),
-                        originY: delayFunction(delay, withTiming(values.originY, { duration, easing: easing.easingY })),
-                        width: delayFunction(delay, withTiming(values.width, { duration, easing: easing.easingWidth })),
-                        height: delayFunction(delay, withTiming(values.height, { duration, easing: easing.easingHeight })),
+                        originX: delayFunction(delay, withTiming(values.targetOriginX, {
+                            duration,
+                            easing: easing.easingX,
+                        })),
+                        originY: delayFunction(delay, withTiming(values.targetOriginY, {
+                            duration,
+                            easing: easing.easingY,
+                        })),
+                        width: delayFunction(delay, withTiming(values.targetWidth, {
+                            duration,
+                            easing: easing.easingWidth,
+                        })),
+                        height: delayFunction(delay, withTiming(values.targetHeight, {
+                            duration,
+                            easing: easing.easingHeight,
+                        })),
                     },
                     callback: callback,
                 };

package/lib/reanimated2/layoutReanimation/defaultTransitions/EntryExitTransition.js

@@ -60,7 +60,7 @@ export class EntryExitTransition extends BaseAnimationBuilder {
                                 (_a = animations.transform) === null || _a === void 0 ? void 0 : _a.push({
                                     [transformProp]: delayFunction(delay + exitingDuration, withSequence(withTiming(enteringValues.initialValues.transform
                                         ? enteringValues.initialValues.transform[index][transformProp]
-                                        : 0, { duration: 0 }), value[transformProp])),
+                                        : 0, { duration: exitingDuration }), value[transformProp])),
                                 });
                             }
                         });
@@ -96,8 +96,8 @@ export class EntryExitTransition extends BaseAnimationBuilder {
                     return value;
                 }));
                 return {
-                    initialValues: Object.assign(Object.assign({}, exitingValues.initialValues), { originX: values.boriginX, originY: values.boriginY, width: values.bwidth, height: values.bheight, transform: mergedTransform }),
-                    animations: Object.assign({ originX: delayFunction(delay + exitingDuration, withTiming(values.originX, { duration: 0 })), originY: delayFunction(delay + exitingDuration, withTiming(values.originY, { duration: 0 })), width: delayFunction(delay + exitingDuration, withTiming(values.width, { duration: 0 })), height: delayFunction(delay + exitingDuration, withTiming(values.height, { duration: 0 })) }, animations),
+                    initialValues: Object.assign(Object.assign({}, exitingValues.initialValues), { originX: values.currentOriginX, originY: values.currentOriginY, width: values.currentWidth, height: values.currentHeight, transform: mergedTransform }),
+                    animations: Object.assign({ originX: delayFunction(delay + exitingDuration, withTiming(values.targetOriginX, { duration: exitingDuration })), originY: delayFunction(delay + exitingDuration, withTiming(values.targetOriginY, { duration: exitingDuration })), width: delayFunction(delay + exitingDuration, withTiming(values.targetWidth, { duration: exitingDuration })), height: delayFunction(delay + exitingDuration, withTiming(values.targetHeight, { duration: exitingDuration })) }, animations),
                     callback: callback,
                 };
             };

package/lib/reanimated2/layoutReanimation/defaultTransitions/FadingTransition.js

@@ -14,17 +14,17 @@ export class FadingTransition extends BaseAnimationBuilder {
                 return {
                     initialValues: {
                         opacity: 1,
-                        originX: values.boriginX,
-                        originY: values.boriginY,
-                        width: values.bwidth,
-                        height: values.bheight,
+                        originX: values.currentOriginX,
+                        originY: values.currentOriginY,
+                        width: values.currentWidth,
+                        height: values.currentHeight,
                     },
                     animations: {
                         opacity: delayFunction(delay, withSequence(withTiming(0, { duration: duration }), withTiming(1, { duration: duration }))),
-                        originX: delayFunction(delay + duration, withTiming(values.originX, { duration: 50 })),
-                        originY: delayFunction(delay + duration, withTiming(values.originY, { duration: 50 })),
-                        width: delayFunction(delay + duration, withTiming(values.width, { duration: 50 })),
-                        height: delayFunction(delay + duration, withTiming(values.height, { duration: 50 })),
+                        originX: delayFunction(delay + duration, withTiming(values.targetOriginX, { duration: 50 })),
+                        originY: delayFunction(delay + duration, withTiming(values.targetOriginY, { duration: 50 })),
+                        width: delayFunction(delay + duration, withTiming(values.targetWidth, { duration: 50 })),
+                        height: delayFunction(delay + duration, withTiming(values.targetHeight, { duration: 50 })),
                     },
                     callback: callback,
                 };

package/lib/reanimated2/layoutReanimation/defaultTransitions/JumpingTransition.js

@@ -13,22 +13,22 @@ export class JumpingTransition extends BaseAnimationBuilder {
             const config = { duration: duration * 2 };
             return (values) => {
                 'worklet';
-                const d = Math.max(Math.abs(values.originX - values.boriginX), Math.abs(values.originY - values.boriginY));
+                const d = Math.max(Math.abs(values.targetOriginX - values.currentOriginX), Math.abs(values.targetOriginY - values.currentOriginY));
                 return {
                     initialValues: {
-                        originX: values.boriginX,
-                        originY: values.boriginY,
-                        width: values.bwidth,
-                        height: values.bheight,
+                        originX: values.currentOriginX,
+                        originY: values.currentOriginY,
+                        width: values.currentWidth,
+                        height: values.currentHeight,
                     },
                     animations: {
-                        originX: delayFunction(delay, withTiming(values.originX, config)),
-                        originY: delayFunction(delay, withSequence(withTiming(Math.min(values.originY, values.boriginY) - d, {
+                        originX: delayFunction(delay, withTiming(values.targetOriginX, config)),
+                        originY: delayFunction(delay, withSequence(withTiming(Math.min(values.targetOriginY, values.currentOriginY) - d, {
                             duration,
                             easing: Easing.out(Easing.exp),
-                        }), withTiming(values.originY, Object.assign(Object.assign({}, config), { duration, easing: Easing.bounce })))),
-                        width: delayFunction(delay, withTiming(values.width, config)),
-                        height: delayFunction(delay, withTiming(values.height, config)),
+                        }), withTiming(values.targetOriginY, Object.assign(Object.assign({}, config), { duration, easing: Easing.bounce })))),
+                        width: delayFunction(delay, withTiming(values.targetWidth, config)),
+                        height: delayFunction(delay, withTiming(values.targetHeight, config)),
                     },
                     callback: callback,
                 };

package/lib/reanimated2/layoutReanimation/defaultTransitions/LinearTransition.js

@@ -11,16 +11,16 @@ export class LinearTransition extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     initialValues: {
-                        originX: values.boriginX,
-                        originY: values.boriginY,
-                        width: values.bwidth,
-                        height: values.bheight,
+                        originX: values.currentOriginX,
+                        originY: values.currentOriginY,
+                        width: values.currentWidth,
+                        height: values.currentHeight,
                     },
                     animations: {
-                        originX: delayFunction(delay, animation(values.originX, config)),
-                        originY: delayFunction(delay, animation(values.originY, config)),
-                        width: delayFunction(delay, animation(values.width, config)),
-                        height: delayFunction(delay, animation(values.height, config)),
+                        originX: delayFunction(delay, animation(values.targetOriginX, config)),
+                        originY: delayFunction(delay, animation(values.targetOriginY, config)),
+                        width: delayFunction(delay, animation(values.targetWidth, config)),
+                        height: delayFunction(delay, animation(values.targetHeight, config)),
                     },
                     callback: callback,
                 };

package/lib/reanimated2/layoutReanimation/defaultTransitions/SequencedTransition.js

@@ -16,16 +16,16 @@ export class SequencedTransition extends BaseAnimationBuilder {
                 'worklet';
                 return {
                     initialValues: {
-                        originX: values.boriginX,
-                        originY: values.boriginY,
-                        width: values.bwidth,
-                        height: values.bheight,
+                        originX: values.currentOriginX,
+                        originY: values.currentOriginY,
+                        width: values.currentWidth,
+                        height: values.currentHeight,
                     },
                     animations: {
-                        originX: delayFunction(delay, withSequence(withTiming(reverse ? values.boriginX : values.originX, config), withTiming(values.originX, config))),
-                        originY: delayFunction(delay, withSequence(withTiming(reverse ? values.originY : values.boriginY, config), withTiming(values.originY, config))),
-                        width: delayFunction(delay, withSequence(withTiming(reverse ? values.bwidth : values.width, config), withTiming(values.width, config))),
-                        height: delayFunction(delay, withSequence(withTiming(reverse ? values.height : values.bheight, config), withTiming(values.height, config))),
+                        originX: delayFunction(delay, withSequence(withTiming(reverse ? values.currentOriginX : values.targetOriginX, config), withTiming(values.targetOriginX, config))),
+                        originY: delayFunction(delay, withSequence(withTiming(reverse ? values.targetOriginY : values.currentOriginY, config), withTiming(values.targetOriginY, config))),
+                        width: delayFunction(delay, withSequence(withTiming(reverse ? values.currentWidth : values.targetWidth, config), withTiming(values.targetWidth, config))),
+                        height: delayFunction(delay, withSequence(withTiming(reverse ? values.targetHeight : values.currentHeight, config), withTiming(values.targetHeight, config))),
                     },
                     callback: callback,
                 };

package/lib/reanimated2/mock.js

@@ -6,14 +6,16 @@ const NOOP = () => {
     // noop
 };
 const ID = (t) => t;
+const IMMEDIATE_CB_INVOCATION = (cb) => cb();
 const ReanimatedV2 = {
     useSharedValue: (v) => ({ value: v }),
     useDerivedValue: (a) => ({ value: a() }),
     useAnimatedScrollHandler: () => NOOP,
     useAnimatedGestureHandler: () => NOOP,
-    useAnimatedStyle: (style) => style,
+    useAnimatedStyle: IMMEDIATE_CB_INVOCATION,
     useAnimatedRef: () => ({ current: null }),
     useAnimatedReaction: NOOP,
+    useAnimatedProps: IMMEDIATE_CB_INVOCATION,
     withTiming: (toValue, _, cb) => {
         cb && cb(true);
         return toValue;

package/lib/setAndForwardRef.js

@@ -1,53 +1,19 @@
 /**
  * imported from react-native
  */
-
-/**
- * This is a helper function for when a component needs to be able to forward a ref
- * to a child component, but still needs to have access to that component as part of
- * its implementation.
- *
- * Its main use case is in wrappers for native components.
- *
- * Usage:
- *
- *   class MyView extends React.Component {
- *     _nativeRef = null;
- *
- *     _setNativeRef = setAndForwardRef({
- *       getForwardedRef: () => this.props.forwardedRef,
- *       setLocalRef: ref => {
- *         this._nativeRef = ref;
- *       },
- *     });
- *
- *     render() {
- *       return <View ref={this._setNativeRef} />;
- *     }
- *   }
- *
- *   const MyViewWithRef = React.forwardRef((props, ref) => (
- *     <MyView {...props} forwardedRef={ref} />
- *   ));
- *
- *   module.exports = MyViewWithRef;
- */
-
-function setAndForwardRef({ getForwardedRef, setLocalRef }) {
-  return function forwardRef(ref) {
-    const forwardedRef = getForwardedRef();
-
-    setLocalRef(ref);
-
-    // Forward to user ref prop (if one has been specified)
-    if (typeof forwardedRef === 'function') {
-      // Handle function-based refs. String-based refs are handled as functions.
-      forwardedRef(ref);
-    } else if (typeof forwardedRef === 'object' && forwardedRef != null) {
-      // Handle createRef-based refs
-      forwardedRef.current = ref;
-    }
-  };
+function setAndForwardRef({ getForwardedRef, setLocalRef, }) {
+    return function forwardRef(ref) {
+        const forwardedRef = getForwardedRef();
+        setLocalRef(ref);
+        // Forward to user ref prop (if one has been specified)
+        if (typeof forwardedRef === 'function') {
+            // Handle function-based refs. String-based refs are handled as functions.
+            forwardedRef(ref);
+        }
+        else if (typeof forwardedRef === 'object' && forwardedRef != null) {
+            // Handle createRef-based refs
+            forwardedRef.current = ref;
+        }
+    };
 }
-
 export default setAndForwardRef;

package/mock.js

@@ -86,7 +86,7 @@ function createTransitioningComponent(Component) {
     }
 
     render() {
-      return <Component {...this.props} />;
+      return React.createElement(Component, this.props);
     }
   };
 }

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.3.0-beta.2",
+  "version": "2.3.1",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
-    "test": "yarn run format && yarn run lint-check && yarn run test:unit",
+    "test": "yarn run format:js && yarn run lint:js && yarn run test:unit",
     "test:unit": "jest",
-    "format": "prettier --write --list-different './src/'",
-    "precommit": "yarn lint-java && yarn clang-format",
-    "lint-check": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check src/",
-    "lint-check-cpp": "./scripts/cpplint.sh",
-    "lint-java": "node ./scripts/lint-java.js",
-    "clang-format": "yarn clang-format-ios && yarn clang-format-android && yarn clang-format-common",
-    "clang-format-ios": "find ios/ -iname *.h -o -iname *.m -o -iname *.cpp | xargs clang-format -i",
-    "clang-format-android": "find android/src/ -iname *.h -o -iname *.m -o -iname *.cpp | xargs clang-format -i",
-    "clang-format-common": "find Common/ -iname *.h -o -iname *.m -o -iname *.cpp | xargs clang-format -i",
+    "lint": "yarn lint:js && yarn lint:cpp && yarn lint:java",
+    "lint:js": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check src/",
+    "lint:java": "./android/gradlew -p android spotlessCheck -q",
+    "lint:cpp": "./scripts/cpplint.sh",
+    "format": "yarn format:js && yarn format:java && yarn format:ios && yarn format:android && yarn format:common",
+    "format:js": "prettier --write --list-different './src/'",
+    "format:java": "node ./scripts/format-java.js",
+    "format:ios": "find ios/ -iname *.h -o -iname *.m -o -iname *.mm -o -iname *.cpp | xargs clang-format -i",
+    "format:android": "find android/src/ -iname *.h -o -iname *.cpp | xargs clang-format -i",
+    "format:common": "find Common/ -iname *.h -o -iname *.cpp | xargs clang-format -i",
     "release": "npm login && release-it",
     "type:check": "yarn tsc --noEmit",
     "type:generate": "yarn type:generate:clean && yarn type:generate:cp-js-src && yarn type:generate:tsc && yarn type:generate:remove.ts && yarn type:generate:remove.tsx",
@@ -22,7 +23,8 @@
     "type:generate:cp-js-src": "cp -RL src/ lib/",
     "type:generate:tsc": "yarn tsc",
     "type:generate:remove.ts": "find ./lib -type f -name \"*.ts\" -and -not -name \"*.d.ts\" -delete",
-    "type:generate:remove.tsx": "find ./lib -type f -name \"*.tsx\" -and -not -name \"*.d.ts\" -delete"
+    "type:generate:remove.tsx": "find ./lib -type f -name \"*.tsx\" -and -not -name \"*.d.ts\" -delete",
+    "prepare": "husky install"
   },
   "main": "lib/Animated.js",
   "module": "lib/Animated",
@@ -46,6 +48,7 @@
     "react-native-reanimated.d.ts",
     "mock.js",
     "plugin.js",
+    "expo-module.config.json",
     "!__snapshots__",
     "!*.test.js",
     "!*.test.js.map"
@@ -66,6 +69,7 @@
   "homepage": "https://github.com/software-mansion/react-native-reanimated#readme",
   "dependencies": {
     "@babel/plugin-transform-object-assign": "^7.10.4",
+    "@types/invariant": "^2.2.35",
     "invariant": "^2.2.4",
     "lodash.isequal": "^4.5.0",
     "mockdate": "^3.0.2",
@@ -107,28 +111,28 @@
     "eslint-plugin-node": "^10.0.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "husky": "^4.2.5",
+    "husky": "^7.0.0",
     "jest": "^26.6.3",
-    "lint-staged": "^10.2.11",
+    "lint-staged": "^11.2.0",
     "prettier": "^2.2.1",
     "react": "17.0.2",
-    "react-native": "0.66.0-rc.4",
+    "react-native": "0.67.0-rc.4",
     "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^1.6.1",
     "react-test-renderer": "17.0.2",
-    "release-it": "^13.1.1",
+    "release-it": "^13.7.2",
     "typescript": "^4.1.3"
   },
   "lint-staged": {
     "*.(js|ts|tsx)": [
-      "eslint --ext '.js,.ts,.tsx' src/ --ignore-pattern src/reanimated1 --ignore-pattern react-native-reanimated.d.ts",
+      "eslint --ext '.js,.ts,.tsx' src/ --ignore-pattern src/reanimated1 --ignore-pattern react-native-reanimated.d.ts --ignore-pattern docs",
       "prettier --write"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    ],
+    "**/*.{h,cpp}": "yarn lint:cpp",
+    "android/src/**/*.java": "yarn format:java",
+    "android/src/**/*.{h,cpp}": "yarn format:android",
+    "ios/**/*.{h,m,mm,cpp}": "yarn format:ios",
+    "Common/**/*.{h,cpp}": "yarn format:common"
   },
   "release-it": {
     "hooks": {