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