Animated.ScrollView with RefreshControl applying Animated transform t…

…wice

Summary:
There was a bug on Android when an Animated.ScrollView had a RefreshControl while an Animated style was applied, ie `transform`:
```
<Animated.ScrollView
  refreshControl={<RefreshControl />}
  style={{
    transform: [{
      translateY: new Animated.Value(200, {useNativeDriver: true})
    }]
  }}
/>
```

The transform value was being incorrectly applied twice. Since the styles were applied once on RefreshControl and once on NativeScrollView, the transform style is effectively applied twice:

**1. ScrollView.js**
- RefreshControl gets the transform through Fabric commit
- [The RefreshControl gets wrapped around ScrollView](https://fburl.com/code/k60krxbj) while on iOS there is no change in the parent/child relationship. [Outer/inner styles are split and applied to RefreshControl/ScrollView](https://fburl.com/code/b2to75er), and transform styles are applied on the parent (RefreshControl)

**2. createAnimatedComponent.js**
- NativeScrollView gets the transform through Animated
- [ScrollView forwards its ref to NativeScrollView](https://fburl.com/code/w1whtl5f), which means AnimatedComponent is setting the transform styles on NativeScrollView and not RefreshControl as ScrollView.js did

This diff fixes this bug by using the `useAnimatedProps` hook which makes both RefreshControl and ScrollView components into animated components. Otherwise, the components don't know what to do with Animated values.
 ---
Changelog:
[Internal][Fixed] - Animated transform style properties were being applied twice when used on an Animated.ScrollView with RefreshControl on Android

Reviewed By: javache

Differential Revision: D38815633

fbshipit-source-id: 2b76639d2237176b6aae4fb1e22cf1a1ec70a69a

Libraries/Animated/components/AnimatedScrollView.js

@@ -9,22 +9,117 @@
  */
 
 import * as React from 'react';
+import {useMemo} from 'react';
 
+import RefreshControl from '../../Components/RefreshControl/RefreshControl';
 import ScrollView from '../../Components/ScrollView/ScrollView';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import flattenStyle from '../../StyleSheet/flattenStyle';
+import splitLayoutProps from '../../StyleSheet/splitLayoutProps';
+import Platform from '../../Utilities/Platform';
+import useMergeRefs from '../../Utilities/useMergeRefs';
 import createAnimatedComponent from '../createAnimatedComponent';
+import useAnimatedProps from '../useAnimatedProps';
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
+type Props = React.ElementConfig<typeof ScrollView>;
+type Instance = React.ElementRef<typeof ScrollView>;
+
 /**
  * @see https://github.com/facebook/react-native/commit/b8c8562
  */
-const ScrollViewWithEventThrottle = React.forwardRef((props, ref) => (
-  <ScrollView scrollEventThrottle={0.0001} {...props} ref={ref} />
-));
-
-export default (createAnimatedComponent(
-  ScrollViewWithEventThrottle,
-): AnimatedComponentType<
-  React.ElementConfig<typeof ScrollView>,
-  React.ElementRef<typeof ScrollView>,
->);
+const AnimatedScrollView: AnimatedComponentType<Props, Instance> =
+  React.forwardRef((props, forwardedRef) => {
+    // (Android only) When a ScrollView has a RefreshControl and
+    // any `style` property set with an Animated.Value, the CSS
+    // gets incorrectly applied twice. This is because ScrollView
+    // swaps the parent/child relationship of itself and the
+    // RefreshControl component (see ScrollView.js for more details).
+    if (
+      Platform.OS === 'android' &&
+      props.refreshControl != null &&
+      props.style != null
+    ) {
+      return (
+        <AnimatedScrollViewWithInvertedRefreshControl
+          scrollEventThrottle={0.0001}
+          {...props}
+          ref={forwardedRef}
+          refreshControl={props.refreshControl}
+        />
+      );
+    } else {
+      return (
+        <AnimatedScrollViewWithoutInvertedRefreshControl
+          scrollEventThrottle={0.0001}
+          {...props}
+          ref={forwardedRef}
+        />
+      );
+    }
+  });
+
+const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
+  (
+    props: {
+      ...React.ElementConfig<typeof ScrollView>,
+      // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
+      refreshControl: React.Element<any>,
+    },
+    forwardedRef,
+  ) => {
+    // Split `props` into the animate-able props for the parent (RefreshControl)
+    // and child (ScrollView).
+    const {intermediatePropsForRefreshControl, intermediatePropsForScrollView} =
+      useMemo(() => {
+        const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
+        return {
+          intermediatePropsForRefreshControl: {style: outer},
+          intermediatePropsForScrollView: {...props, style: inner},
+        };
+      }, [props]);
+
+    // Handle animated props on `refreshControl`.
+    const [refreshControlAnimatedProps, refreshControlRef] = useAnimatedProps(
+      intermediatePropsForRefreshControl,
+    );
+    // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be
+    // safely clobbered.
+    const refreshControl: React.Element<typeof RefreshControl> =
+      React.cloneElement(props.refreshControl, {
+        ...refreshControlAnimatedProps,
+        ref: refreshControlRef,
+      });
+
+    // Handle animated props on `NativeDirectionalScrollView`.
+    const [scrollViewAnimatedProps, scrollViewRef] = useAnimatedProps<
+      Props,
+      Instance,
+    >(intermediatePropsForScrollView);
+    const ref = useMergeRefs<Instance | null>(scrollViewRef, forwardedRef);
+
+    return (
+      // $FlowFixMe[incompatible-use] Investigate useAnimatedProps return value
+      <ScrollView
+        {...scrollViewAnimatedProps}
+        ref={ref}
+        refreshControl={refreshControl}
+        // Because `refreshControl` is a clone of `props.refreshControl` with
+        // `refreshControlAnimatedProps` added, we need to pass ScrollView.js
+        // the combined styles since it also splits the outer/inner styles for
+        // its parent/child, respectively. Without this, the refreshControl
+        // styles would be ignored.
+        style={StyleSheet.compose(
+          scrollViewAnimatedProps.style,
+          refreshControlAnimatedProps.style,
+        )}
+      />
+    );
+  },
+);
+
+const AnimatedScrollViewWithoutInvertedRefreshControl =
+  createAnimatedComponent(ScrollView);
+
+export default AnimatedScrollView;