FormattedTextField

Render a FormattedTextField that validates email addresses

import React, {useState} from 'react';
import {
  Navigator,
  Screen,
  Text,
  ScrollView,
  FormattedTextField,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
  const [textFieldValue, setTextFieldValue] =
    useState('');

  return (
    <Navigator>
      <Screen
        name="TextArea"
        title="Text Area Example"
      >
        <ScrollView>
          <FormattedTextField
            placeholder="Email address"
            inputType="email"
            onChangeText={setTextFieldValue}
          />
          <Text>{textFieldValue}</Text>
        </ScrollView>
      </Screen>
    </Navigator>
  );
};

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

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

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

    const text = root.createComponent(Text);

    const textField = root.createComponent(
      FormattedTextField,
      {
        placeholder: 'Email address',
        inputType: 'email',
        onChangeText: (newText) => {
          text.replaceChildren(newText);
        },
      },
    );

    const scrollView =
      root.createComponent(ScrollView);

    homeScreen.append(scrollView);
    scrollView.append(textField);
    scrollView.append(text);

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