From bb6663951920841bde6db757efd53454c4e9d772 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Tue, 8 May 2018 17:37:21 -0700
Subject: [PATCH] [fix] ScrollView stickyHeaderIndices basic support

Close #434
---
 .../src/exports/ScrollView/index.js           | 23 ++++++++++++++++---
 .../ScrollView/ScrollViewScreen.js            | 13 +++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/react-native-web/src/exports/ScrollView/index.js b/packages/react-native-web/src/exports/ScrollView/index.js
index 529a757a..a4250aa0 100644
--- a/packages/react-native-web/src/exports/ScrollView/index.js
+++ b/packages/react-native-web/src/exports/ScrollView/index.js
@@ -18,7 +18,7 @@ import StyleSheet from '../StyleSheet';
 import View from '../View';
 import ViewPropTypes from '../ViewPropTypes';
 import React from 'react';
-import { bool, element, func, number, oneOf } from 'prop-types';
+import { arrayOf, bool, element, func, number, oneOf } from 'prop-types';
 
 const emptyObject = {};
 
@@ -35,6 +35,7 @@ const ScrollView = createReactClass({
     refreshControl: element,
     scrollEnabled: bool,
     scrollEventThrottle: number,
+    stickyHeaderIndices: arrayOf(number),
     style: ViewPropTypes.style
   },
 
@@ -135,11 +136,11 @@ const ScrollView = createReactClass({
       horizontal,
       onContentSizeChange,
       refreshControl,
+      stickyHeaderIndices,
       /* eslint-disable */
       keyboardDismissMode,
       onScroll,
       pagingEnabled,
-      stickyHeaderIndices,
       /* eslint-enable */
       ...other
     } = this.props;
@@ -163,10 +164,21 @@ const ScrollView = createReactClass({
       };
     }
 
+    const children =
+      !horizontal && Array.isArray(stickyHeaderIndices)
+        ? React.Children.map(this.props.children, (child, i) => {
+            if (stickyHeaderIndices.indexOf(i) > -1) {
+              return React.cloneElement(child, { style: [child.props.style, styles.stickyHeader] });
+            } else {
+              return child;
+            }
+          })
+        : this.props.children;
+
     const contentContainer = (
       <View
         {...contentSizeChangeProps}
-        children={this.props.children}
+        children={children}
         collapsable={false}
         ref={this._setInnerViewRef}
         style={[horizontal && styles.contentContainerHorizontal, contentContainerStyle]}
@@ -280,6 +292,11 @@ const styles = StyleSheet.create({
   },
   contentContainerHorizontal: {
     flexDirection: 'row'
+  },
+  stickyHeader: {
+    position: 'sticky',
+    top: 0,
+    zIndex: 10
   }
 });
 
diff --git a/website/storybook/1-components/ScrollView/ScrollViewScreen.js b/website/storybook/1-components/ScrollView/ScrollViewScreen.js
index b37dae1c..dbf2a923 100644
--- a/website/storybook/1-components/ScrollView/ScrollViewScreen.js
+++ b/website/storybook/1-components/ScrollView/ScrollViewScreen.js
@@ -120,6 +120,19 @@ const ScrollViewScreen = () => (
           </AppText>
         }
       />
+
+      <DocItem
+        name="stickyHeaderIndices"
+        typeInfo="?Array<number>"
+        description={
+          <AppText>
+            An array of child indices determining which children get docked to the top of the screen
+            when scrolling. For example, passing stickyHeaderIndices={[0]} will cause the first
+            child to be fixed to the top of the scroll view. This property is not supported in
+            conjunction with horizontal={true}.
+          </AppText>
+        }
+      />
     </Section>
 
     <Section title="Instance methods">