[Android] Implement fading edges for ScrollView and it's dependent FlatList

Libraries/Components/ScrollView/ScrollView.js

@@ -335,6 +335,18 @@ type AndroidProps = $ReadOnly<{|
    * @platform android
    */
   persistentScrollbar?: ?boolean,
+  /**
+   * Fades out the edges of the the scroll content.
+   *
+   * If the value is greater than 0, the fading edges will be set accordingly
+   * to the current scroll direction and position,
+   * indicating if there is more content to show.
+   *
+   * The default value is 0.
+   *
+   * @platform android
+   */
+  fadingEdgeLength?: ?number,
 |}>;
 
 type VRProps = $ReadOnly<{|

Libraries/Lists/FlatList.js

@@ -233,6 +233,10 @@ 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.
+   */
+  fadingEdgeLength?: ?number,
 };
 export type Props<ItemT> = RequiredProps<ItemT> &
   OptionalProps<ItemT> &

RNTester/js/examples/FlatList/FlatListExample.js

@@ -29,7 +29,14 @@ 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 +58,7 @@ type State = {|
   virtualized: boolean,
   empty: boolean,
   useFlatListItemComponent: boolean,
+  fadingEdgeLength: number,
 |};
 
 class FlatListExample extends React.PureComponent<Props, State> {
@@ -65,6 +73,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
     virtualized: true,
     empty: false,
     useFlatListItemComponent: false,
+    fadingEdgeLength: 0,
   };
 
   _onChangeFilterText = filterText => {
@@ -124,11 +133,26 @@ class FlatListExample extends React.PureComponent<Props, State> {
               {renderSmallSwitchOption(this, 'empty')}
               {renderSmallSwitchOption(this, 'debug')}
               {renderSmallSwitchOption(this, 'useFlatListItemComponent')}
+              {Platform.OS === 'android' && (
+                <View>
+                  <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
+            fadingEdgeLength={this.state.fadingEdgeLength}
             ItemSeparatorComponent={ItemSeparatorComponent}
             ListHeaderComponent={<HeaderComponent />}
             ListFooterComponent={FooterComponent}

ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java

@@ -276,4 +276,15 @@ public void setOverflow(ReactHorizontalScrollView view, @Nullable String overflo
   public void setPersistentScrollbar(ReactHorizontalScrollView view, boolean value) {
     view.setScrollbarFadingEnabled(!value);
   }
+
+  @ReactProp(name = "fadingEdgeLength")
+  public void setFadingEdgeLength(ReactHorizontalScrollView view, int value) {
+    if (value > 0) {
+      view.setHorizontalFadingEdgeEnabled(true);
+      view.setFadingEdgeLength(value);
+    } else {
+      view.setHorizontalFadingEdgeEnabled(false);
+      view.setFadingEdgeLength(0);
+    }
+  }
 }

ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java

@@ -278,6 +278,17 @@ public void setPersistentScrollbar(ReactScrollView view, boolean value) {
     view.setScrollbarFadingEnabled(!value);
   }
 
+  @ReactProp(name = "fadingEdgeLength")
+  public void setFadingEdgeLength(ReactScrollView view, int value) {
+    if (value > 0) {
+      view.setVerticalFadingEdgeEnabled(true);
+      view.setFadingEdgeLength(value);
+    } else {
+      view.setVerticalFadingEdgeEnabled(false);
+      view.setFadingEdgeLength(0);
+    }
+  }
+
   @Override
   public @Nullable Map<String, Object> getExportedCustomDirectEventTypeConstants() {
     return createExportedCustomDirectEventTypeConstants();