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.
Using the overrideNavigateBack callback
Anchor link to section titled "Using the overrideNavigateBack callback"The overrideNavigateBack callback enables you to write custom functionality to overide the back button in the navigation bar. The callback forfeits the native back navigation functionality, meaning that you must dismiss or render a pop up screen with NavigationAPI to ensure a suitable navigation experience for merchants.
| 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)? |
A callback triggered when the screen is navigated to. |
| onNavigateBack | (() => void)? |
A callback that is triggered when the user navigates back from this screen. Runs after screen is unmounted. |
| overrideNavigateBack | (() => void)? |
A callback that allows you to override the secondary navigation action. Runs when screen is still mounted. |
| 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.