forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import React from 'react'
2import {View} from 'react-native'
3
4import {ScrollProvider} from '#/lib/ScrollContext'
5import {List, type ListMethods} from '#/view/com/util/List'
6import {Button, ButtonText} from '#/components/Button'
7import * as Toggle from '#/components/forms/Toggle'
8import {Text} from '#/components/Typography'
9
10export function ListContained() {
11 const [animated, setAnimated] = React.useState(false)
12 const ref = React.useRef<ListMethods>(null)
13
14 const data = React.useMemo(() => {
15 return Array.from({length: 100}, (_, i) => ({
16 id: i,
17 text: `Message ${i}`,
18 }))
19 }, [])
20
21 return (
22 <>
23 <View style={{width: '100%', height: 300}}>
24 <ScrollProvider
25 onScroll={e => {
26 'worklet'
27 console.log(
28 JSON.stringify({
29 contentOffset: e.contentOffset,
30 layoutMeasurement: e.layoutMeasurement,
31 contentSize: e.contentSize,
32 }),
33 )
34 }}>
35 <List
36 data={data}
37 renderItem={item => {
38 return (
39 <View
40 style={{
41 padding: 10,
42 borderBottomWidth: 1,
43 borderBottomColor: 'rgba(0,0,0,0.1)',
44 }}>
45 <Text>{item.item.text}</Text>
46 </View>
47 )
48 }}
49 keyExtractor={item => item.id.toString()}
50 disableFullWindowScroll={true}
51 style={{flex: 1}}
52 onStartReached={() => {
53 console.log('Start Reached')
54 }}
55 onEndReached={() => {
56 console.log('End Reached (threshold of 2)')
57 }}
58 onEndReachedThreshold={2}
59 ref={ref}
60 disableVirtualization={true}
61 />
62 </ScrollProvider>
63 </View>
64
65 <View style={{flexDirection: 'row', gap: 10, alignItems: 'center'}}>
66 <Toggle.Item
67 name="a"
68 label="Click me"
69 value={animated}
70 onChange={() => setAnimated(prev => !prev)}>
71 <Toggle.Checkbox />
72 <Toggle.LabelText>Animated Scrolling</Toggle.LabelText>
73 </Toggle.Item>
74 </View>
75
76 <Button
77 variant="solid"
78 color="primary"
79 size="large"
80 label="Scroll to End"
81 onPress={() => ref.current?.scrollToOffset({animated, offset: 0})}>
82 <ButtonText>Scroll to Top</ButtonText>
83 </Button>
84
85 <Button
86 variant="solid"
87 color="primary"
88 size="large"
89 label="Scroll to End"
90 onPress={() => ref.current?.scrollToEnd({animated})}>
91 <ButtonText>Scroll to End</ButtonText>
92 </Button>
93
94 <Button
95 variant="solid"
96 color="primary"
97 size="large"
98 label="Scroll to Offset 100"
99 onPress={() => ref.current?.scrollToOffset({animated, offset: 500})}>
100 <ButtonText>Scroll to Offset 500</ButtonText>
101 </Button>
102 </>
103 )
104}