From 51aacd5241c4b4c0b9b1e1b8f9dabac45e5b5291 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Kr=C3=BCger?= Date: Tue, 27 Aug 2019 18:20:51 -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: D17080676 Pulled By: TheSavior fbshipit-source-id: 91df629c17052d43c99145672e9084e1379a4113 --- Libraries/Components/ScrollView/ScrollView.js | 12 +++++++++ Libraries/Lists/FlatList.js | 4 +++ .../js/examples/FlatList/FlatListExample.js | 26 ++++++++++++++++++- .../ReactHorizontalScrollViewManager.java | 11 ++++++++ .../views/scroll/ReactScrollViewManager.java | 11 ++++++++ 5 files changed, 63 insertions(+), 1 deletion(-) diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index b4298158b33..46f91c6a8ac 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/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<{| diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index f9fb2a6aca1..595b6468f0e 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -233,6 +233,10 @@ type OptionalProps = { * will be called when its corresponding ViewabilityConfig's conditions are met. */ viewabilityConfigCallbackPairs?: Array, + /** + * 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..e71b9acd6d4 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,7 @@ type State = {| virtualized: boolean, empty: boolean, useFlatListItemComponent: boolean, + fadingEdgeLength: number, |}; class FlatListExample extends React.PureComponent { @@ -65,6 +73,7 @@ class FlatListExample extends React.PureComponent { virtualized: true, empty: false, useFlatListItemComponent: false, + fadingEdgeLength: 0, }; _onChangeFilterText = filterText => { @@ -124,11 +133,26 @@ class FlatListExample extends React.PureComponent { {renderSmallSwitchOption(this, 'empty')} {renderSmallSwitchOption(this, 'debug')} {renderSmallSwitchOption(this, 'useFlatListItemComponent')} + {Platform.OS === 'android' && ( + + + 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..221cff4ccfe 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,15 @@ public class ReactHorizontalScrollViewManager extends ViewGroupManager 0) { + view.setHorizontalFadingEdgeEnabled(true); + view.setFadingEdgeLength(value); + } else { + view.setHorizontalFadingEdgeEnabled(false); + view.setFadingEdgeLength(0); + } + } } 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 cb8befaca24..679db98450d 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,17 @@ public class ReactScrollViewManager extends ViewGroupManager 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 getExportedCustomDirectEventTypeConstants() { return createExportedCustomDirectEventTypeConstants();