Skip to main content

Screen
component

A component used in the root of a modal extension to define a screen.

Anchor to screenScreen

Anchor to name
name
string
required

Used to identify this screen as a destination in the navigation stack.

Anchor to title
title
string
required

The title of the screen which will be displayed on the UI.

Anchor to isLoading
isLoading
boolean

Displays a loading indicator when true. Set this to true when performing an asynchronous task, and then to false when the data becomes available to the UI.

Anchor to onNavigate
onNavigate
() => void

Triggered when the screen is navigated to.

Anchor to onNavigateBack
onNavigateBack
() => void

Triggered when the user navigates back from this screen. Runs after screen is unmounted.

Anchor to onReceiveParams
onReceiveParams
(params: any) => void

A callback that gets triggered when the navigation event completes and the screen receives the parameters.

Anchor to overrideNavigateBack
overrideNavigateBack
() => void

A callback that allows you to override the secondary navigation action. Runs when screen is mounted.

Anchor to presentation
presentation

Dictates how the Screen will be presented when navigated to.

Anchor to secondaryAction
secondaryAction

Displays a secondary action button on the screen.

Was this section helpful?

Anchor to screenpresentationpropsScreenPresentationProps

Anchor to sheet
sheet
boolean

Displays the screen from the bottom on navigate when true.

Was this section helpful?

Anchor to secondaryactionpropsSecondaryActionProps

Anchor to onPress
onPress
() => void
required

Triggered when the secondary action button is pressed.

Anchor to text
text
string
required

Displays the name of the secondary action in the action bar.

Anchor to isEnabled
isEnabled
boolean

Sets whether the action can be tapped.

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

Navigating using NavigationAPI with Screens within Navigators

Anchor to example-navigate-to-another-screen-with-parametersNavigate to another screen with parameters
Anchor to example-navigate-to-another-screen-with-sheet-presentationNavigate to another screen with sheet presentation
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 />);