From 80ef32f6eea4a7950c07b1ea71b45b5c2b0269ee Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Wed, 6 Jul 2022 18:14:13 -0400
Subject: [PATCH] [fix] ScrollView support for 'centerContent' prop

Fix #2331
Close #2332
---
 .../src/pages/docs/components/scoll-view.md   |  5 ++++-
 .../__snapshots__/index-test.js.snap          | 22 +++++++++++++++++++
 .../ScrollView/__tests__/index-test.js        | 16 ++++++++++++++
 .../src/exports/ScrollView/index.js           | 11 ++++++++--
 4 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/packages/react-native-web-docs/src/pages/docs/components/scoll-view.md b/packages/react-native-web-docs/src/pages/docs/components/scoll-view.md
index d06d125b..e449ebdf 100644
--- a/packages/react-native-web-docs/src/pages/docs/components/scoll-view.md
+++ b/packages/react-native-web-docs/src/pages/docs/components/scoll-view.md
@@ -31,11 +31,14 @@ import { ScrollView } from 'react-native';
 All the props supported by [View]({{ '/docs/view' | url }}).
 {% endcall %}
 
+{% call macro.prop('centerContent', '?boolean') %}
+When `true`, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect.
+{% endcall %}
+
 {% call macro.prop('contentContainerStyle', '?Style') %}
 These styles will be applied to the scroll view content container which wraps all of the child views.
 {% endcall %}
 
-
 {% call macro.prop('disableScrollViewPanResponder', '?boolean = false') %}
 When `true`, the default `PanResponder` on the `ScrollView` is disabled, and full control over pointers inside the `ScrollView` is left to its child components. This is meant to be used when native "snap-to" scrolling behavior is needed.
 {% endcall %}
diff --git a/packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap
index a3a526ce..011e9294 100644
--- a/packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap
@@ -1,5 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/ScrollView prop "centerContent" with 1`] = `
+<div
+  class="css-view-175oi2r 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(0, 0, 255);"
+>
+  <div
+    class="css-view-175oi2r r-flexGrow-16y2uox r-justifyContent-1777fci"
+  />
+</div>
+`;
+
+exports[`components/ScrollView prop "centerContent" without 1`] = `
+<div
+  class="css-view-175oi2r 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(0, 0, 255);"
+>
+  <div
+    class="css-view-175oi2r"
+  />
+</div>
+`;
+
 exports[`components/ScrollView prop "refreshControl" with 1`] = `
 <div
   id="refresh-control"
diff --git a/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js b/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js
index 85bfc443..9c8f2d1a 100644
--- a/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js
@@ -6,6 +6,22 @@ import { findDOMNode } from 'react-dom';
 import { render } from '@testing-library/react';
 
 describe('components/ScrollView', () => {
+  describe('prop "centerContent"', () => {
+    test('without', () => {
+      const { container } = render(
+        <ScrollView style={{ backgroundColor: 'blue' }} />
+      );
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
+    test('with', () => {
+      const { container } = render(
+        <ScrollView centerContent style={{ backgroundColor: 'blue' }} />
+      );
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+
   describe('prop "onScroll"', () => {
     test('is called when element scrolls', () => {
       const onScroll = jest.fn();
diff --git a/packages/react-native-web/src/exports/ScrollView/index.js b/packages/react-native-web/src/exports/ScrollView/index.js
index 46158cd4..f2ecd1bb 100644
--- a/packages/react-native-web/src/exports/ScrollView/index.js
+++ b/packages/react-native-web/src/exports/ScrollView/index.js
@@ -22,6 +22,7 @@ import React from 'react';
 
 type ScrollViewProps = {
   ...ViewProps,
+  centerContent?: boolean,
   contentContainerStyle?: ViewStyle,
   horizontal?: boolean,
   keyboardDismissMode?: 'none' | 'interactive' | 'on-drag',
@@ -136,6 +137,7 @@ const ScrollView = ((createReactClass({
       forwardedRef,
       keyboardDismissMode,
       onScroll,
+      centerContent,
       /* eslint-enable */
       ...other
     } = this.props;
@@ -189,10 +191,11 @@ const ScrollView = ((createReactClass({
         children={children}
         collapsable={false}
         ref={this._setInnerViewRef}
-        style={StyleSheet.compose(
+        style={[
           horizontal && styles.contentContainerHorizontal,
+          centerContent && styles.contentContainerCenterContent,
           contentContainerStyle
-        )}
+        ]}
       />
     );
 
@@ -329,6 +332,10 @@ const styles = StyleSheet.create({
   contentContainerHorizontal: {
     flexDirection: 'row'
   },
+  contentContainerCenterContent: {
+    justifyContent: 'center',
+    flexGrow: 1
+  },
   stickyHeader: {
     position: 'sticky',
     top: 0,