Navigatorcomponent
component
A component used to navigate between different screens.
string
Sets the initial Screen
whose name
matches.
Was this section helpful?
Navigate to another screen
import React from 'react'
import { Screen, Text, Navigator, reactExtension, Button, useApi } from '@shopify/ui-extensions-react/point-of-sale';
const Modal = () => {
const api = useApi<'pos.home.modal.render'>();
return (
<Navigator>
<Screen name="Home" title="Home">
<Text>Home screen</Text>
<Button title="Navigate to details" onPress={() => api.navigation.navigate('Details')} />
</Screen>
<Screen name="Details" title="Details">
<Text>Details screen</Text>
</Screen>
</Navigator>
)
}
export default reactExtension('pos.home.modal.render', () => <Modal />);
Preview

Anchor to examplesExamples
Using a Navigator to navigate between Screens
Was this section helpful?
Navigate to another screen with parameters
import React, {useState} from 'react';
import {
Screen,
Text,
Navigator,
reactExtension,
Button,
useApi,
} from '@shopify/ui-extensions-react/point-of-sale';
const Modal = () => {
return (
<Navigator>
<HomeScreen />
<DetailsScreen />
</Navigator>
);
};
const HomeScreen = () => {
const api = useApi<'pos.home.modal.render'>();
return (
<Screen name="Home" title="Home">
<Text>Home screen</Text>
<Button
title="Navigate to details"
onPress={() => api.navigation.navigate('Details', {orderId: '123'})}
/>
</Screen>
);
};
const DetailsScreen = () => {
const [params, setParams] = useState<pos.home.modal.render>();
return (
<Screen
name="Details"
title="Details"
presentation={{sheet: true}}
onReceiveParams={setParams}
>
<Text>{`Order ID: ${params.orderId}`}</Text>
</Screen>
);
};
export default reactExtension('pos.home.modal.render', () => <Modal />);