Skip to main content

Navigation API
APIs

The Navigation API enables POS UI extension to navigate between screens.

Supporting targets

Anchor to navigationapiNavigationApi

Anchor to dismiss
dismiss
() => void
required

Dismisses the extension.

Anchor to navigate
navigate
(screenName: string, params?: any) => void
required

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.

Anchor to pop
pop
() => void
required

Pops the currently shown screen

Was this section helpful?

Anchor to examplesExamples

Examples of using the Navigation API

Anchor to example-navigate-between-two-screensNavigate between two screens
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 />
));

Anchor to example-navigation-actionsNavigation actions

Anchor to example-navigate-to-a-route-in-current-navigation-treeNavigate to a route in current navigation tree

Navigates to the specified screen. It is important to note that any screens you wish to navigate to must already exist in the 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>
);