Navigation API

The Navigation API enables POS UI extension to navigate between screens. ### Supporting targets - [pos.home.modal.render](/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-modal-render) - [pos.purchase.post.action.render](/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-action-render) - [pos.product-details.action.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-render) - [pos.order-details.action.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-render) - [pos.draft-order-details.action.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-render) - [pos.customer-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render)

NavigationApi

NavigationApiContent

dismiss

Dismisses the modal highest on the stack

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.

pop

Pops the currently shown screen

Examples

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 />
));

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);
});

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 />
));

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);
});

Navigation actions

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>
);

// 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);