From 1979c1ffc1c38a2ed6ed8a4e8fab7bd870f853da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Kr=C3=BCger?= <andre@Andres-MacBook-Pro.local>
Date: Fri, 23 Aug 2019 12:31:50 +0200
Subject: [PATCH] Implement fading edges for Scrollview and it's dependent
 FlatList

This should add props for enabling horizontal and vertical fading
edges for Scrollview and FlatList.
These fading edges are used to communicate to the user that there is more content to see.
---
 Libraries/Components/ScrollView/ScrollView.js | 21 +++++++++++++++++++
 Libraries/Lists/FlatList.js                   | 12 +++++++++++
 .../js/examples/FlatList/FlatListExample.js   | 20 +++++++++++++++++-
 .../ReactHorizontalScrollViewManager.java     | 10 +++++++++
 .../views/scroll/ReactScrollViewManager.java  | 10 +++++++++
 5 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js
index b4298158b3354f..019a48b4f3c5df 100644
--- a/Libraries/Components/ScrollView/ScrollView.js
+++ b/Libraries/Components/ScrollView/ScrollView.js
@@ -335,6 +335,27 @@ type AndroidProps = $ReadOnly<{|
    * @platform android
    */
   persistentScrollbar?: ?boolean,
+  /**
+   * Fades out the left and right edges.
+   * The default value is false.
+   *
+   * @platform android
+   */
+  horizontalFadingEdgesEnabled?: ?boolean,
+  /**
+   * Fades out the up and down edges.
+   * The default value is false.
+   *
+   * @platform android
+   */
+  verticalFadingEdgesEnabled?: ?boolean,
+  /**
+   * The amount of fading.
+   * The default value is 0.
+   *
+   * @platform android
+   */
+  fadingEdgeLength?: ?number,
 |}>;
 
 type VRProps = $ReadOnly<{|
diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js
index 3afed1ba5a75b7..4d537d733b16cf 100644
--- a/Libraries/Lists/FlatList.js
+++ b/Libraries/Lists/FlatList.js
@@ -233,6 +233,18 @@ type OptionalProps<ItemT> = {
    * will be called when its corresponding ViewabilityConfig's conditions are met.
    */
   viewabilityConfigCallbackPairs?: Array<ViewabilityConfigCallbackPair>,
+  /**
+   * See `ScrollView` for flow type and further documentation.
+   */
+  horizontalFadingEdgesEnabled?: ?boolean,
+  /**
+   * See `ScrollView` for flow type and further documentation.
+   */
+  verticalFadingEdgesEnabled?: ?boolean,
+  /**
+   * See `ScrollView` for flow type and further documentation.
+   */
+  fadingEdgeLength?: ?number,
 };
 export type Props<ItemT> = RequiredProps<ItemT> &
   OptionalProps<ItemT> &
diff --git a/RNTester/js/examples/FlatList/FlatListExample.js b/RNTester/js/examples/FlatList/FlatListExample.js
index bb7cc9afe88c02..a6de5163680f18 100644
--- a/RNTester/js/examples/FlatList/FlatListExample.js
+++ b/RNTester/js/examples/FlatList/FlatListExample.js
@@ -29,7 +29,7 @@ const {
   pressItem,
   renderSmallSwitchOption,
 } = require('../../components/ListExampleShared');
-const {Alert, Animated, StyleSheet, View} = require('react-native');
+const {Alert, Animated, Platform, StyleSheet, TextInput, View} = require('react-native');
 
 import type {Item} from '../../components/ListExampleShared';
 
@@ -51,6 +51,8 @@ type State = {|
   virtualized: boolean,
   empty: boolean,
   useFlatListItemComponent: boolean,
+  useFadingEdges: boolean,
+  fadingEdgeLength: number,
 |};
 
 class FlatListExample extends React.PureComponent<Props, State> {
@@ -65,6 +67,8 @@ class FlatListExample extends React.PureComponent<Props, State> {
     virtualized: true,
     empty: false,
     useFlatListItemComponent: false,
+    useFadingEdges: false,
+    fadingEdgeLength: 0,
   };
 
   _onChangeFilterText = filterText => {
@@ -124,11 +128,25 @@ class FlatListExample extends React.PureComponent<Props, State> {
               {renderSmallSwitchOption(this, 'empty')}
               {renderSmallSwitchOption(this, 'debug')}
               {renderSmallSwitchOption(this, 'useFlatListItemComponent')}
+              { Platform.OS === 'android' &&
+                <View style={{ }}>
+                  {renderSmallSwitchOption(this, 'useFadingEdges')}
+                  <TextInput
+                    placeholder='Fading edge length'
+                    underlineColorAndroid='black'
+                    keyboardType={'numeric'}
+                    onChange={event => this.setState({ fadingEdgeLength: Number(event.nativeEvent.text) })}
+                  />
+                </View>
+              }
               <Spindicator value={this._scrollPos} />
             </View>
           </View>
           <SeparatorComponent />
           <Animated.FlatList
+            horizontalFadingEdgesEnabled={this.state.useFadingEdges}
+            verticalFadingEdgesEnabled={this.state.useFadingEdges}
+            fadingEdgeLength={this.state.fadingEdgeLength}
             ItemSeparatorComponent={ItemSeparatorComponent}
             ListHeaderComponent={<HeaderComponent />}
             ListFooterComponent={FooterComponent}
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java
index a8c9898e10d5d7..f6563a20aa0c59 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java
@@ -276,4 +276,14 @@ public void setOverflow(ReactHorizontalScrollView view, @Nullable String overflo
   public void setPersistentScrollbar(ReactHorizontalScrollView view, boolean value) {
     view.setScrollbarFadingEnabled(!value);
   }
+
+  @ReactProp(name = "horizontalFadingEdgesEnabled")
+  public void setHorizontalFadingEdgesEnabled(ReactHorizontalScrollView view, boolean value) {
+    view.setHorizontalFadingEdgeEnabled(value);
+  }
+
+  @ReactProp(name = "fadingEdgeLength")
+  public void setFadingEdgeLength(ReactHorizontalScrollView view, int value) {
+    view.setFadingEdgeLength(value);
+  }
 }
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java
index cb8befaca24300..1a2350174e9f1d 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java
@@ -278,6 +278,16 @@ public void setPersistentScrollbar(ReactScrollView view, boolean value) {
     view.setScrollbarFadingEnabled(!value);
   }
 
+  @ReactProp(name = "verticalFadingEdgesEnabled")
+  public void setVerticalFadingEdgesEnabled(ReactScrollView view, boolean value) {
+    view.setVerticalFadingEdgeEnabled(value);
+  }
+
+  @ReactProp(name = "fadingEdgeLength")
+  public void setFadingEdgeLength(ReactScrollView view, int value) {
+    view.setFadingEdgeLength(value);
+  }
+
   @Override
   public @Nullable Map<String, Object> getExportedCustomDirectEventTypeConstants() {
     return createExportedCustomDirectEventTypeConstants();