Navigation APIAPIs
APIs
Requires pos.home.modal.render
The Navigation API enables POS UI extension to navigate between screens.
- (screenName: string, params?: any) => voidrequired
Navigate to a route in current navigation tree. Pushes the specified screen if it isn't present in the navigation tree, goes back to a created screen otherwise.
- () => voidrequired
Pops the currently shown screen
- () => voidrequired
Dismisses the modal highest on the stack
NavigationApiContent
- navigate
Navigate to a route in current navigation tree. Pushes the specified screen if it isn't present in the navigation tree, goes back to a created screen otherwise.
(screenName: string, params?: any) => void - pop
Pops the currently shown screen
() => void - dismiss
Dismisses the modal highest on the stack
() => void
export interface NavigationApiContent {
/** Navigate to a route in current navigation tree.
* Pushes the specified screen if it isn't present in the navigation tree, goes back to a created screen otherwise.
* @param screenName the name of the screen you want to navigate to.
* @param params the parameters you want to pass to that screen.
*/
navigate(screenName: string, params?: any): void;
/** Pops the currently shown screen */
pop(): void;
/** Dismisses the modal highest on the stack */
dismiss(): void;
}Was this section helpful?
Anchor to examplesExamples
Examples of using the Navigation API
Was this section helpful?
Navigate between two screens
import React from 'react';
import {
reactExtension,
useApi,
Navigator,
Screen,
Button,
} from '@shopify/ui-extensions-react/point-of-sale';
const SmartGridModal = () => {
const api = useApi<'pos.home.modal.render'>();
return (
<Navigator>
<Screen name="ScreenOne" title="Screen One Title">
<Button
title="Navigate to Screen Two"
onPress={() => api.navigation.navigate('ScreenTwo')}
/>
</Screen>
<Screen name="ScreenTwo" title="Screen Two Title">
<Button
title="Navigate to Screen One"
onPress={() => api.navigation.navigate('ScreenOne')}
/>
</Screen>
</Navigator>
);
};
export default reactExtension('pos.home.modal.render', () => (
<SmartGridModal />
));
examples
Navigate between two screens
React
import React from 'react'; import { reactExtension, useApi, Navigator, Screen, Button, } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridModal = () => { const api = useApi<'pos.home.modal.render'>(); return ( <Navigator> <Screen name="ScreenOne" title="Screen One Title"> <Button title="Navigate to Screen Two" onPress={() => api.navigation.navigate('ScreenTwo')} /> </Screen> <Screen name="ScreenTwo" title="Screen Two Title"> <Button title="Navigate to Screen One" onPress={() => api.navigation.navigate('ScreenOne')} /> </Screen> </Navigator> ); }; export default reactExtension('pos.home.modal.render', () => ( <SmartGridModal /> ));TS
import { extension, Button, Navigator, Screen, } from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.modal.render', (root, api) => { let navigator = root.createComponent(Navigator); let screenOne = root.createComponent(Screen, { name: 'ScreenOne', title: 'Screen One Title', }); let screenTwo = root.createComponent(Screen, { name: 'ScreenTwo', title: 'Screen Two Title', }); let navigateScreenOneBtn = root.createComponent(Button, { title: 'Navigate to Screen One', onPress: () => api.navigation.navigate('ScreenOne'), }); let navigateScreenTwoBtn = root.createComponent(Button, { title: 'Navigate to Screen Two', onPress: () => api.navigation.navigate('ScreenTwo'), }); screenOne.appendChild(navigateScreenTwoBtn); screenTwo.appendChild(navigateScreenOneBtn); navigator.appendChild(screenOne); navigator.appendChild(screenTwo); root.appendChild(navigator); });
Was this section helpful?
Navigate to a route in current navigation tree
// You can navigate to any of these three screens since they all exist within the same Navigator.
return (
<Navigator>
<Screen name="ScreenOne" title="Screen One Title" />
<Screen name="ScreenTwo" title="Screen Two Title" />
<Screen name="ScreenThree" title="Screen Three Title" />
</Navigator>
);
examples
Navigate to a route in current navigation tree
description
Navigates to the specified screen. It is important to note that any screens you wish to navigate to must already exist in the Navigator.
React
// You can navigate to any of these three screens since they all exist within the same Navigator. return ( <Navigator> <Screen name="ScreenOne" title="Screen One Title" /> <Screen name="ScreenTwo" title="Screen Two Title" /> <Screen name="ScreenThree" title="Screen Three Title" /> </Navigator> );TS
// You can navigate to any of these three screens since they all exist within the same Navigator. let navigator = root.createComponent(Navigator); let screenOne = root.createComponent(Screen, { name: 'ScreenOne', title: 'Screen One Title', }); let screenTwo = root.createComponent(Screen, { name: 'ScreenTwo', title: 'Screen Two Title', }); let screenThree = root.createComponent(Screen, { name: 'ScreenThree', title: 'Screen Three Title', }); navigator.appendChild(screenOne); navigator.appendChild(screenTwo); navigator.appendChild(screenThree); root.appendChild(navigator);