Skip to content

Commit ca0d9a5

Browse files
siepramdjastrzebski
siepra
and
mdjastrzebski
authored
ScrollView experiments (#1442)
* ScrollView experiments * FlatList experiments * Extend placeholders for scrollable components * Enhance experiments with onContentSizeChange * Add endReached event to FlatList experiment * SectionList experiments * Fix missing semicolon * refactor: cleanup code --------- Co-authored-by: Maciej Jastrzebski <mdjastrzebski@gmail.com>
1 parent b70c07d commit ca0d9a5

File tree

4 files changed

+272
-0
lines changed

4 files changed

+272
-0
lines changed

‎experiments-app/src/experiments.ts

+18
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { TextInputEventPropagation } from './screens/TextInputEventPropagation';
22
import { TextInputEvents } from './screens/TextInputEvents';
3+
import { ScrollViewEvents } from './screens/ScrollViewEvents';
4+
import { FlatListEvents } from './screens/FlatListEvents';
5+
import { SectionListEvents } from './screens/SectionListEvents';
36

47
export type Experiment = (typeof experiments)[number];
58

@@ -14,4 +17,19 @@ export const experiments = [
1417
title: 'TextInput Event Propagation',
1518
component: TextInputEventPropagation,
1619
},
20+
{
21+
key: 'scrollViewEvents',
22+
title: 'ScrollView Events',
23+
component: ScrollViewEvents,
24+
},
25+
{
26+
key: 'flatListEvents',
27+
title: 'FlatList Events',
28+
component: FlatListEvents,
29+
},
30+
{
31+
key: 'sectionListEvents',
32+
title: 'SectionList Events',
33+
component: SectionListEvents,
34+
},
1735
];

‎experiments-app/src/screens/FlatListEvents.tsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import * as React from 'react';
2+
import { FlatList, StyleSheet, Text, View } from 'react-native';
3+
import { buildEventLogger } from '../utils/helpers';
4+
5+
interface ItemData {
6+
id: string;
7+
title: string;
8+
}
9+
10+
const data: ItemData[] = [...new Array(25)].map((_, index) => ({
11+
id: `${index + 1}`,
12+
title: `Item ${index + 1}`,
13+
}));
14+
15+
const handleMomentumScrollBegin = buildEventLogger('momentumScrollBegin');
16+
const handleMomentumScrollEnd = buildEventLogger('momentumScrollEnd');
17+
const handleScroll = buildEventLogger('scroll');
18+
const handleScrollBeginDrag = buildEventLogger('scrollBeginDrag');
19+
const handleScrollEndDrag = buildEventLogger('scrollEndDrag');
20+
const handleScrollToTop = buildEventLogger('scrollToTop');
21+
22+
export function FlatListEvents() {
23+
const handleContentSizeChange = (w: number, h: number) => {
24+
console.log(`Event: contentSizeChange`, w, h);
25+
};
26+
27+
const handleEndReached = (info: { distanceFromEnd: number }) => {
28+
console.log(`Event: endReached`, info.distanceFromEnd);
29+
};
30+
31+
const renderItem = ({ item }: { item: ItemData }) => {
32+
return <Item item={item} />;
33+
};
34+
35+
return (
36+
<FlatList
37+
contentInsetAdjustmentBehavior="scrollableAxes"
38+
scrollEventThrottle={150}
39+
data={data}
40+
renderItem={renderItem}
41+
keyExtractor={(item) => item.id}
42+
onContentSizeChange={handleContentSizeChange}
43+
onMomentumScrollBegin={handleMomentumScrollBegin}
44+
onMomentumScrollEnd={handleMomentumScrollEnd}
45+
onScroll={handleScroll}
46+
onScrollBeginDrag={handleScrollBeginDrag}
47+
onScrollEndDrag={handleScrollEndDrag}
48+
onScrollToTop={handleScrollToTop}
49+
onEndReached={handleEndReached}
50+
/>
51+
);
52+
}
53+
54+
interface ItemProps {
55+
item: ItemData;
56+
}
57+
58+
const Item = ({ item }: ItemProps) => (
59+
<View style={styles.item}>
60+
<Text style={styles.title}>{item.title}</Text>
61+
</View>
62+
);
63+
64+
const styles = StyleSheet.create({
65+
item: {
66+
paddingVertical: 16,
67+
paddingHorizontal: 20,
68+
},
69+
title: {
70+
fontSize: 20,
71+
},
72+
});

‎experiments-app/src/screens/ScrollViewEvents.tsx

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import * as React from 'react';
2+
import { StyleSheet, Text, ScrollView } from 'react-native';
3+
import { buildEventLogger } from '../utils/helpers';
4+
5+
const handleMomentumScrollBegin = buildEventLogger('momentumScrollBegin');
6+
const handleMomentumScrollEnd = buildEventLogger('momentumScrollEnd');
7+
const handleScroll = buildEventLogger('scroll');
8+
const handleScrollBeginDrag = buildEventLogger('scrollBeginDrag');
9+
const handleScrollEndDrag = buildEventLogger('scrollEndDrag');
10+
const handleScrollToTop = buildEventLogger('scrollToTop');
11+
12+
export function ScrollViewEvents() {
13+
const handleContentSizeChange = (w: number, h: number) => {
14+
console.log(`Event: contentSizeChange`, w, h);
15+
};
16+
17+
return (
18+
<ScrollView
19+
contentInsetAdjustmentBehavior="scrollableAxes"
20+
scrollEventThrottle={150}
21+
onContentSizeChange={handleContentSizeChange}
22+
onMomentumScrollBegin={handleMomentumScrollBegin}
23+
onMomentumScrollEnd={handleMomentumScrollEnd}
24+
onScroll={handleScroll}
25+
onScrollBeginDrag={handleScrollBeginDrag}
26+
onScrollEndDrag={handleScrollEndDrag}
27+
onScrollToTop={handleScrollToTop}
28+
>
29+
<Text style={styles.text}>
30+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
31+
tempor incididunt ut labore et dolore magna aliqua. Gravida neque
32+
convallis a cras semper auctor neque. Ultrices in iaculis nunc sed augue
33+
lacus. Vulputate ut pharetra sit amet aliquam id. Eget sit amet tellus
34+
cras adipiscing enim. Velit aliquet sagittis id consectetur purus ut
35+
faucibus pulvinar.
36+
</Text>
37+
<Text style={styles.text}>
38+
Eget gravida cum sociis natoque penatibus. Nunc sed blandit libero
39+
volutpat sed cras. Aliquet bibendum enim facilisis gravida neque
40+
convallis a cras. Euismod nisi porta lorem mollis aliquam. Consequat
41+
mauris nunc congue nisi vitae suscipit tellus. Mauris pellentesque
42+
pulvinar pellentesque habitant morbi tristique. Nulla aliquet enim
43+
tortor at auctor.
44+
</Text>
45+
<Text style={styles.text}>
46+
A condimentum vitae sapien pellentesque. Quis eleifend quam adipiscing
47+
vitae. Elit ut aliquam purus sit amet luctus venenatis. Id faucibus nisl
48+
tincidunt eget nullam non nisi est. Nunc non blandit massa enim nec dui
49+
nunc. Urna nec tincidunt praesent semper feugiat nibh. Malesuada fames
50+
ac turpis egestas maecenas. Viverra nibh cras pulvinar mattis nunc sed
51+
blandit.
52+
</Text>
53+
<Text style={styles.text}>
54+
Molestie nunc non blandit massa enim nec dui nunc. Velit laoreet id
55+
donec ultrices tincidunt arcu. Imperdiet nulla malesuada pellentesque
56+
elit eget. Id neque aliquam vestibulum morbi blandit cursus. Ut
57+
tristique et egestas quis. Nisl nunc mi ipsum faucibus vitae aliquet nec
58+
ullamcorper sit. Cursus mattis molestie a iaculis at erat.
59+
</Text>
60+
<Text style={styles.text}>
61+
Tincidunt arcu non sodales neque sodales ut etiam. Ultrices dui sapien
62+
eget mi proin sed. Metus vulputate eu scelerisque felis. In pellentesque
63+
massa placerat duis ultricies lacus sed turpis. Id leo in vitae turpis
64+
massa sed elementum.
65+
</Text>
66+
</ScrollView>
67+
);
68+
}
69+
70+
const styles = StyleSheet.create({
71+
text: {
72+
paddingHorizontal: 20,
73+
paddingTop: 20,
74+
fontSize: 24,
75+
},
76+
});

‎experiments-app/src/screens/SectionListEvents.tsx

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import * as React from 'react';
2+
import { StyleSheet, Text, View, SectionList } from 'react-native';
3+
import { buildEventLogger } from '../utils/helpers';
4+
5+
interface SectionData {
6+
title: string;
7+
data: string[];
8+
}
9+
10+
const sections: SectionData[] = [
11+
{
12+
title: 'Main dishes',
13+
data: [
14+
'Pizza',
15+
'Burger',
16+
'Risotto',
17+
'Pasta',
18+
'Fish',
19+
'Chicken',
20+
'Beef',
21+
'Dumplings',
22+
],
23+
},
24+
{
25+
title: 'Sides',
26+
data: [
27+
'French Fries',
28+
'Onion Rings',
29+
'Fried Shrimps',
30+
'Potatoes',
31+
'Salad',
32+
'Garlic Bread',
33+
],
34+
},
35+
{
36+
title: 'Drinks',
37+
data: ['Water', 'Coke', 'Beer', 'Tea', 'Coffee', 'Soda', 'Matcha'],
38+
},
39+
{
40+
title: 'Desserts',
41+
data: ['Cheese Cake', 'Ice Cream', 'Chocolate', 'Cookies', 'Fruits'],
42+
},
43+
];
44+
45+
const handleMomentumScrollBegin = buildEventLogger('momentumScrollBegin');
46+
const handleMomentumScrollEnd = buildEventLogger('momentumScrollEnd');
47+
const handleScroll = buildEventLogger('scroll');
48+
const handleScrollBeginDrag = buildEventLogger('scrollBeginDrag');
49+
const handleScrollEndDrag = buildEventLogger('scrollEndDrag');
50+
const handleScrollToTop = buildEventLogger('scrollToTop');
51+
52+
export function SectionListEvents() {
53+
const handleContentSizeChange = (w: number, h: number) => {
54+
console.log(`Event: contentSizeChange`, w, h);
55+
};
56+
57+
const handleEndReached = (info: { distanceFromEnd: number }) => {
58+
console.log(`Event: endReached`, info);
59+
};
60+
61+
const renderSectionHeader = ({ section }: { section: SectionData }) => (
62+
<Text style={styles.header}>{section.title}</Text>
63+
);
64+
65+
const renderItem = ({ item }: { item: string }) => (
66+
<View style={styles.item}>
67+
<Text style={styles.title}>{item}</Text>
68+
</View>
69+
);
70+
71+
return (
72+
<SectionList
73+
contentInsetAdjustmentBehavior="scrollableAxes"
74+
scrollEventThrottle={150}
75+
sections={sections}
76+
keyExtractor={(item, index) => item + index}
77+
renderSectionHeader={renderSectionHeader}
78+
renderItem={renderItem}
79+
onContentSizeChange={handleContentSizeChange}
80+
onMomentumScrollBegin={handleMomentumScrollBegin}
81+
onMomentumScrollEnd={handleMomentumScrollEnd}
82+
onScroll={handleScroll}
83+
onScrollBeginDrag={handleScrollBeginDrag}
84+
onScrollEndDrag={handleScrollEndDrag}
85+
onScrollToTop={handleScrollToTop}
86+
onEndReached={handleEndReached}
87+
/>
88+
);
89+
}
90+
91+
const styles = StyleSheet.create({
92+
header: {
93+
paddingVertical: 8,
94+
paddingHorizontal: 16,
95+
backgroundColor: 'white',
96+
fontSize: 24,
97+
},
98+
item: {
99+
paddingVertical: 16,
100+
paddingHorizontal: 16,
101+
},
102+
103+
title: {
104+
fontSize: 20,
105+
},
106+
});

0 commit comments

Comments
 (0)