-
Notifications
You must be signed in to change notification settings - Fork 5
/
FlatList.js
106 lines (92 loc) · 2.83 KB
/
FlatList.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { FlatList as List, Dimensions, Animated, Text } from 'react-native';
import _ from 'lodash';
// Native driver for scroll events
// See: https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html
const AnimatedFlatList = Animated.createAnimatedComponent(List);
/* Component ==================================================================== */
class FlatList extends PureComponent {
static propTypes = {
...List.propTypes,
};
constructor(props) {
super(props);
this._flatlist = undefined;
this._scrollPos = new Animated.Value(0);
this.state = {
_flatlist: undefined,
};
// Native driver for scroll events
const scrollEventConfig = {
listener: this._onScroll,
useNativeDriver: true,
};
this._onScrollHandler = Animated.event(
[{ nativeEvent: { contentOffset: { y: this._scrollPos } } }],
scrollEventConfig
);
}
setNativeProps(nativeProps) {
this._flatlist.setNativeProps(nativeProps);
}
applyPropsToParallaxImages = function(children, props) {
if (Array.isArray(children)) {
return React.Children.map(children, child => {
if (Array.isArray(child)) {
return applyPropsToParallaxImages(child, props);
}
if (child.type.displayName === 'ParallaxImage') {
return React.cloneElement(child, props);
}
return child;
});
}
if (children.type.displayName === 'ParallaxImage') {
return React.cloneElement(children, props);
}
return children;
};
render() {
var { ref, children, onScroll, renderItem, ...props } = this.props;
var { _flatlist } = this.state;
var handleScroll = onScroll
? event => {
this._onScrollHandler(event);
onScroll(event);
}
: this._onScrollHandler;
return (
<AnimatedFlatList
ref={list => {
this._flatlist = list;
this.setState({ _flatlist: list });
}}
scrollEventThrottle={16}
onScroll={handleScroll}
renderItem={item => {
const parallaxProps = {
scrollPosition: this._scrollPos,
flatlistRef: this._flatlist,
};
const renderedItem = React.cloneElement(
renderItem(item),
parallaxProps
);
const parallaxedItem = React.cloneElement(
renderedItem,
parallaxProps,
this.applyPropsToParallaxImages(
renderedItem.props.children,
parallaxProps
)
);
return parallaxedItem;
}}
{...props}
/>
);
}
}
/* Export Component ==================================================================== */
export default FlatList;