ScrollView

Examples

• Scroll long content

  Description

  Create a scrollable container for content that exceeds the display area. This example shows how to implement a ScrollView that enables smooth scrolling for long lists or detailed information, supporting pull-to-refresh and lazy loading for optimal performance.

  React

  import React, {ReactNode} from 'react';
  import {
    Text,
    Navigator,
    Screen,
    ScrollView,
    Stack,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';
  
  const ModalComponent = () => {
    const textElement = (
      count: number,
    ): ReactNode => {
      return (
        <Stack
          direction="vertical"
          paddingHorizontal="Small"
          paddingVertical="Small"
        >
          <Text>{`Text element ${count}`}</Text>
        </Stack>
      );
    };
  
    return (
      <Navigator>
        <Screen
          title="ScrollView"
          name="ScrollView"
        >
          <ScrollView>
            {Array.from(Array(25)).map((_, count) =>
              textElement(count),
            )}
          </ScrollView>
        </Screen>
      </Navigator>
    );
  };
  
  export default reactExtension(
    'pos.home.modal.render',
    () => {
      return <ModalComponent />;
    },
  );
  

  TS

  import {
    extension,
    Screen,
    ScrollView,
    Stack,
    Navigator,
    Text,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension(
    'pos.home.modal.render',
    (root) => {
      const screen = root.createComponent(Screen, {
        name: 'ScrollView',
        title: 'ScrollView',
      });
  
      const scrollView =
        root.createComponent(ScrollView);
  
      for (let i = 0; i < 25; i++) {
        const stack = root.createComponent(Stack, {
          paddingVertical: 'Small',
          direction: 'vertical',
          paddingHorizontal: 'Small',
        });
  
        const textElement =
          root.createComponent(Text);
        textElement.append(`Text element ${i}`);
  
        stack.append(textElement);
        scrollView.append(stack);
      }
  
      screen.append(scrollView);
      const navigator =
        root.createComponent(Navigator);
      navigator.append(screen);
      root.append(navigator);
    },
  );