[fix] ScrollView forwards style when 'refreshControl' prop is present

Fix #2024

Author: aryo

packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/ScrollView prop "refreshControl" with 1`] = `
+<div
+  id="refresh-control"
+>
+  <div
+    class="css-view-1dbjc4n r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
+    style="background-color: rgb(255, 0, 0);"
+  >
+    <div
+      class="css-view-1dbjc4n"
+    />
+  </div>
+</div>
+`;
+
+exports[`components/ScrollView prop "refreshControl" without 1`] = `
+<div
+  class="css-view-1dbjc4n r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
+  style="background-color: rgb(255, 0, 0);"
+>
+  <div
+    class="css-view-1dbjc4n"
+  />
+</div>
+`;

packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js

@@ -86,4 +86,21 @@ describe('components/ScrollView', () => {
       expect(typeof node.scrollResponderScrollNativeHandleToKeyboard === 'function').toBe(true);
     });
   });
+
+  describe('prop "refreshControl"', () => {
+    test('without', () => {
+      const { container } = render(<ScrollView style={{ backgroundColor: 'red' }} />);
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
+    test('with', () => {
+      const { container } = render(
+        <ScrollView
+          refreshControl={<div id="refresh-control" />}
+          style={{ backgroundColor: 'red' }}
+        />
+      );
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
 });

packages/react-native-web/src/exports/ScrollView/index.js

@@ -223,21 +223,17 @@ const ScrollView = ((createReactClass({
 
     invariant(ScrollViewClass !== undefined, 'ScrollViewClass must not be undefined');
 
-    if (refreshControl) {
-      return React.cloneElement(
-        refreshControl,
-        { style: props.style },
-        <ScrollViewClass {...props} ref={this._setScrollNodeRef} style={baseStyle}>
-          {contentContainer}
-        </ScrollViewClass>
-      );
-    }
-
-    return (
+    const scrollView = (
       <ScrollViewClass {...props} ref={this._setScrollNodeRef}>
         {contentContainer}
       </ScrollViewClass>
     );
+
+    if (refreshControl) {
+      return React.cloneElement(refreshControl, { style: props.style }, scrollView);
+    }
+
+    return scrollView;
   },
 
   _handleContentOnLayout(e: Object) {