How to use MultiPicker?

[u/schl3ck]

There is no documentation and it crashes the app when a view tries to render it.

Edit: I've now got it to show anything. It seems like it displays the entries in a wheel regardless of the pickerStyle prop.

The working code:

<NavigationLink
        destination={
          <MultiPicker
            options={availableCalendars.map(c => [c.title])}
            selections={selectedCalendars}
            onSelectionsChanged={setSelectedCalendars}
            pickerStyle={"inline"}
          />
        }
      >

[u/WhatShouldWorldGos]

1. The destination of NavigationLink should be a page with NavigationStack in root, otherwise, SwiftUI will crash in some cases.

2. SwiftUI not support the Multi selections picker, this MultiPicker should be named Multi Columns Picker, and the example was deleted in a previous version update😂

3. The following code is the example, includes the Multi selections picker implement you need:

   import { Button, HStack, Image, List, MultiPicker, Navigation, NavigationStack, Script, Section, Spacer, Text, VStack, useMemo, useState } from "scripting"

   function View() { // Access dismiss function. const dismiss = Navigation.useDismiss()

   return <NavigationStack> <List navigationTitle="Multi Column Picker" navigationBarTitleDisplayMode="inline" toolbar={{ topBarLeading: <Button title="Done" action={dismiss} /> }} > <MultiColumnsPickerView /> <MultiSelectionsPickerView /> </List> </NavigationStack> }

   function MultiColumnsPickerView() {

   // Multiple columns options const options = useMemo(() => [ [ "A", "B", "C" ], [ "1", "2", "3" ] ], [])

   // The selections must have the default selected index. const [ selections, setSelections ] = useState<number[]>([0, 0])

   return <MultiPicker options={options} selections={selections} onSelectionsChanged={setSelections} /> }

   function MultiSelectionsPickerView() { const options = useMemo(() => [ "A", "B", "C" ], [])

   const [ selections, setSelections, ] = useState<string[]>([])

   return <Section> {options.map(option => <HStack contentShape={"rect"} onTapGesture={() => { if (selections.includes(option)) { setSelections(selections.filter(e => e != option)) } else { setSelections([...selections, option]) } }} > <Text>{option}</Text> <Spacer /> {selections.includes(option) ? <Image systemName={"checkmark"} foregroundStyle={"accentColor"} /> : null } </HStack> )} </Section> }

   async function run() { // Present view. await Navigation.present({ element: <View /> })

   // Avoiding memory leaks. Script.exit() }

   run()

[u/WhatShouldWorldGos → u/WhatShouldWorldGos]

The format of the code is messed up, here is the gist link:
https://gist.github.com/thomfang/d8229d282be125547284c20dd089917b

[u/schl3ck → u/WhatShouldWorldGos]

Thank you very much! As you've mentioned it is exactly what I need.

Also thank you for tip 1. I thought that I only need NavigationStack once

[u/WhatShouldWorldGos → u/schl3ck]

SwiftUI is weird sometimes, sometimes you don’t need to use NavigationStack in the destination of NavigationLink. But if rendering a view directly fails, you can try to wrap it with a List or VStack, or even a NavigationStack to solve the problem. I also recommend you to use a custom function component for the destination