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 callbackAnchor link to section titled "Using the overrideNavigateBack callback"
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.
||Used to identify this screen as a destination in the navigation stack.|
||The title of the screen which will be displayed on the UI.|
||Displays a loading indicator when
||Represents the presentation of a screen in the navigation stack.|
||A callback triggered when the screen is navigated to.|
||A callback that is triggered when the user navigates back from this screen. Runs after screen is
||A callback that allows you to override the secondary navigation action. Runs when screen is still
||A callback that gets triggered when the navigation event completes and the screen receives the parameters.|
ScreenPresentationPropsAnchor link to section titled "ScreenPresentationProps"
||displays the screen from the bottom on
- 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.
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 GuidelinesAnchor 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.