Skip to content

Commit 20c5e44

Browse files
mdjastrzebskimdjastrzebski
authored
chore: experiments app tweaks (#1416)
* chore: fix expo warnings * chore: log info about micro and macro tasks * chore: expo upgrade * refactor: simplify event handling * chore: remove invalid deps * chore: fix tsc
1 parent ca0d9a5 commit 20c5e44

File tree

10 files changed

+975
-1235
lines changed

10 files changed

+975
-1235
lines changed

‎experiments-app/package.json‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,16 @@
1414
"dependencies": {
1515
"@react-navigation/native": "^6.1.6",
1616
"@react-navigation/native-stack": "^6.9.12",
17-
"add": "^2.0.6",
18-
"expo": "~48.0.11",
19-
"expo-status-bar": "~1.4.4",
17+
"expo": "^49.0.0",
18+
"expo-status-bar": "~1.6.0",
2019
"react": "18.2.0",
21-
"react-native": "0.71.6",
22-
"react-native-safe-area-context": "4.5.0",
23-
"react-native-screens": "~3.20.0",
24-
"yarn": "^1.22.19"
20+
"react-native": "0.72.3",
21+
"react-native-safe-area-context": "4.6.3",
22+
"react-native-screens": "~3.22.0"
2523
},
2624
"devDependencies": {
2725
"@babel/core": "^7.20.0",
28-
"@types/react": "~18.0.14",
29-
"typescript": "^4.9.4"
26+
"@types/react": "~18.2.14",
27+
"typescript": "^5.1.3"
3028
}
3129
}

‎experiments-app/src/MainScreen.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ function ListItem({ item }: ListItemProps) {
2828
const navigation = useNavigation();
2929

3030
const handlePress = () => {
31+
// @ts-expect-error missing navigation typing
3132
navigation.navigate(item.key);
3233
};
3334

‎experiments-app/src/experiments.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,27 @@ export type Experiment = (typeof experiments)[number];
88

99
export const experiments = [
1010
{
11-
key: 'textInputEvents',
11+
key: 'TextInputEvents',
1212
title: 'TextInput Events',
1313
component: TextInputEvents,
1414
},
1515
{
16-
key: 'textInputEventPropagation',
16+
key: 'TextInputEventPropagation',
1717
title: 'TextInput Event Propagation',
1818
component: TextInputEventPropagation,
1919
},
2020
{
21-
key: 'scrollViewEvents',
21+
key: 'ScrollViewEvents',
2222
title: 'ScrollView Events',
2323
component: ScrollViewEvents,
2424
},
2525
{
26-
key: 'flatListEvents',
26+
key: 'FlatListEvents',
2727
title: 'FlatList Events',
2828
component: FlatListEvents,
2929
},
3030
{
31-
key: 'sectionListEvents',
31+
key: 'SectionListEvents',
3232
title: 'SectionList Events',
3333
component: SectionListEvents,
3434
},

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

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { FlatList, StyleSheet, Text, View } from 'react-native';
3-
import { buildEventLogger } from '../utils/helpers';
3+
import { customEventLogger, nativeEventLogger } from '../utils/helpers';
44

55
interface ItemData {
66
id: string;
@@ -12,41 +12,26 @@ const data: ItemData[] = [...new Array(25)].map((_, index) => ({
1212
title: `Item ${index + 1}`,
1313
}));
1414

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-
2215
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-
3116
const renderItem = ({ item }: { item: ItemData }) => {
3217
return <Item item={item} />;
3318
};
3419

3520
return (
3621
<FlatList
37-
contentInsetAdjustmentBehavior="scrollableAxes"
38-
scrollEventThrottle={150}
3922
data={data}
4023
renderItem={renderItem}
4124
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}
25+
contentInsetAdjustmentBehavior="scrollableAxes"
26+
scrollEventThrottle={150}
27+
onScroll={nativeEventLogger('scroll')}
28+
onScrollBeginDrag={nativeEventLogger('scrollBeginDrag')}
29+
onScrollEndDrag={nativeEventLogger('scrollEndDrag')}
30+
onMomentumScrollBegin={nativeEventLogger('momentumScrollBegin')}
31+
onMomentumScrollEnd={nativeEventLogger('momentumScrollEnd')}
32+
onScrollToTop={nativeEventLogger('scrollToTop')}
33+
onEndReached={customEventLogger('endReached')}
34+
onContentSizeChange={customEventLogger('contentSizeChange')}
5035
/>
5136
);
5237
}

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

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,19 @@
11
import * as React from 'react';
22
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');
3+
import { customEventLogger, nativeEventLogger } from '../utils/helpers';
114

125
export function ScrollViewEvents() {
13-
const handleContentSizeChange = (w: number, h: number) => {
14-
console.log(`Event: contentSizeChange`, w, h);
15-
};
16-
176
return (
187
<ScrollView
198
contentInsetAdjustmentBehavior="scrollableAxes"
209
scrollEventThrottle={150}
21-
onContentSizeChange={handleContentSizeChange}
22-
onMomentumScrollBegin={handleMomentumScrollBegin}
23-
onMomentumScrollEnd={handleMomentumScrollEnd}
24-
onScroll={handleScroll}
25-
onScrollBeginDrag={handleScrollBeginDrag}
26-
onScrollEndDrag={handleScrollEndDrag}
27-
onScrollToTop={handleScrollToTop}
10+
onScroll={nativeEventLogger('scroll')}
11+
onScrollBeginDrag={nativeEventLogger('scrollBeginDrag')}
12+
onScrollEndDrag={nativeEventLogger('scrollEndDrag')}
13+
onMomentumScrollBegin={nativeEventLogger('momentumScrollBegin')}
14+
onMomentumScrollEnd={nativeEventLogger('momentumScrollEnd')}
15+
onScrollToTop={nativeEventLogger('scrollToTop')}
16+
onContentSizeChange={customEventLogger('contentSizeChange')}
2817
>
2918
<Text style={styles.text}>
3019
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

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

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { StyleSheet, Text, View, SectionList } from 'react-native';
3-
import { buildEventLogger } from '../utils/helpers';
3+
import { customEventLogger, nativeEventLogger } from '../utils/helpers';
44

55
interface SectionData {
66
title: string;
@@ -42,22 +42,7 @@ const sections: SectionData[] = [
4242
},
4343
];
4444

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-
5245
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-
6146
const renderSectionHeader = ({ section }: { section: SectionData }) => (
6247
<Text style={styles.header}>{section.title}</Text>
6348
);
@@ -70,20 +55,20 @@ export function SectionListEvents() {
7055

7156
return (
7257
<SectionList
73-
contentInsetAdjustmentBehavior="scrollableAxes"
74-
scrollEventThrottle={150}
7558
sections={sections}
7659
keyExtractor={(item, index) => item + index}
7760
renderSectionHeader={renderSectionHeader}
7861
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}
62+
contentInsetAdjustmentBehavior="scrollableAxes"
63+
scrollEventThrottle={150}
64+
onScroll={nativeEventLogger('scroll')}
65+
onScrollBeginDrag={nativeEventLogger('scrollBeginDrag')}
66+
onScrollEndDrag={nativeEventLogger('scrollEndDrag')}
67+
onMomentumScrollBegin={nativeEventLogger('momentumScrollBegin')}
68+
onMomentumScrollEnd={nativeEventLogger('momentumScrollEnd')}
69+
onScrollToTop={nativeEventLogger('scrollToTop')}
70+
onEndReached={customEventLogger('endReached')}
71+
onContentSizeChange={customEventLogger('contentSizeChange')}
8772
/>
8873
);
8974
}

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

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
11
import * as React from 'react';
22
import { StyleSheet, SafeAreaView, TextInput, Pressable } from 'react-native';
3-
import { buildEventLogger } from '../utils/helpers';
4-
5-
const handlePressIn = buildEventLogger('TextInput.pressIn');
6-
const handlePressOut = buildEventLogger('TextInput.pressOut');
7-
const handleFocus = buildEventLogger('TextInput.focus');
8-
const handleBlur = buildEventLogger('TextInput.blur');
9-
const handleChange = buildEventLogger('TextInput.change');
10-
const handleSubmitEditing = buildEventLogger('TextInput.submitEditing');
11-
12-
const handlePressablePress = buildEventLogger('Pressable.press');
3+
import { nativeEventLogger } from '../utils/helpers';
134

145
export function TextInputEventPropagation() {
156
const [value, setValue] = React.useState('');
@@ -21,18 +12,15 @@ export function TextInputEventPropagation() {
2112

2213
return (
2314
<SafeAreaView style={styles.container}>
24-
<Pressable onPress={handlePressablePress}>
15+
<Pressable onPress={nativeEventLogger('Pressable.press')}>
2516
<TextInput
2617
style={styles.textInput}
2718
value={value}
2819
editable={true}
2920
onChangeText={handleChangeText}
30-
onPressIn={handlePressIn}
31-
onPressOut={handlePressOut}
32-
onFocus={handleFocus}
33-
onBlur={handleBlur}
34-
onChange={handleChange}
35-
onSubmitEditing={handleSubmitEditing}
21+
onChange={nativeEventLogger('TextInput.change')}
22+
onPressIn={nativeEventLogger('TextInput.pressIn')}
23+
onPressOut={nativeEventLogger('TextInput.pressOut')}
3624
/>
3725
</Pressable>
3826
</SafeAreaView>

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

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
import * as React from 'react';
22
import { StyleSheet, SafeAreaView, TextInput } from 'react-native';
3-
import { buildEventLogger } from '../utils/helpers';
4-
5-
const handlePressIn = buildEventLogger('pressIn');
6-
const handlePressOut = buildEventLogger('pressOut');
7-
const handleFocus = buildEventLogger('focus');
8-
const handleBlur = buildEventLogger('blur');
9-
const handleChange = buildEventLogger('change');
10-
const handleEndEditing = buildEventLogger('endEditing');
11-
const handleSubmitEditing = buildEventLogger('submitEditing');
12-
const handleKeyPress = buildEventLogger('keyPress');
13-
const handleTextInput = buildEventLogger('textInput');
14-
const handleSelectionChange = buildEventLogger('selectionChange');
15-
const handleContentSizeChange = buildEventLogger('contentSizeChange');
3+
import { nativeEventLogger, logEvent } from '../utils/helpers';
164

175
export function TextInputEvents() {
186
const [value, setValue] = React.useState('');
197

208
const handleChangeText = (value: string) => {
219
setValue(value);
22-
console.log(`Event: changeText`, value);
10+
logEvent('changeText', value);
2311
};
2412

2513
return (
@@ -29,17 +17,17 @@ export function TextInputEvents() {
2917
value={value}
3018
editable={true}
3119
onChangeText={handleChangeText}
32-
onPressIn={handlePressIn}
33-
onPressOut={handlePressOut}
34-
onFocus={handleFocus}
35-
onBlur={handleBlur}
36-
onChange={handleChange}
37-
onEndEditing={handleEndEditing}
38-
onSubmitEditing={handleSubmitEditing}
39-
onKeyPress={handleKeyPress}
40-
onTextInput={handleTextInput}
41-
onSelectionChange={handleSelectionChange}
42-
onContentSizeChange={handleContentSizeChange}
20+
onChange={nativeEventLogger('change')}
21+
onKeyPress={nativeEventLogger('keyPress')}
22+
onEndEditing={nativeEventLogger('endEditing')}
23+
onSubmitEditing={nativeEventLogger('submitEditing')}
24+
onTextInput={nativeEventLogger('textInput')}
25+
onSelectionChange={nativeEventLogger('selectionChange')}
26+
onContentSizeChange={nativeEventLogger('contentSizeChange')}
27+
onFocus={nativeEventLogger('focus')}
28+
onBlur={nativeEventLogger('blur')}
29+
onPressIn={nativeEventLogger('pressIn')}
30+
onPressOut={nativeEventLogger('pressOut')}
4331
/>
4432
</SafeAreaView>
4533
);

‎experiments-app/src/utils/helpers.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
11
import { NativeSyntheticEvent } from 'react-native/types';
22

3-
export function buildEventLogger(name: string) {
3+
export function nativeEventLogger(name: string) {
44
return (event: NativeSyntheticEvent<unknown>) => {
5-
const eventData = event?.nativeEvent ?? event;
6-
console.log(`Event: ${name}`, eventData);
5+
logEvent(name, event?.nativeEvent);
76
};
87
}
8+
9+
export function customEventLogger(name: string) {
10+
return (...args: unknown[]) => {
11+
logEvent(name, ...args);
12+
};
13+
}
14+
15+
export function logEvent(name: string, ...args: unknown[]) {
16+
// eslint-disable-next-line no-console
17+
console.log(`Event: ${name}`, ...args);
18+
}

0 commit comments

Comments
 (0)