Scroll
component
The ScrollView component allows content that doesn’t fully fit on screen to scroll. Typically, the ScrollView component serves as the root component of a Screen.
Was this section helpful?
ScrollView
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 />;
},
);
Preview
