Skip to content

Commit

Permalink
Implement fading edges for Scrollview and it's dependent FlatList
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
André Krüger authored and André Krüger committed Aug 25, 2019
1 parent 08daad4 commit de33eb8
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 1 deletion.
12 changes: 12 additions & 0 deletions Libraries/Components/ScrollView/ScrollView.js
Original file line number Diff line number Diff line change
Expand Up @@ -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<{|
Expand Down
4 changes: 4 additions & 0 deletions Libraries/Lists/FlatList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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> &
Expand Down
26 changes: 25 additions & 1 deletion RNTester/js/examples/FlatList/FlatListExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -51,6 +58,7 @@ type State = {|
virtualized: boolean,
empty: boolean,
useFlatListItemComponent: boolean,
fadingEdgeLength: number,
|};

class FlatListExample extends React.PureComponent<Props, State> {
Expand All @@ -65,6 +73,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
virtualized: true,
empty: false,
useFlatListItemComponent: false,
fadingEdgeLength: 0,
};

_onChangeFilterText = filterText => {
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -276,4 +276,12 @@ 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);
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,14 @@ 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);
}
}

@Override
public @Nullable Map<String, Object> getExportedCustomDirectEventTypeConstants() {
return createExportedCustomDirectEventTypeConstants();
Expand Down

0 comments on commit de33eb8

Please sign in to comment.