|
12 | 12 |
|
13 | 13 | import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; |
14 | 14 |
|
15 | | -import BaseFlatListExample from './BaseFlatListExample'; |
| 15 | +import BaseFlatListExample, {ITEM_HEIGHT} from './BaseFlatListExample'; |
16 | 16 | import * as React from 'react'; |
17 | 17 | import {useRef, useState} from 'react'; |
| 18 | +import {Button, FlatList} from 'react-native'; |
| 19 | + |
| 20 | +const DATA = Array.from({length: 20}, (_, index) => `Item ${index}`); |
| 21 | +const SCROLL_TO_ITEM = DATA[18]; |
| 22 | + |
| 23 | +type EventCounts = { |
| 24 | + dragEvents: number, |
| 25 | + onEndReached: number, |
| 26 | + onMomentumScrollEnd: number, |
| 27 | + onStartReached: number, |
| 28 | +}; |
18 | 29 |
|
19 | 30 | export component FlatList_onEndReached() { |
20 | | - const [output, setOutput] = useState(''); |
21 | | - const exampleProps = { |
22 | | - onEndReached: (info: {distanceFromEnd: number, ...}) => |
23 | | - setOutput('onEndReached'), |
24 | | - onEndReachedThreshold: 0, |
| 31 | + const [output, setOutput] = useState('ready'); |
| 32 | + const listRef = useRef<?FlatList<string>>(null); |
| 33 | + const actionRef = useRef<'end' | 'start'>('end'); |
| 34 | + const attemptsRef = useRef(0); |
| 35 | + const eventCountsRef = useRef<EventCounts>({ |
| 36 | + dragEvents: 0, |
| 37 | + onEndReached: 0, |
| 38 | + onMomentumScrollEnd: 0, |
| 39 | + onStartReached: 0, |
| 40 | + }); |
| 41 | + const recordEventsRef = useRef(false); |
| 42 | + const momentumEndedRef = useRef(false); |
| 43 | + |
| 44 | + const report = () => { |
| 45 | + const {dragEvents, onEndReached, onMomentumScrollEnd, onStartReached} = |
| 46 | + eventCountsRef.current; |
| 47 | + setOutput( |
| 48 | + `${actionRef.current}: attempts=${attemptsRef.current}, ` + |
| 49 | + `onEndReached=${onEndReached}, onStartReached=${onStartReached}, ` + |
| 50 | + `onMomentumScrollEnd=${onMomentumScrollEnd}, dragEvents=${dragEvents}`, |
| 51 | + ); |
| 52 | + }; |
| 53 | + |
| 54 | + const onEndReached = () => { |
| 55 | + if (recordEventsRef.current) { |
| 56 | + eventCountsRef.current.onEndReached++; |
| 57 | + if (momentumEndedRef.current) { |
| 58 | + report(); |
| 59 | + } |
| 60 | + } |
| 61 | + }; |
| 62 | + |
| 63 | + const onStartReached = () => { |
| 64 | + if (recordEventsRef.current) { |
| 65 | + eventCountsRef.current.onStartReached++; |
| 66 | + if (momentumEndedRef.current) { |
| 67 | + report(); |
| 68 | + } |
| 69 | + } |
25 | 70 | }; |
26 | | - const ref = useRef<any>(null); |
27 | 71 |
|
28 | | - const onTest = () => { |
29 | | - const scrollResponder = ref?.current?.getScrollResponder(); |
30 | | - if (scrollResponder != null) { |
31 | | - scrollResponder.scrollToEnd(); |
| 72 | + const onMomentumScrollEnd = () => { |
| 73 | + if (recordEventsRef.current) { |
| 74 | + eventCountsRef.current.onMomentumScrollEnd++; |
| 75 | + momentumEndedRef.current = true; |
| 76 | + report(); |
32 | 77 | } |
33 | 78 | }; |
34 | 79 |
|
| 80 | + const onDragEvent = () => { |
| 81 | + if (recordEventsRef.current) { |
| 82 | + eventCountsRef.current.dragEvents++; |
| 83 | + } |
| 84 | + }; |
| 85 | + |
| 86 | + const scrollToEnd = () => { |
| 87 | + recordEventsRef.current = true; |
| 88 | + momentumEndedRef.current = false; |
| 89 | + actionRef.current = 'end'; |
| 90 | + attemptsRef.current++; |
| 91 | + setOutput('running'); |
| 92 | + listRef.current?.scrollToItem({ |
| 93 | + animated: true, |
| 94 | + item: SCROLL_TO_ITEM, |
| 95 | + viewOffset: -ITEM_HEIGHT, |
| 96 | + }); |
| 97 | + }; |
| 98 | + |
| 99 | + const scrollToStart = () => { |
| 100 | + momentumEndedRef.current = false; |
| 101 | + actionRef.current = 'start'; |
| 102 | + attemptsRef.current++; |
| 103 | + setOutput('running'); |
| 104 | + listRef.current?.scrollToOffset({animated: true, offset: 0}); |
| 105 | + }; |
| 106 | + |
| 107 | + const exampleProps = { |
| 108 | + initialNumToRender: 19, |
| 109 | + onEndReached, |
| 110 | + onEndReachedThreshold: 0.2, |
| 111 | + onMomentumScrollEnd, |
| 112 | + onScrollBeginDrag: onDragEvent, |
| 113 | + onScrollEndDrag: onDragEvent, |
| 114 | + onStartReached, |
| 115 | + onStartReachedThreshold: 0.1, |
| 116 | + windowSize: 2, |
| 117 | + }; |
| 118 | + |
35 | 119 | return ( |
36 | 120 | <BaseFlatListExample |
37 | | - ref={ref} |
| 121 | + ref={listRef} |
| 122 | + data={DATA} |
38 | 123 | exampleProps={exampleProps} |
39 | 124 | testOutput={output} |
40 | | - onTest={onTest} |
41 | | - /> |
| 125 | + onTest={scrollToEnd} |
| 126 | + testLabel="Scroll to item"> |
| 127 | + <Button |
| 128 | + testID="scroll_to_start" |
| 129 | + onPress={scrollToStart} |
| 130 | + title="Scroll to start" |
| 131 | + /> |
| 132 | + <Button |
| 133 | + testID="scroll_to_end" |
| 134 | + onPress={scrollToEnd} |
| 135 | + title="Scroll to item" |
| 136 | + /> |
| 137 | + </BaseFlatListExample> |
42 | 138 | ); |
43 | 139 | } |
44 | 140 |
|
45 | 141 | export default { |
46 | 142 | title: 'onEndReached', |
47 | 143 | name: 'onEndReached', |
48 | 144 | description: |
49 | | - 'Scroll to end of list or tap Test button to see `onEndReached` triggered.', |
| 145 | + 'Programmatic scrolling calls edge callbacks once and does not emit drag callbacks.', |
50 | 146 | render: function () { |
51 | 147 | return <FlatList_onEndReached />; |
52 | 148 | }, |
|
0 commit comments