From e9aa22ee26990ff39fcc7aa6f75e9956d090bcb5 Mon Sep 17 00:00:00 2001 From: Wiktor Date: Mon, 7 Aug 2023 19:01:16 +0200 Subject: [PATCH 1/8] ScrollView experiments --- experiments-app/src/experiments.ts | 6 ++ .../src/screens/ScrollViewEvents.tsx | 56 +++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 experiments-app/src/screens/ScrollViewEvents.tsx diff --git a/experiments-app/src/experiments.ts b/experiments-app/src/experiments.ts index 1e014831a..24fd49f83 100644 --- a/experiments-app/src/experiments.ts +++ b/experiments-app/src/experiments.ts @@ -1,5 +1,6 @@ import { TextInputEventPropagation } from './screens/TextInputEventPropagation'; import { TextInputEvents } from './screens/TextInputEvents'; +import { ScrollViewEvents } from './screens/ScrollViewEvents'; export type Experiment = (typeof experiments)[number]; @@ -14,4 +15,9 @@ export const experiments = [ title: 'TextInput Event Propagation', component: TextInputEventPropagation, }, + { + key: 'scrollViewEvents', + title: 'ScrollView Events', + component: ScrollViewEvents, + }, ]; diff --git a/experiments-app/src/screens/ScrollViewEvents.tsx b/experiments-app/src/screens/ScrollViewEvents.tsx new file mode 100644 index 000000000..3e0339bbe --- /dev/null +++ b/experiments-app/src/screens/ScrollViewEvents.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; +import { + StyleSheet, + Text, + SafeAreaView, + ScrollView, + StatusBar, +} from 'react-native'; +import { buildEventLogger } from '../utils/helpers'; + +const handleOnMomentumScrollBegin = buildEventLogger('onMomentumScrollBegin'); +const handleOnMomentumScrollEnd = buildEventLogger('onMomentumScrollEnd'); +const handleOnScroll = buildEventLogger('onScroll'); +const handleOnScrollBeginDrag = buildEventLogger('onScrollBeginDrag'); +const handleOnScrollEndDrag = buildEventLogger('onScrollEndDrag'); +const handleOnScrollToTop = buildEventLogger('onScrollToTop'); + +export function ScrollViewEvents() { + return ( + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingTop: StatusBar.currentHeight, + }, + scrollView: { + backgroundColor: 'pink', + marginHorizontal: 20, + }, + text: { + fontSize: 42, + }, +}); From b6dc60aed5e86b5a9a8b7bde5d79afd67fff0316 Mon Sep 17 00:00:00 2001 From: Wiktor Date: Mon, 7 Aug 2023 19:35:34 +0200 Subject: [PATCH 2/8] FlatList experiments --- experiments-app/src/experiments.ts | 6 + .../src/screens/FlatListEvents.tsx | 117 ++++++++++++++++++ 2 files changed, 123 insertions(+) create mode 100644 experiments-app/src/screens/FlatListEvents.tsx diff --git a/experiments-app/src/experiments.ts b/experiments-app/src/experiments.ts index 24fd49f83..f67b80509 100644 --- a/experiments-app/src/experiments.ts +++ b/experiments-app/src/experiments.ts @@ -1,6 +1,7 @@ import { TextInputEventPropagation } from './screens/TextInputEventPropagation'; import { TextInputEvents } from './screens/TextInputEvents'; import { ScrollViewEvents } from './screens/ScrollViewEvents'; +import { FlatListEvents } from './screens/FlatListEvents'; export type Experiment = (typeof experiments)[number]; @@ -20,4 +21,9 @@ export const experiments = [ title: 'ScrollView Events', component: ScrollViewEvents, }, + { + key: 'flatListEvents', + title: 'FlatList Events', + component: FlatListEvents, + }, ]; diff --git a/experiments-app/src/screens/FlatListEvents.tsx b/experiments-app/src/screens/FlatListEvents.tsx new file mode 100644 index 000000000..ce3c8b61b --- /dev/null +++ b/experiments-app/src/screens/FlatListEvents.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import { + FlatList, + SafeAreaView, + StatusBar, + StyleSheet, + Text, + View, +} from 'react-native'; +import { buildEventLogger } from '../utils/helpers'; + +type ItemData = { + id: string; + title: string; +}; + +type ItemProps = { + item: ItemData; +}; + +const DATA: ItemData[] = [ + { + id: '0', + title: 'First Item', + }, + { + id: '1', + title: 'Second Item', + }, + { + id: '2', + title: 'Third Item', + }, + { + id: '3', + title: 'Fourth Item', + }, + { + id: '4', + title: 'Fifth Item', + }, + { + id: '5', + title: 'Sixth Item', + }, + { + id: '6', + title: 'Seventh Item', + }, + { + id: '7', + title: 'Eighth Item', + }, + { + id: '8', + title: 'Ninth Item', + }, + { + id: '9', + title: 'Tenth Item', + }, + { + id: '10', + title: 'Eleventh Item', + }, +]; + +const Item = ({ item }: ItemProps) => ( + + {item.title} + +); + +const handleOnMomentumScrollBegin = buildEventLogger('onMomentumScrollBegin'); +const handleOnMomentumScrollEnd = buildEventLogger('onMomentumScrollEnd'); +const handleOnScroll = buildEventLogger('onScroll'); +const handleOnScrollBeginDrag = buildEventLogger('onScrollBeginDrag'); +const handleOnScrollEndDrag = buildEventLogger('onScrollEndDrag'); +const handleOnScrollToTop = buildEventLogger('onScrollToTop'); + +export function FlatListEvents() { + const renderItem = ({ item }: { item: ItemData }) => { + return ; + }; + + return ( + + item.id} + onMomentumScrollBegin={handleOnMomentumScrollBegin} + onMomentumScrollEnd={handleOnMomentumScrollEnd} + onScroll={handleOnScroll} + onScrollBeginDrag={handleOnScrollBeginDrag} + onScrollEndDrag={handleOnScrollEndDrag} + onScrollToTop={handleOnScrollToTop} + /> + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + marginTop: StatusBar.currentHeight || 0, + }, + item: { + padding: 20, + marginVertical: 8, + marginHorizontal: 16, + backgroundColor: 'pink', + }, + title: { + fontSize: 32, + }, +}); From d15bb5db59497bf6959d62753351e32f5acf7360 Mon Sep 17 00:00:00 2001 From: Wiktor Date: Mon, 7 Aug 2023 19:47:03 +0200 Subject: [PATCH 3/8] Extend placeholders for scrollable components --- .../src/screens/FlatListEvents.tsx | 59 ++++--------------- .../src/screens/ScrollViewEvents.tsx | 30 ++++++++-- 2 files changed, 36 insertions(+), 53 deletions(-) diff --git a/experiments-app/src/screens/FlatListEvents.tsx b/experiments-app/src/screens/FlatListEvents.tsx index ce3c8b61b..27701808d 100644 --- a/experiments-app/src/screens/FlatListEvents.tsx +++ b/experiments-app/src/screens/FlatListEvents.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import { FlatList, SafeAreaView, @@ -18,52 +18,17 @@ type ItemProps = { item: ItemData; }; -const DATA: ItemData[] = [ - { - id: '0', - title: 'First Item', - }, - { - id: '1', - title: 'Second Item', - }, - { - id: '2', - title: 'Third Item', - }, - { - id: '3', - title: 'Fourth Item', - }, - { - id: '4', - title: 'Fifth Item', - }, - { - id: '5', - title: 'Sixth Item', - }, - { - id: '6', - title: 'Seventh Item', - }, - { - id: '7', - title: 'Eighth Item', - }, - { - id: '8', - title: 'Ninth Item', - }, - { - id: '9', - title: 'Tenth Item', - }, - { - id: '10', - title: 'Eleventh Item', - }, -]; +const itemsAmount = 20; // Change this value to shrink/extend scroll length + +const DATA: ItemData[] = []; + +for (let i = 1; i <= itemsAmount; i++) { + const item = { + id: `${i}`, + title: `Item ${i}`, + }; + DATA.push(item); +} const Item = ({ item }: ItemProps) => ( diff --git a/experiments-app/src/screens/ScrollViewEvents.tsx b/experiments-app/src/screens/ScrollViewEvents.tsx index 3e0339bbe..2e4497087 100644 --- a/experiments-app/src/screens/ScrollViewEvents.tsx +++ b/experiments-app/src/screens/ScrollViewEvents.tsx @@ -29,12 +29,30 @@ export function ScrollViewEvents() { > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. + eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida + neque convallis a cras semper auctor neque. Ultrices in iaculis nunc + sed augue lacus. Vulputate ut pharetra sit amet aliquam id. Eget sit + amet tellus cras adipiscing enim. Velit aliquet sagittis id + consectetur purus ut faucibus pulvinar. Eget gravida cum sociis + natoque penatibus. Nunc sed blandit libero volutpat sed cras. Aliquet + bibendum enim facilisis gravida neque convallis a cras. Euismod nisi + porta lorem mollis aliquam. Consequat mauris nunc congue nisi vitae + suscipit tellus. Mauris pellentesque pulvinar pellentesque habitant + morbi tristique. Nulla aliquet enim tortor at auctor. A condimentum + vitae sapien pellentesque. Quis eleifend quam adipiscing vitae. Elit + ut aliquam purus sit amet luctus venenatis. Id faucibus nisl tincidunt + eget nullam non nisi est. Nunc non blandit massa enim nec dui nunc. + Urna nec tincidunt praesent semper feugiat nibh. Malesuada fames ac + turpis egestas maecenas. Viverra nibh cras pulvinar mattis nunc sed + blandit. Molestie nunc non blandit massa enim nec dui nunc. Velit + laoreet id donec ultrices tincidunt arcu. Imperdiet nulla malesuada + pellentesque elit eget. Id neque aliquam vestibulum morbi blandit + cursus. Ut tristique et egestas quis. Nisl nunc mi ipsum faucibus + vitae aliquet nec ullamcorper sit. Cursus mattis molestie a iaculis at + erat. Tincidunt arcu non sodales neque sodales ut etiam. Ultrices dui + sapien eget mi proin sed. Metus vulputate eu scelerisque felis. In + pellentesque massa placerat duis ultricies lacus sed turpis. Id leo in + vitae turpis massa sed elementum. From 46a044e3c86bafd48c34cbd9eda841332bc44caa Mon Sep 17 00:00:00 2001 From: Wiktor Date: Mon, 7 Aug 2023 19:53:58 +0200 Subject: [PATCH 4/8] Enhance experiments with onContentSizeChange --- experiments-app/src/screens/FlatListEvents.tsx | 5 +++++ experiments-app/src/screens/ScrollViewEvents.tsx | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/experiments-app/src/screens/FlatListEvents.tsx b/experiments-app/src/screens/FlatListEvents.tsx index 27701808d..9e2c689e5 100644 --- a/experiments-app/src/screens/FlatListEvents.tsx +++ b/experiments-app/src/screens/FlatListEvents.tsx @@ -44,6 +44,10 @@ const handleOnScrollEndDrag = buildEventLogger('onScrollEndDrag'); const handleOnScrollToTop = buildEventLogger('onScrollToTop'); export function FlatListEvents() { + const handleOnContentSizeChange = (w: number, h: number) => { + console.log(`Event: contentSizeChange`, w, h); + }; + const renderItem = ({ item }: { item: ItemData }) => { return ; }; @@ -54,6 +58,7 @@ export function FlatListEvents() { data={DATA} renderItem={renderItem} keyExtractor={(item) => item.id} + onContentSizeChange={handleOnContentSizeChange} onMomentumScrollBegin={handleOnMomentumScrollBegin} onMomentumScrollEnd={handleOnMomentumScrollEnd} onScroll={handleOnScroll} diff --git a/experiments-app/src/screens/ScrollViewEvents.tsx b/experiments-app/src/screens/ScrollViewEvents.tsx index 2e4497087..863b37b57 100644 --- a/experiments-app/src/screens/ScrollViewEvents.tsx +++ b/experiments-app/src/screens/ScrollViewEvents.tsx @@ -16,10 +16,15 @@ const handleOnScrollEndDrag = buildEventLogger('onScrollEndDrag'); const handleOnScrollToTop = buildEventLogger('onScrollToTop'); export function ScrollViewEvents() { + const handleOnContentSizeChange = (w: number, h: number) => { + console.log(`Event: contentSizeChange`, w, h); + }; + return ( Date: Mon, 7 Aug 2023 19:55:48 +0200 Subject: [PATCH 5/8] Add endReached event to FlatList experiment --- experiments-app/src/screens/FlatListEvents.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/experiments-app/src/screens/FlatListEvents.tsx b/experiments-app/src/screens/FlatListEvents.tsx index 9e2c689e5..ed0dcb8f8 100644 --- a/experiments-app/src/screens/FlatListEvents.tsx +++ b/experiments-app/src/screens/FlatListEvents.tsx @@ -48,6 +48,10 @@ export function FlatListEvents() { console.log(`Event: contentSizeChange`, w, h); }; + const handleOnEndReached = (info: { distanceFromEnd: number }) => { + console.log(`Event: endReached`, info.distanceFromEnd); + } + const renderItem = ({ item }: { item: ItemData }) => { return ; }; @@ -65,6 +69,7 @@ export function FlatListEvents() { onScrollBeginDrag={handleOnScrollBeginDrag} onScrollEndDrag={handleOnScrollEndDrag} onScrollToTop={handleOnScrollToTop} + onEndReached={handleOnEndReached} /> ); From 686cf635c12087ff04e3d517fdad055da5316b74 Mon Sep 17 00:00:00 2001 From: Wiktor Date: Mon, 7 Aug 2023 20:08:21 +0200 Subject: [PATCH 6/8] SectionList experiments --- experiments-app/src/experiments.ts | 6 + .../src/screens/SectionListEvents.tsx | 106 ++++++++++++++++++ 2 files changed, 112 insertions(+) create mode 100644 experiments-app/src/screens/SectionListEvents.tsx diff --git a/experiments-app/src/experiments.ts b/experiments-app/src/experiments.ts index f67b80509..ef75b6083 100644 --- a/experiments-app/src/experiments.ts +++ b/experiments-app/src/experiments.ts @@ -2,6 +2,7 @@ import { TextInputEventPropagation } from './screens/TextInputEventPropagation'; import { TextInputEvents } from './screens/TextInputEvents'; import { ScrollViewEvents } from './screens/ScrollViewEvents'; import { FlatListEvents } from './screens/FlatListEvents'; +import { SectionListEvents } from './screens/SectionListEvents'; export type Experiment = (typeof experiments)[number]; @@ -26,4 +27,9 @@ export const experiments = [ title: 'FlatList Events', component: FlatListEvents, }, + { + key: 'sectionListEvents', + title: 'SectionList Events', + component: SectionListEvents, + }, ]; diff --git a/experiments-app/src/screens/SectionListEvents.tsx b/experiments-app/src/screens/SectionListEvents.tsx new file mode 100644 index 000000000..17a3add9d --- /dev/null +++ b/experiments-app/src/screens/SectionListEvents.tsx @@ -0,0 +1,106 @@ +import * as React from 'react'; +import { + StyleSheet, + Text, + View, + SafeAreaView, + SectionList, + StatusBar, +} from 'react-native'; +import { buildEventLogger } from '../utils/helpers'; + +const DATA = [ + { + title: 'Main dishes', + data: [ + 'Pizza', + 'Burger', + 'Risotto', + 'Pasta', + 'Fish', + 'Chicken', + 'Beef', + 'Dumplings', + ], + }, + { + title: 'Sides', + data: [ + 'French Fries', + 'Onion Rings', + 'Fried Shrimps', + 'Potatoes', + 'Salad', + 'Garlic Bread', + ], + }, + { + title: 'Drinks', + data: ['Water', 'Coke', 'Beer', 'Tea', 'Coffee', 'Soda', 'Matcha'], + }, + { + title: 'Desserts', + data: ['Cheese Cake', 'Ice Cream', 'Chocolate', 'Cookies', 'Fruits'], + }, +]; + +const handleOnMomentumScrollBegin = buildEventLogger('onMomentumScrollBegin'); +const handleOnMomentumScrollEnd = buildEventLogger('onMomentumScrollEnd'); +const handleOnScroll = buildEventLogger('onScroll'); +const handleOnScrollBeginDrag = buildEventLogger('onScrollBeginDrag'); +const handleOnScrollEndDrag = buildEventLogger('onScrollEndDrag'); +const handleOnScrollToTop = buildEventLogger('onScrollToTop'); + +export function SectionListEvents() { + const handleOnContentSizeChange = (w: number, h: number) => { + console.log(`Event: contentSizeChange`, w, h); + }; + + const handleOnEndReached = (info: { distanceFromEnd: number }) => { + console.log(`Event: endReached`, info.distanceFromEnd); + }; + + return ( + + item + index} + renderItem={({ item }) => ( + + {item} + + )} + renderSectionHeader={({ section: { title } }) => ( + {title} + )} + onContentSizeChange={handleOnContentSizeChange} + onMomentumScrollBegin={handleOnMomentumScrollBegin} + onMomentumScrollEnd={handleOnMomentumScrollEnd} + onScroll={handleOnScroll} + onScrollBeginDrag={handleOnScrollBeginDrag} + onScrollEndDrag={handleOnScrollEndDrag} + onScrollToTop={handleOnScrollToTop} + onEndReached={handleOnEndReached} + /> + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingTop: StatusBar.currentHeight, + marginHorizontal: 16, + }, + item: { + backgroundColor: 'pink', + padding: 20, + marginVertical: 8, + }, + header: { + fontSize: 32, + }, + title: { + fontSize: 24, + }, +}); From 73363b72ec07896dfb27f165e67d5ee8416d1794 Mon Sep 17 00:00:00 2001 From: Wiktor Date: Mon, 7 Aug 2023 20:09:56 +0200 Subject: [PATCH 7/8] Fix missing semicolon --- experiments-app/src/screens/FlatListEvents.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/experiments-app/src/screens/FlatListEvents.tsx b/experiments-app/src/screens/FlatListEvents.tsx index ed0dcb8f8..0092e9083 100644 --- a/experiments-app/src/screens/FlatListEvents.tsx +++ b/experiments-app/src/screens/FlatListEvents.tsx @@ -50,7 +50,7 @@ export function FlatListEvents() { const handleOnEndReached = (info: { distanceFromEnd: number }) => { console.log(`Event: endReached`, info.distanceFromEnd); - } + }; const renderItem = ({ item }: { item: ItemData }) => { return ; From f4303d5c13f61d87fdbfa46deee79d86a1a3509b Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Mon, 7 Aug 2023 23:12:07 +0200 Subject: [PATCH 8/8] refactor: cleanup code --- .../src/screens/FlatListEvents.tsx | 104 ++++++--------- .../src/screens/ScrollViewEvents.tsx | 123 +++++++++--------- .../src/screens/SectionListEvents.tsx | 102 +++++++-------- 3 files changed, 153 insertions(+), 176 deletions(-) diff --git a/experiments-app/src/screens/FlatListEvents.tsx b/experiments-app/src/screens/FlatListEvents.tsx index 0092e9083..94806e9ba 100644 --- a/experiments-app/src/screens/FlatListEvents.tsx +++ b/experiments-app/src/screens/FlatListEvents.tsx @@ -1,54 +1,30 @@ import * as React from 'react'; -import { - FlatList, - SafeAreaView, - StatusBar, - StyleSheet, - Text, - View, -} from 'react-native'; +import { FlatList, StyleSheet, Text, View } from 'react-native'; import { buildEventLogger } from '../utils/helpers'; -type ItemData = { +interface ItemData { id: string; title: string; -}; - -type ItemProps = { - item: ItemData; -}; - -const itemsAmount = 20; // Change this value to shrink/extend scroll length - -const DATA: ItemData[] = []; - -for (let i = 1; i <= itemsAmount; i++) { - const item = { - id: `${i}`, - title: `Item ${i}`, - }; - DATA.push(item); } -const Item = ({ item }: ItemProps) => ( - - {item.title} - -); +const data: ItemData[] = [...new Array(25)].map((_, index) => ({ + id: `${index + 1}`, + title: `Item ${index + 1}`, +})); -const handleOnMomentumScrollBegin = buildEventLogger('onMomentumScrollBegin'); -const handleOnMomentumScrollEnd = buildEventLogger('onMomentumScrollEnd'); -const handleOnScroll = buildEventLogger('onScroll'); -const handleOnScrollBeginDrag = buildEventLogger('onScrollBeginDrag'); -const handleOnScrollEndDrag = buildEventLogger('onScrollEndDrag'); -const handleOnScrollToTop = buildEventLogger('onScrollToTop'); +const handleMomentumScrollBegin = buildEventLogger('momentumScrollBegin'); +const handleMomentumScrollEnd = buildEventLogger('momentumScrollEnd'); +const handleScroll = buildEventLogger('scroll'); +const handleScrollBeginDrag = buildEventLogger('scrollBeginDrag'); +const handleScrollEndDrag = buildEventLogger('scrollEndDrag'); +const handleScrollToTop = buildEventLogger('scrollToTop'); export function FlatListEvents() { - const handleOnContentSizeChange = (w: number, h: number) => { + const handleContentSizeChange = (w: number, h: number) => { console.log(`Event: contentSizeChange`, w, h); }; - const handleOnEndReached = (info: { distanceFromEnd: number }) => { + const handleEndReached = (info: { distanceFromEnd: number }) => { console.log(`Event: endReached`, info.distanceFromEnd); }; @@ -57,36 +33,40 @@ export function FlatListEvents() { }; return ( - - item.id} - onContentSizeChange={handleOnContentSizeChange} - onMomentumScrollBegin={handleOnMomentumScrollBegin} - onMomentumScrollEnd={handleOnMomentumScrollEnd} - onScroll={handleOnScroll} - onScrollBeginDrag={handleOnScrollBeginDrag} - onScrollEndDrag={handleOnScrollEndDrag} - onScrollToTop={handleOnScrollToTop} - onEndReached={handleOnEndReached} - /> - + item.id} + onContentSizeChange={handleContentSizeChange} + onMomentumScrollBegin={handleMomentumScrollBegin} + onMomentumScrollEnd={handleMomentumScrollEnd} + onScroll={handleScroll} + onScrollBeginDrag={handleScrollBeginDrag} + onScrollEndDrag={handleScrollEndDrag} + onScrollToTop={handleScrollToTop} + onEndReached={handleEndReached} + /> ); } +interface ItemProps { + item: ItemData; +} + +const Item = ({ item }: ItemProps) => ( + + {item.title} + +); + const styles = StyleSheet.create({ - container: { - flex: 1, - marginTop: StatusBar.currentHeight || 0, - }, item: { - padding: 20, - marginVertical: 8, - marginHorizontal: 16, - backgroundColor: 'pink', + paddingVertical: 16, + paddingHorizontal: 20, }, title: { - fontSize: 32, + fontSize: 20, }, }); diff --git a/experiments-app/src/screens/ScrollViewEvents.tsx b/experiments-app/src/screens/ScrollViewEvents.tsx index 863b37b57..dcdee5dae 100644 --- a/experiments-app/src/screens/ScrollViewEvents.tsx +++ b/experiments-app/src/screens/ScrollViewEvents.tsx @@ -1,79 +1,76 @@ import * as React from 'react'; -import { - StyleSheet, - Text, - SafeAreaView, - ScrollView, - StatusBar, -} from 'react-native'; +import { StyleSheet, Text, ScrollView } from 'react-native'; import { buildEventLogger } from '../utils/helpers'; -const handleOnMomentumScrollBegin = buildEventLogger('onMomentumScrollBegin'); -const handleOnMomentumScrollEnd = buildEventLogger('onMomentumScrollEnd'); -const handleOnScroll = buildEventLogger('onScroll'); -const handleOnScrollBeginDrag = buildEventLogger('onScrollBeginDrag'); -const handleOnScrollEndDrag = buildEventLogger('onScrollEndDrag'); -const handleOnScrollToTop = buildEventLogger('onScrollToTop'); +const handleMomentumScrollBegin = buildEventLogger('momentumScrollBegin'); +const handleMomentumScrollEnd = buildEventLogger('momentumScrollEnd'); +const handleScroll = buildEventLogger('scroll'); +const handleScrollBeginDrag = buildEventLogger('scrollBeginDrag'); +const handleScrollEndDrag = buildEventLogger('scrollEndDrag'); +const handleScrollToTop = buildEventLogger('scrollToTop'); export function ScrollViewEvents() { - const handleOnContentSizeChange = (w: number, h: number) => { + const handleContentSizeChange = (w: number, h: number) => { console.log(`Event: contentSizeChange`, w, h); }; return ( - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida - neque convallis a cras semper auctor neque. Ultrices in iaculis nunc - sed augue lacus. Vulputate ut pharetra sit amet aliquam id. Eget sit - amet tellus cras adipiscing enim. Velit aliquet sagittis id - consectetur purus ut faucibus pulvinar. Eget gravida cum sociis - natoque penatibus. Nunc sed blandit libero volutpat sed cras. Aliquet - bibendum enim facilisis gravida neque convallis a cras. Euismod nisi - porta lorem mollis aliquam. Consequat mauris nunc congue nisi vitae - suscipit tellus. Mauris pellentesque pulvinar pellentesque habitant - morbi tristique. Nulla aliquet enim tortor at auctor. A condimentum - vitae sapien pellentesque. Quis eleifend quam adipiscing vitae. Elit - ut aliquam purus sit amet luctus venenatis. Id faucibus nisl tincidunt - eget nullam non nisi est. Nunc non blandit massa enim nec dui nunc. - Urna nec tincidunt praesent semper feugiat nibh. Malesuada fames ac - turpis egestas maecenas. Viverra nibh cras pulvinar mattis nunc sed - blandit. Molestie nunc non blandit massa enim nec dui nunc. Velit - laoreet id donec ultrices tincidunt arcu. Imperdiet nulla malesuada - pellentesque elit eget. Id neque aliquam vestibulum morbi blandit - cursus. Ut tristique et egestas quis. Nisl nunc mi ipsum faucibus - vitae aliquet nec ullamcorper sit. Cursus mattis molestie a iaculis at - erat. Tincidunt arcu non sodales neque sodales ut etiam. Ultrices dui - sapien eget mi proin sed. Metus vulputate eu scelerisque felis. In - pellentesque massa placerat duis ultricies lacus sed turpis. Id leo in - vitae turpis massa sed elementum. - - - + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Gravida neque + convallis a cras semper auctor neque. Ultrices in iaculis nunc sed augue + lacus. Vulputate ut pharetra sit amet aliquam id. Eget sit amet tellus + cras adipiscing enim. Velit aliquet sagittis id consectetur purus ut + faucibus pulvinar. + + + Eget gravida cum sociis natoque penatibus. Nunc sed blandit libero + volutpat sed cras. Aliquet bibendum enim facilisis gravida neque + convallis a cras. Euismod nisi porta lorem mollis aliquam. Consequat + mauris nunc congue nisi vitae suscipit tellus. Mauris pellentesque + pulvinar pellentesque habitant morbi tristique. Nulla aliquet enim + tortor at auctor. + + + A condimentum vitae sapien pellentesque. Quis eleifend quam adipiscing + vitae. Elit ut aliquam purus sit amet luctus venenatis. Id faucibus nisl + tincidunt eget nullam non nisi est. Nunc non blandit massa enim nec dui + nunc. Urna nec tincidunt praesent semper feugiat nibh. Malesuada fames + ac turpis egestas maecenas. Viverra nibh cras pulvinar mattis nunc sed + blandit. + + + Molestie nunc non blandit massa enim nec dui nunc. Velit laoreet id + donec ultrices tincidunt arcu. Imperdiet nulla malesuada pellentesque + elit eget. Id neque aliquam vestibulum morbi blandit cursus. Ut + tristique et egestas quis. Nisl nunc mi ipsum faucibus vitae aliquet nec + ullamcorper sit. Cursus mattis molestie a iaculis at erat. + + + Tincidunt arcu non sodales neque sodales ut etiam. Ultrices dui sapien + eget mi proin sed. Metus vulputate eu scelerisque felis. In pellentesque + massa placerat duis ultricies lacus sed turpis. Id leo in vitae turpis + massa sed elementum. + + ); } const styles = StyleSheet.create({ - container: { - flex: 1, - paddingTop: StatusBar.currentHeight, - }, - scrollView: { - backgroundColor: 'pink', - marginHorizontal: 20, - }, text: { - fontSize: 42, + paddingHorizontal: 20, + paddingTop: 20, + fontSize: 24, }, }); diff --git a/experiments-app/src/screens/SectionListEvents.tsx b/experiments-app/src/screens/SectionListEvents.tsx index 17a3add9d..08bb2831e 100644 --- a/experiments-app/src/screens/SectionListEvents.tsx +++ b/experiments-app/src/screens/SectionListEvents.tsx @@ -1,15 +1,13 @@ import * as React from 'react'; -import { - StyleSheet, - Text, - View, - SafeAreaView, - SectionList, - StatusBar, -} from 'react-native'; +import { StyleSheet, Text, View, SectionList } from 'react-native'; import { buildEventLogger } from '../utils/helpers'; -const DATA = [ +interface SectionData { + title: string; + data: string[]; +} + +const sections: SectionData[] = [ { title: 'Main dishes', data: [ @@ -44,63 +42,65 @@ const DATA = [ }, ]; -const handleOnMomentumScrollBegin = buildEventLogger('onMomentumScrollBegin'); -const handleOnMomentumScrollEnd = buildEventLogger('onMomentumScrollEnd'); -const handleOnScroll = buildEventLogger('onScroll'); -const handleOnScrollBeginDrag = buildEventLogger('onScrollBeginDrag'); -const handleOnScrollEndDrag = buildEventLogger('onScrollEndDrag'); -const handleOnScrollToTop = buildEventLogger('onScrollToTop'); +const handleMomentumScrollBegin = buildEventLogger('momentumScrollBegin'); +const handleMomentumScrollEnd = buildEventLogger('momentumScrollEnd'); +const handleScroll = buildEventLogger('scroll'); +const handleScrollBeginDrag = buildEventLogger('scrollBeginDrag'); +const handleScrollEndDrag = buildEventLogger('scrollEndDrag'); +const handleScrollToTop = buildEventLogger('scrollToTop'); export function SectionListEvents() { - const handleOnContentSizeChange = (w: number, h: number) => { + const handleContentSizeChange = (w: number, h: number) => { console.log(`Event: contentSizeChange`, w, h); }; - const handleOnEndReached = (info: { distanceFromEnd: number }) => { - console.log(`Event: endReached`, info.distanceFromEnd); + const handleEndReached = (info: { distanceFromEnd: number }) => { + console.log(`Event: endReached`, info); }; + const renderSectionHeader = ({ section }: { section: SectionData }) => ( + {section.title} + ); + + const renderItem = ({ item }: { item: string }) => ( + + {item} + + ); + return ( - - item + index} - renderItem={({ item }) => ( - - {item} - - )} - renderSectionHeader={({ section: { title } }) => ( - {title} - )} - onContentSizeChange={handleOnContentSizeChange} - onMomentumScrollBegin={handleOnMomentumScrollBegin} - onMomentumScrollEnd={handleOnMomentumScrollEnd} - onScroll={handleOnScroll} - onScrollBeginDrag={handleOnScrollBeginDrag} - onScrollEndDrag={handleOnScrollEndDrag} - onScrollToTop={handleOnScrollToTop} - onEndReached={handleOnEndReached} - /> - + item + index} + renderSectionHeader={renderSectionHeader} + renderItem={renderItem} + onContentSizeChange={handleContentSizeChange} + onMomentumScrollBegin={handleMomentumScrollBegin} + onMomentumScrollEnd={handleMomentumScrollEnd} + onScroll={handleScroll} + onScrollBeginDrag={handleScrollBeginDrag} + onScrollEndDrag={handleScrollEndDrag} + onScrollToTop={handleScrollToTop} + onEndReached={handleEndReached} + /> ); } const styles = StyleSheet.create({ - container: { - flex: 1, - paddingTop: StatusBar.currentHeight, - marginHorizontal: 16, + header: { + paddingVertical: 8, + paddingHorizontal: 16, + backgroundColor: 'white', + fontSize: 24, }, item: { - backgroundColor: 'pink', - padding: 20, - marginVertical: 8, - }, - header: { - fontSize: 32, + paddingVertical: 16, + paddingHorizontal: 16, }, + title: { - fontSize: 24, + fontSize: 20, }, });