diff --git a/Examples/UIExplorer/js/FlatListExample.js b/Examples/UIExplorer/js/FlatListExample.js
index 6ff92e6dcdf..080cf6c3586 100644
--- a/Examples/UIExplorer/js/FlatListExample.js
+++ b/Examples/UIExplorer/js/FlatListExample.js
@@ -42,6 +42,7 @@ const {
ItemComponent,
PlainInput,
SeparatorComponent,
+ Spindicator,
genItemData,
getItemLayout,
pressItem,
@@ -120,15 +121,7 @@ class FlatListExample extends React.PureComponent {
{renderSmallSwitchOption(this, 'fixedHeight')}
{renderSmallSwitchOption(this, 'logViewable')}
{renderSmallSwitchOption(this, 'debug')}
-
+
@@ -222,12 +215,6 @@ const styles = StyleSheet.create({
searchRow: {
paddingHorizontal: 10,
},
- spindicator: {
- marginLeft: 'auto',
- width: 2,
- height: 16,
- backgroundColor: 'darkgray',
- },
});
module.exports = FlatListExample;
diff --git a/Examples/UIExplorer/js/ListExampleShared.js b/Examples/UIExplorer/js/ListExampleShared.js
index d4a870cdd87..abaf10d9675 100644
--- a/Examples/UIExplorer/js/ListExampleShared.js
+++ b/Examples/UIExplorer/js/ListExampleShared.js
@@ -26,6 +26,7 @@
const React = require('react');
const ReactNative = require('react-native');
const {
+ Animated,
Image,
Platform,
TouchableHighlight,
@@ -129,6 +130,22 @@ class SeparatorComponent extends React.PureComponent {
}
}
+class Spindicator extends React.PureComponent {
+ render() {
+ return (
+
+ );
+ }
+}
+
const THUMB_URLS = [
require('./Thumbnails/like.png'),
require('./Thumbnails/dislike.png'),
@@ -266,6 +283,13 @@ const styles = StyleSheet.create({
width: 64,
height: 64,
},
+ spindicator: {
+ marginLeft: 'auto',
+ marginTop: 8,
+ width: 2,
+ height: 16,
+ backgroundColor: 'darkgray',
+ },
stackedText: {
padding: 4,
fontSize: 18,
@@ -281,6 +305,7 @@ module.exports = {
ItemComponent,
PlainInput,
SeparatorComponent,
+ Spindicator,
genItemData,
getItemLayout,
pressItem,
diff --git a/Examples/UIExplorer/js/SectionListExample.js b/Examples/UIExplorer/js/SectionListExample.js
index 08ed9572d89..6a2a36f91a1 100644
--- a/Examples/UIExplorer/js/SectionListExample.js
+++ b/Examples/UIExplorer/js/SectionListExample.js
@@ -26,6 +26,7 @@
const React = require('react');
const ReactNative = require('react-native');
const {
+ Animated,
SectionList,
StyleSheet,
Text,
@@ -42,12 +43,15 @@ const {
ItemComponent,
PlainInput,
SeparatorComponent,
+ Spindicator,
genItemData,
pressItem,
renderSmallSwitchOption,
renderStackedItem,
} = require('./ListExampleShared');
+const AnimatedSectionList = Animated.createAnimatedComponent(SectionList);
+
const VIEWABILITY_CONFIG = {
minimumViewTime: 3000,
viewAreaCoveragePercentThreshold: 100,
@@ -79,6 +83,13 @@ class SectionListExample extends React.PureComponent {
logViewable: false,
virtualized: true,
};
+
+ _scrollPos = new Animated.Value(0);
+ _scrollSinkY = Animated.event(
+ [{nativeEvent: { contentOffset: { y: this._scrollPos } }}],
+ {useNativeDriver: true},
+ );
+
render() {
const filterRegex = new RegExp(String(this.state.filterText), 'i');
const filter = (item) => (
@@ -100,10 +111,11 @@ class SectionListExample extends React.PureComponent {
{renderSmallSwitchOption(this, 'virtualized')}
{renderSmallSwitchOption(this, 'logViewable')}
+
-
@@ -114,6 +126,7 @@ class SectionListExample extends React.PureComponent {
}
enableVirtualization={this.state.virtualized}
onRefresh={() => alert('onRefresh: nothing to refresh :P')}
+ onScroll={this._scrollSinkY}
onViewableItemsChanged={this._onViewableItemsChanged}
refreshing={false}
renderItem={this._renderItemComponent}