1import { Button, List, Navigation, NavigationStack, Script, Section, Text, useState } from "scripting"
2
3function Example() {
4 const dismiss = Navigation.useDismiss()
5 const [isExpanded, setIsExpanded] = useState(true)
6
7 return <NavigationStack>
8 <List
9 navigationTitle={"Section"}
10 navigationBarTitleDisplayMode={"inline"}
11 toolbar={{
12 cancellationAction: <Button
13 title={"Done"}
14 action={dismiss}
15 />,
16 }}
17 >
18 <Section>
19 <Text>Row 1</Text>
20 <Text>Row 2</Text>
21 <Text>Row 3</Text>
22 <Text>Row 4</Text>
23 </Section>
24
25 <Section
26 header={<Text>Section with header</Text>}
27 >
28 <Text>Row 1</Text>
29 <Text>Row 2</Text>
30 <Text>Row 3</Text>
31 <Text>Row 4</Text>
32 </Section>
33
34 <Section
35 footer={<Text>Section with footer</Text>}
36 >
37 <Text>Row 1</Text>
38 <Text>Row 2</Text>
39 <Text>Row 3</Text>
40 <Text>Row 4</Text>
41 </Section>
42
43 <Section
44 header={
45 <Text
46 onTapGesture={() => setIsExpanded(!isExpanded)}
47 >Collapsable Section</Text>
48 }
49 isExpanded={isExpanded}
50 onChanged={setIsExpanded}
51 >
52 <Text>Row 1</Text>
53 <Text>Row 2</Text>
54 <Text>Row 3</Text>
55 <Text>Row 4</Text>
56 </Section>
57 </List>
58 </NavigationStack>
59}
60
61async function run() {
62 await Navigation.present({
63 element: <Example />
64 })
65
66 Script.exit()
67}
68
69run()
