Screen
A component used in the root of a modal extension to define a screen.
Here is a simple example of a modal that has two screens, and uses the navigate function to switch between them with parameters.
| Name | Type | Description |
|---|---|---|
| name | string |
used to identify this screen as a destination in the navigation stack. |
| title | string |
the title of the screen which will be displayed on the UI. |
| isLoading | boolean? |
displays a loading indicator when true. Set this to true when performing an asynchronous task, and then to false when the data becomes available to the UI. |
| presentation | ScreenPresentationProps? |
Represents the presentation of a screen in the navigation stack. |
| onNavigate | (() => void)? |
triggered when the screen is navigated to. |
| onNavigateBack | (() => void)? |
triggered when the user navigates back from this screen. |
| onReceiveParams | ((params: any) => void)? |
a callback that gets triggered when the navigation event completes and the screen receives the parameters. |
ScreenPresentationProps
Anchor link to section titled "ScreenPresentationProps"| Name | Type | Description |
|---|---|---|
| sheet | boolean? |
displays the screen from the bottom on navigate when true. |
- Usually, a Screen will have a ScrollView as its root component. This will allow the content to scroll if it doesn't fit on the screen.
- The
Screencomponent should be used in the root of a modal extension. It is not meant to be used in a tile extension. Refer to the extension points section. - Make sure to set the loading state to true if the children components of your screen are still waiting for data from the network. This will ensure a smooth rendering experience once your data is available.
Content Guidelines
Anchor link to section titled "Content Guidelines"- The title of the screen should generally match the tile/context that was tapped to trigger the modality.
- Exceptions can include viewing specific items where the title can simply reflect the title of item being viewed.
- Titles should be as short as possible as longer titles will be truncated, causing a loss in context.