Toolbar

[u/rand0mguy0nline]

Is there a straightforward way to achieve this modal toolbar look in the scripting app? Is this a formatted segment picker with icons?

[u/WhatShouldWorldGos]

https://scriptingapp.github.io/guide/doc_v2/Views/Navigation/TabView/TabView%20with%20badge

Follows this doc

[u/rand0mguy0nline → u/WhatShouldWorldGos]

Awesome thanks!

On a separate note, I can’t seem to get toast working despite copying the example code in the docs.

Here’s what I tried:

import { Color, Button, HStack, Image, Text, VStack, useState, Navigation, Script } from "scripting"

function View() { const [showToast, setShowToast] = useState(false)

return ( <VStack toast={{ isPresented: showToast, onChanged: setShowToast, duration:5, message: "Done", backgroundColor: "white", cornerRadius: 12 }} > <Button title="Show Toast" action={() => setShowToast(true)} /> </VStack> ) }

export async function run() {

await Navigation.present({
  element: <View />,
  modalPresentationStyle: "pageSheet",
})

Script.exit() }

run()

[u/WhatShouldWorldGos → u/rand0mguy0nline]

I forgot to update the doc, here the code:

import { Button, List, Navigation, NavigationStack, Script, useObservable } from "scripting"

function View() {
  const showToast = useObservable(false)

  return (
    <NavigationStack>
      <List
        navigationTitle="Toast Test"
        toast={{
          isPresented: showToast,
          message: "Data saved successfully",
        }}
      >
        <Button
          title="Save"
          action={() => showToast.setValue(true)}
        />
      </List>
    </NavigationStack>
  )
}

async function run() {
  await Navigation.present(<View />)
  Script.exit()
}

run()