[fix] ScrollView support for 'centerContent' prop

Fix necolas#2331 Close necolas#2332
VeryBuy · Jul 6, 2022 · ced23d3 · ced23d3
1 parent e651d47
commit ced23d3
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 2 deletions.
diff --git a/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap b/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/src/exports/ScrollView/__tests__/index-test.js b/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/src/exports/ScrollView/index.js b/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,