Migrate Animated module to universal react-animated package

.github/CODEOWNERS

@@ -24,7 +24,7 @@ React/CxxBridge/* @mhorowitz
 
 # Components and APIs
 ReactAndroid/src/main/java/com/facebook/react/animated/* @janicduplessis
-Libraries/Animated/* @janicduplessis
+packages/react-animated/* @janicduplessis
 Libraries/NativeAnimation/* @janicduplessis
 Libraries/Image/* @shergin
 Libraries/Text/* @shergin

Libraries/Components/ScrollView/ScrollView.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const AnimatedImplementation = require('../../Animated/src/AnimatedImplementation');
+const AnimatedImplementation = require('react-animated/dist/AnimatedImplementation');
 const Platform = require('../../Utilities/Platform');
 const React = require('react');
 const ReactNative = require('../../Renderer/shims/ReactNative');

Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const AnimatedImplementation = require('../../Animated/src/AnimatedImplementation');
+const AnimatedImplementation = require('react-animated/dist/AnimatedImplementation');
 const React = require('react');
 const StyleSheet = require('../../StyleSheet/StyleSheet');
 const View = require('../View/View');

Libraries/Components/Touchable/TouchableOpacity.js

@@ -16,8 +16,8 @@ import Pressability, {
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import TVTouchable from './TVTouchable';
 import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
-import Animated from 'react-native/Libraries/Animated/src/Animated';
-import Easing from 'react-native/Libraries/Animated/src/Easing';
+import Animated from 'react-animated/dist/Animated';
+import Easing from 'react-animated/dist/Easing';
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import flattenStyle from 'react-native/Libraries/StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';

Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -10,8 +10,8 @@
 
 'use strict';
 
-import Animated from '../../Animated/src/Animated';
-import Easing from '../../Animated/src/Easing';
+import Animated from 'react-animated/dist/Animated';
+import Easing from 'react-animated/dist/Easing';
 import * as React from 'react';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
@@ -31,46 +31,49 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
     rotate: null,
   });
 
-  React.useEffect(() => {
-    if (props.status === 'PENDING') {
-      if (state.animation == null) {
-        const animated = new Animated.Value(0);
-        const animation = Animated.loop(
-          Animated.timing(animated, {
-            duration: 2000,
-            easing: Easing.linear,
-            toValue: 1,
-            useNativeDriver: true,
-          }),
-        );
-        setState({
-          animation,
-          rotate: animated.interpolate({
-            inputRange: [0, 1],
-            /* $FlowFixMe(>=0.38.0) - Flow error detected during the deployment
+  React.useEffect(
+    () => {
+      if (props.status === 'PENDING') {
+        if (state.animation == null) {
+          const animated = new Animated.Value(0);
+          const animation = Animated.loop(
+            Animated.timing(animated, {
+              duration: 2000,
+              easing: Easing.linear,
+              toValue: 1,
+              useNativeDriver: true,
+            }),
+          );
+          setState({
+            animation,
+            rotate: animated.interpolate({
+              inputRange: [0, 1],
+              /* $FlowFixMe(>=0.38.0) - Flow error detected during the deployment
              * of v0.38.0. To see the error, remove this comment and run flow
              */
-            outputRange: ['0deg', '360deg'],
-          }),
-        });
-        animation.start();
+              outputRange: ['0deg', '360deg'],
+            }),
+          });
+          animation.start();
+        }
+      } else {
+        if (state.animation != null) {
+          state.animation.stop();
+          setState({
+            animation: null,
+            rotate: null,
+          });
+        }
       }
-    } else {
-      if (state.animation != null) {
-        state.animation.stop();
-        setState({
-          animation: null,
-          rotate: null,
-        });
-      }
-    }
 
-    return () => {
-      if (state.animation != null) {
-        state.animation.stop();
-      }
-    };
-  }, [props.status, state.animation]);
+      return () => {
+        if (state.animation != null) {
+          state.animation.stop();
+        }
+      };
+    },
+    [props.status, state.animation],
+  );
 
   let image;
   let color;

Libraries/StyleSheet/StyleSheetTypes.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const AnimatedNode = require('../Animated/src/nodes/AnimatedNode');
+const AnimatedNode = require('react-animated/dist/nodes/AnimatedNode');
 
 import type {NativeColorValue} from './PlatformColorValueTypes';
 

index.js

@@ -47,7 +47,7 @@ import typeof VirtualizedList from './Libraries/Lists/VirtualizedList';
 import typeof VirtualizedSectionList from './Libraries/Lists/VirtualizedSectionList';
 import typeof ActionSheetIOS from './Libraries/ActionSheetIOS/ActionSheetIOS';
 import typeof Alert from './Libraries/Alert/Alert';
-import typeof Animated from './Libraries/Animated/src/Animated';
+import typeof Animated from 'react-animated/dist/Animated';
 import typeof Appearance from './Libraries/Utilities/Appearance';
 import typeof AppRegistry from './Libraries/ReactNative/AppRegistry';
 import typeof AppState from './Libraries/AppState/AppState';
@@ -58,7 +58,7 @@ import typeof DatePickerAndroid from './Libraries/Components/DatePickerAndroid/D
 import typeof DeviceInfo from './Libraries/Utilities/DeviceInfo';
 import typeof DevSettings from './Libraries/Utilities/DevSettings';
 import typeof Dimensions from './Libraries/Utilities/Dimensions';
-import typeof Easing from './Libraries/Animated/src/Easing';
+import typeof Easing from 'react-animated/dist/Easing';
 import typeof ReactNative from './Libraries/Renderer/shims/ReactNative';
 import typeof I18nManager from './Libraries/ReactNative/I18nManager';
 import typeof ImagePickerIOS from './Libraries/Image/ImagePickerIOS';
@@ -272,7 +272,7 @@ module.exports = {
     return require('./Libraries/Alert/Alert');
   },
   get Animated(): Animated {
-    return require('./Libraries/Animated/src/Animated');
+    return require('react-animated/dist/Animated');
   },
   get Appearance(): Appearance {
     return require('./Libraries/Utilities/Appearance');
@@ -323,7 +323,7 @@ module.exports = {
     return require('./Libraries/Utilities/Dimensions');
   },
   get Easing(): Easing {
-    return require('./Libraries/Animated/src/Easing');
+    return require('react-animated/dist/Easing');
   },
   get findNodeHandle(): $PropertyType<ReactNative, 'findNodeHandle'> {
     return require('./Libraries/Renderer/shims/ReactNative').findNodeHandle;

package.json

@@ -108,6 +108,7 @@
     "qs": "^6.5.1",
     "react-devtools-core": "^4.6.0",
     "react-refresh": "^0.4.0",
+    "react-animated": "^0.1.0",
     "regenerator-runtime": "^0.13.2",
     "scheduler": "0.19.1",
     "stacktrace-parser": "^0.1.3",

Libraries/Animated/release/package.json → packages/react-animated/package.json

@@ -7,8 +7,11 @@
     "animated",
     "animation"
   ],
+  "files": [
+    "dist"
+  ],
   "license": "MIT",
-  "main": "Animated.js",
+  "main": "dist/Animated.js",
   "dependencies": {
     "fbjs": "^1.0.0"
   },