Selectable

Examples

• Make static components tappable

  Description

  Add tap interaction to non-interactive components while preserving their styling. This example shows how to wrap components like Text, Image, or custom layouts with Selectable to make them respond to user taps without changing their visual appearance.

  React

  import React, { useState } from 'react';
  
  import { Screen, reactExtension, Text, ScrollView, Selectable } from '@shopify/ui-extensions-react/point-of-sale';
  
  const SmartGridModal = () => {
    const [count, setCount] = useState(0);
  
    return (
      <Screen name='selectable' title='Selectable'>
        <ScrollView>
          <Selectable onPress={() => {setCount(count + 1)}}>
            <Text variant="body">{count}</Text>
          </Selectable>
        </ScrollView>
      </Screen>
    );
  }
  
  export default reactExtension('pos.home.modal.render', () => {
    return <SmartGridModal />
  })
  

  TS

  import {
    extension,
    Screen,
    ScrollView,
    Selectable,
    Stepper,
    Text,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension(
    'pos.home.modal.render',
    (root) => {
      let value = 0;
  
      const mainScreen = root.createComponent(
        Screen,
        {name: 'selectable', title: 'Selectable'},
      );
      const scrollView =
        root.createComponent(ScrollView);
      const text = root.createComponent(
        Text,
        null,
        value.toString(),
      );
      const selectable = root.createComponent(
        Selectable,
        {
          onPress: () => {
            value += 1;
            text.replaceChildren(value.toString());
          },
        },
      );
  
      selectable.append(text);
      scrollView.append(selectable);
      mainScreen.append(scrollView);
      root.append(mainScreen);
    },
  );