Shopify POS UI Extension BUG

[tom_pos]

Hi,

The extension not works correctly on iOS when the task is running more than 1 second.

It works correctly on Android device.

Target: pos.purchase.post.action.render (https://shopify.dev/docs/api/pos-ui-extensions/2025-01/targets/post-purchase/pos-purchase-post-actio...

-- >  "react": "^18.2.0"

-- >  Shopify CLI version 3.74.1

import React, { useEffect } from 'react';

import {
  Text,
  Screen,
  ScrollView,
  Navigator,
  useApi,
  reactExtension,
  SearchBar,
  Button,
  Banner,
} from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi();
  const [searched, setSearched] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [loading2, setLoading2] = React.useState(false);

  const buttonPress = () => {
    setLoading(true); // Start loading
    setLoading2(false);

    setTimeout(() => {
      setLoading(false); // Stop loading after 2s
      setLoading2(true);
    }, 2000);
  };

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <ScrollView>
          <Text>{`Order ID for complete checkout: ${api.order.id}`}</Text>
          <SearchBar
            onSearch = {setSearched}
            onTextChange = {setSearched}
            editable
          />
        <Text>Searched: {searched}</Text>
        <Text></Text>
        <Button 
          type = 'primary' 
          title = "Card Search" 
          isLoading = {loading} 
          onPress = {buttonPress} 
        >
        </Button>

        <Banner
          text = "Banner"
          title="Confirmation Banner"
          variant = "information"
          visible = {loading2}
          action="Ok"
        />

        </ScrollView>
      </Screen>
    </Navigator>
  );
};

export default reactExtension('pos.purchase.post.action.render', () => (
  <Modal />
));