# Screen

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

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

```

```ts
import {
  extension,
  Screen,
  Navigator,
  Text,
  Button,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const homeScreen = root.createComponent(Screen, {
    name: 'Home',
    title: 'Home',
  });

  const homeText = root.createComponent(Text);
  homeText.append('Home screen');
  homeScreen.append(homeText);

  const navigateButton = root.createComponent(Button, {
    title: 'Navigate to details',
    onPress: () => api.navigation.navigate('Details'),
  });
  homeScreen.append(navigateButton);

  const detailsScreen = root.createComponent(Screen, {
    name: 'Details',
    title: 'Details',
  });

  const detailsText = root.createComponent(Text);
  detailsText.append('Details screen');
  detailsScreen.append(detailsText);

  const navigator = root.createComponent(Navigator);
  navigator.append(homeScreen);
  navigator.append(detailsScreen);
  root.append(navigator);
});

```

## Screen

### ScreenProps

Represents a screen in the navigation stack.

### isLoading

value: `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.

### name

value: `string`

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

### onNavigate

value: `() => void`

Triggered when the screen is navigated to.

### onNavigateBack

value: `() => void`

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

### onReceiveParams

value: `(params: any) => void`

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

### overrideNavigateBack

value: `() => void`

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

### presentation

value: `ScreenPresentationProps`

Dictates how the `Screen` will be presented when navigated to.

### secondaryAction

value: `SecondaryActionProps`

Displays a secondary action button on the screen.

### title

value: `string`

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

### ScreenPresentationProps

Represents the presentation of a screen in the navigation stack.

### sheet

value: `boolean`

Displays the screen from the bottom on `navigate` when `true`.

### SecondaryActionProps

Represents the secondary action button of a screen in the navigation stack.

### isEnabled

value: `boolean`

Sets whether the action can be tapped.

### onPress

value: `() => void`

Triggered when the secondary action button is pressed.

### text

value: `string`

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

## Examples

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



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

```

```ts
import {
  extension,
  Screen,
  Navigator,
  Text,
  Button,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const homeScreen = root.createComponent(Screen, {
    name: 'Home',
    title: 'Home',
  });

  const homeText = root.createComponent(Text);
  homeText.append('Home screen');
  homeScreen.append(homeText);

  const navigateButton = root.createComponent(Button, {
    title: 'Navigate to details',
    onPress: () => api.navigation.navigate('Details', {orderId: '123'}),
  });
  homeScreen.append(navigateButton);

  const detailsText = root.createComponent(Text);

  const detailsScreen = root.createComponent(Screen, {
    name: 'Details',
    title: 'Details',
    onReceiveParams: (params) => {
      detailsText.replaceChildren(`Order ID: ${params.orderId}`);
    },
  });

  detailsScreen.append(detailsText);

  const navigator = root.createComponent(Navigator);
  navigator.append(homeScreen);
  navigator.append(detailsScreen);
  root.append(navigator);
});

```



```tsx
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" presentation={{sheet: true}}>
        <Text>Details screen</Text>
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);

```

```ts
import {
  extension,
  Screen,
  Navigator,
  Text,
  Button,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const homeScreen = root.createComponent(Screen, {
    name: 'Home',
    title: 'Home',
  });

  const homeText = root.createComponent(Text);
  homeText.append('Home screen');
  homeScreen.append(homeText);

  const navigateButton = root.createComponent(Button, {
    title: 'Navigate to details',
    onPress: () => api.navigation.navigate('Details'),
  });
  homeScreen.append(navigateButton);

  const detailsScreen = root.createComponent(Screen, {
    name: 'Details',
    title: 'Details',
    presentation: {sheet: true},
  });

  const detailsText = root.createComponent(Text);
  detailsText.append('Details screen');
  detailsScreen.append(detailsText);

  const navigator = root.createComponent(Navigator);
  navigator.append(homeScreen);
  navigator.append(detailsScreen);
  root.append(navigator);
});

```

## ScreenPresentationProps

### ScreenPresentationProps

Represents the presentation of a screen in the navigation stack.

### sheet

value: `boolean`

Displays the screen from the bottom on `navigate` when `true`.

## Examples

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



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

```

```ts
import {
  extension,
  Screen,
  Navigator,
  Text,
  Button,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const homeScreen = root.createComponent(Screen, {
    name: 'Home',
    title: 'Home',
  });

  const homeText = root.createComponent(Text);
  homeText.append('Home screen');
  homeScreen.append(homeText);

  const navigateButton = root.createComponent(Button, {
    title: 'Navigate to details',
    onPress: () => api.navigation.navigate('Details', {orderId: '123'}),
  });
  homeScreen.append(navigateButton);

  const detailsText = root.createComponent(Text);

  const detailsScreen = root.createComponent(Screen, {
    name: 'Details',
    title: 'Details',
    onReceiveParams: (params) => {
      detailsText.replaceChildren(`Order ID: ${params.orderId}`);
    },
  });

  detailsScreen.append(detailsText);

  const navigator = root.createComponent(Navigator);
  navigator.append(homeScreen);
  navigator.append(detailsScreen);
  root.append(navigator);
});

```



```tsx
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" presentation={{sheet: true}}>
        <Text>Details screen</Text>
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);

```

```ts
import {
  extension,
  Screen,
  Navigator,
  Text,
  Button,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const homeScreen = root.createComponent(Screen, {
    name: 'Home',
    title: 'Home',
  });

  const homeText = root.createComponent(Text);
  homeText.append('Home screen');
  homeScreen.append(homeText);

  const navigateButton = root.createComponent(Button, {
    title: 'Navigate to details',
    onPress: () => api.navigation.navigate('Details'),
  });
  homeScreen.append(navigateButton);

  const detailsScreen = root.createComponent(Screen, {
    name: 'Details',
    title: 'Details',
    presentation: {sheet: true},
  });

  const detailsText = root.createComponent(Text);
  detailsText.append('Details screen');
  detailsScreen.append(detailsText);

  const navigator = root.createComponent(Navigator);
  navigator.append(homeScreen);
  navigator.append(detailsScreen);
  root.append(navigator);
});

```

## SecondaryActionProps

### SecondaryActionProps

Represents the secondary action button of a screen in the navigation stack.

### isEnabled

value: `boolean`

Sets whether the action can be tapped.

### onPress

value: `() => void`

Triggered when the secondary action button is pressed.

### text

value: `string`

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

## Examples

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



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

```

```ts
import {
  extension,
  Screen,
  Navigator,
  Text,
  Button,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const homeScreen = root.createComponent(Screen, {
    name: 'Home',
    title: 'Home',
  });

  const homeText = root.createComponent(Text);
  homeText.append('Home screen');
  homeScreen.append(homeText);

  const navigateButton = root.createComponent(Button, {
    title: 'Navigate to details',
    onPress: () => api.navigation.navigate('Details', {orderId: '123'}),
  });
  homeScreen.append(navigateButton);

  const detailsText = root.createComponent(Text);

  const detailsScreen = root.createComponent(Screen, {
    name: 'Details',
    title: 'Details',
    onReceiveParams: (params) => {
      detailsText.replaceChildren(`Order ID: ${params.orderId}`);
    },
  });

  detailsScreen.append(detailsText);

  const navigator = root.createComponent(Navigator);
  navigator.append(homeScreen);
  navigator.append(detailsScreen);
  root.append(navigator);
});

```



```tsx
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" presentation={{sheet: true}}>
        <Text>Details screen</Text>
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);

```

```ts
import {
  extension,
  Screen,
  Navigator,
  Text,
  Button,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const homeScreen = root.createComponent(Screen, {
    name: 'Home',
    title: 'Home',
  });

  const homeText = root.createComponent(Text);
  homeText.append('Home screen');
  homeScreen.append(homeText);

  const navigateButton = root.createComponent(Button, {
    title: 'Navigate to details',
    onPress: () => api.navigation.navigate('Details'),
  });
  homeScreen.append(navigateButton);

  const detailsScreen = root.createComponent(Screen, {
    name: 'Details',
    title: 'Details',
    presentation: {sheet: true},
  });

  const detailsText = root.createComponent(Text);
  detailsText.append('Details screen');
  detailsScreen.append(detailsText);

  const navigator = root.createComponent(Navigator);
  navigator.append(homeScreen);
  navigator.append(detailsScreen);
  root.append(navigator);
});

```