Skip to content
Permalink
Browse files
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: D17080676

Pulled By: TheSavior

fbshipit-source-id: 91df629c17052d43c99145672e9084e1379a4113
  • Loading branch information
André Krüger authored and facebook-github-bot committed Aug 28, 2019
1 parent c9ff99f commit 51aacd5241c4b4c0b9b1e1b8f9dabac45e5b5291
Showing 5 changed files with 63 additions and 1 deletion.
@@ -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<{|
@@ -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> &
@@ -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}
@@ -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);
}
}
}
@@ -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();

0 comments on commit 51aacd5

Please sign in to comment.