Implement fading edges for ScrollView and it's dependent FlatList (#2…

…6163)

Summary:
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.

## Changelog

[Android] [Added] - fading edges props to the FlatList and ScrollView components
Pull Request resolved: #26163

Test Plan:
Open the React Native test app and navigate to the FlatList section.
Enable the `useFadingEdges` switch and insert a number into `Fading edge length`.

![device-2019-08-23-123745](https://user-images.githubusercontent.com/222393/63587150-7385cb00-c5a3-11e9-98dc-bffe8276d30c.png)
![device-2019-08-23-123844](https://user-images.githubusercontent.com/222393/63587156-75e82500-c5a3-11e9-9e9f-66876ac8f506.png)

Differential Revision: D16992488

Pulled By: sahrens

fbshipit-source-id: f72a9a890d9056bb017cc5747c6f66b7c35633dd

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<{|

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> &

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,8 @@ type State = {|
   virtualized: boolean,
   empty: boolean,
   useFlatListItemComponent: boolean,
+  useFadingEdges: boolean,
+  fadingEdgeLength: number,
 |};
 
 class FlatListExample extends React.PureComponent<Props, State> {
@@ -65,6 +74,8 @@ class FlatListExample extends React.PureComponent<Props, State> {
     virtualized: true,
     empty: false,
     useFlatListItemComponent: false,
+    useFadingEdges: false,
+    fadingEdgeLength: 0,
   };
 
   _onChangeFilterText = filterText => {
@@ -124,11 +135,29 @@ class FlatListExample extends React.PureComponent<Props, State> {
               {renderSmallSwitchOption(this, 'empty')}
               {renderSmallSwitchOption(this, 'debug')}
               {renderSmallSwitchOption(this, 'useFlatListItemComponent')}
+              {Platform.OS === 'android' && (
+                <View>
+                  {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}

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);
+  }
 }

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();