From f8a64f9d61054046bffc286df3e9abf805aac0d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Kr=C3=BCger?= Date: Fri, 23 Aug 2019 13:01:13 -0700 Subject: [PATCH] Implement fading edges for ScrollView and it's dependent FlatList (#26163) 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: https://github.com/facebook/react-native/pull/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 | 21 +++++++++++++ Libraries/Lists/FlatList.js | 12 +++++++ .../js/examples/FlatList/FlatListExample.js | 31 ++++++++++++++++++- .../ReactHorizontalScrollViewManager.java | 10 ++++++ .../views/scroll/ReactScrollViewManager.java | 10 ++++++ 5 files changed, 83 insertions(+), 1 deletion(-) diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index b4298158b33..019a48b4f3c 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 f9fb2a6aca1..26d87615880 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -233,6 +233,18 @@ type OptionalProps = { * will be called when its corresponding ViewabilityConfig's conditions are met. */ viewabilityConfigCallbackPairs?: Array, + /** + * 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 = RequiredProps & OptionalProps & diff --git a/RNTester/js/examples/FlatList/FlatListExample.js b/RNTester/js/examples/FlatList/FlatListExample.js index bb7cc9afe88..86a0741c002 100644 --- a/RNTester/js/examples/FlatList/FlatListExample.js +++ b/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 { @@ -65,6 +74,8 @@ class FlatListExample extends React.PureComponent { virtualized: true, empty: false, useFlatListItemComponent: false, + useFadingEdges: false, + fadingEdgeLength: 0, }; _onChangeFilterText = filterText => { @@ -124,11 +135,29 @@ class FlatListExample extends React.PureComponent { {renderSmallSwitchOption(this, 'empty')} {renderSmallSwitchOption(this, 'debug')} {renderSmallSwitchOption(this, 'useFlatListItemComponent')} + {Platform.OS === 'android' && ( + + {renderSmallSwitchOption(this, 'useFadingEdges')} + + this.setState({ + fadingEdgeLength: Number(event.nativeEvent.text), + }) + } + /> + + )} } 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 a8c9898e10d..f6563a20aa0 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 class ReactHorizontalScrollViewManager extends ViewGroupManager 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 getExportedCustomDirectEventTypeConstants() { return createExportedCustomDirectEventTypeConstants();