Present a simple view#

This example demonstrates how to display a basic UI screen in the Scripting app using the Navigation.present API. It also shows how to set up navigation-related features such as the navigation stack and page title.

Overview#

You will learn how to:

• Present a custom view using Navigation.present
• Create a structured layout using NavigationStack and VStack
• Set the navigation bar title using navigationTitle

Example Code#

1import { Navigation, NavigationStack, Script, Text, VStack } from "scripting"
2
3function View() {
4
5  return <NavigationStack>
6    <VStack
7      navigationTitle={"Present a simple view"}
8    >
9      <Text>Hello Scripting!</Text>
10    </VStack>
11  </NavigationStack>
12}
13
14async function run() {
15  await Navigation.present({
16    element: <View />
17  })
18
19  Script.exit()
20}
21
22run()

Key Components#

Navigation.present(options)#

This function displays the given UI element modally as a full screen page. It takes an element property that defines the root view to show.

1await Navigation.present({
2  element: <View />
3})

NavigationStack#

This component provides a navigation container that supports title display, navigation bar buttons, and structured transitions. It must be the outermost wrapper for views that use navigation features.

VStack#

A vertical layout container that stacks children in a top-to-bottom arrangement. In this example, it holds a single Text component.

navigationTitle#

Set on VStack, this prop sets the title shown in the navigation bar.

Output#

This example displays a simple page with the title "Present a simple view" and a message reading "Hello Scripting!" in the center of the screen.

Notes#

• Always wrap your views in NavigationStack if you want navigation behavior like back buttons, titles, or toolbars.
• Don’t forget to call Script.exit() after Navigation.present() resolves to avoid memory leaks.