Navigation API

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

NavigationApi

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.

pop

Pops the currently shown screen

dismiss

Dismisses the modal highest on the stack

Examples

The Navigation API enables POS UI extension to navigate between 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);
});

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

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