# Arco Design Mobile

Arco Design Mobile is a comprehensive React UI component library designed specifically for mobile H5 and WebView environments. Built on TypeScript and Less, it provides 50+ production-ready components that follow the Arco Design system principles with pixel-perfect restoration and optimized touch interactions. The library has been battle-tested in high-traffic online environments and offers features like server-side rendering, internationalization, on-demand imports, and theme customization.

The library uses rem-based responsive design (base font size: 50px) and requires a flexible.js implementation or similar tool to dynamically set the root font size based on screen dimensions. Components are organized in a monorepo structure using Lerna, with the main package published as `@arco-design/mobile-react`. The architecture supports both ESM and CommonJS module formats, enabling flexible integration patterns including tree-shaking for optimal bundle sizes.

## Installation and Setup

### Installing the Package

```bash
npm install @arco-design/mobile-react
# or
yarn add @arco-design/mobile-react
```

### Configuring Responsive Scaling

```javascript
import setRootPixel from '@arco-design/mobile-react/tools/flexible';

// Initialize with default settings (baseFontSize: 50, sketchWidth: 375, maxFontSize: 64)
setRootPixel();

// Or customize settings
const removeRootPixel = setRootPixel(37.5);  // Custom base font size

// Later, if needed, remove the listener
removeRootPixel();
```

### Babel Plugin for Tree-Shaking (Webpack/Babel)

```javascript
// .babelrc.js or babel.config.js
module.exports = {
  plugins: [
    ["import", {
      "libraryName": "@arco-design/mobile-react",
      "libraryDirectory": "esm",  // Use "cjs" for SSR
      "style": (path) => `${path}/style`
    }, "@arco-design/mobile-react"],
    ["import", {
      "libraryName": "@arco-design/mobile-react/esm/icon",
      "libraryDirectory": "",
      "camel2DashComponentName": false
    }, "@arco-design/mobile-react/esm/icon"]
  ]
};
```

### Vite Plugin for Tree-Shaking

```javascript
// vite.config.ts
import { defineConfig } from 'vite';
import usePluginImport from 'vite-plugin-importer';

export default defineConfig({
  plugins: [
    usePluginImport({
      libraryName: "@arco-design/mobile-react",
      libraryDirectory: "esm",
      style: (path) => `${path}/style`,
    }),
    usePluginImport({
      libraryName: "@arco-design/mobile-react/esm/icon",
      libraryDirectory: "",
      camel2DashComponentName: false,
    })
  ]
});
```

## Button Component

### Basic Button Usage

```typescript
import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@arco-design/mobile-react/esm/button';
import '@arco-design/mobile-react/esm/button/style';

function ButtonExample() {
  const handleClick = (e) => {
    console.log('Button clicked', e);
  };

  const handleDisabledClick = (e) => {
    console.log('Disabled button clicked', e);
  };

  return (
    <div style={{ padding: '16px' }}>
      {/* Primary button */}
      <Button type="primary" onClick={handleClick}>
        Primary Button
      </Button>

      {/* Default button */}
      <Button type="default" style={{ marginTop: '12px' }}>
        Default Button
      </Button>

      {/* Ghost button */}
      <Button type="ghost" style={{ marginTop: '12px' }}>
        Ghost Button
      </Button>

      {/* Loading state */}
      <Button
        type="primary"
        loading={true}
        showTextWhenLoading={true}
        style={{ marginTop: '12px' }}
      >
        Loading...
      </Button>

      {/* Disabled button with callback */}
      <Button
        type="primary"
        disabled={true}
        onClickDisabled={handleDisabledClick}
        style={{ marginTop: '12px' }}
      >
        Disabled Button
      </Button>

      {/* Custom size */}
      <Button type="primary" size="small" style={{ marginTop: '12px' }}>
        Small Button
      </Button>

      {/* Round shape with icon */}
      <Button
        type="primary"
        shape="round"
        icon={<span>🔥</span>}
        style={{ marginTop: '12px' }}
      >
        Round with Icon
      </Button>

      {/* Inline button */}
      <Button type="primary" inline={true} style={{ marginTop: '12px' }}>
        Inline Button
      </Button>
    </div>
  );
}

ReactDOM.render(<ButtonExample />, document.getElementById('root'));
```

## Dialog Component

### Imperative Dialog Methods

```typescript
import React, { useState } from 'react';
import Dialog from '@arco-design/mobile-react/esm/dialog';
import '@arco-design/mobile-react/esm/dialog/style';

function DialogExample() {
  // Alert dialog (single OK button)
  const showAlert = () => {
    const { close, update } = Dialog.alert({
      title: 'Success',
      children: 'Your operation was completed successfully!',
      okText: 'Got it',
      onOk: (e) => {
        console.log('OK clicked');
        // Return true to prevent auto-close
        return false;
      },
      onClose: (scene) => {
        console.log('Dialog closed', scene);
      }
    });

    // Update dialog after 2 seconds
    setTimeout(() => {
      update({
        children: 'Updated content!'
      });
    }, 2000);

    // Programmatically close
    // close();
  };

  // Confirm dialog (OK and Cancel buttons)
  const showConfirm = () => {
    Dialog.confirm({
      title: 'Delete Confirmation',
      children: 'Are you sure you want to delete this item? This action cannot be undone.',
      okText: 'Delete',
      cancelText: 'Cancel',
      platform: 'ios',  // or 'android'
      onOk: async (e) => {
        console.log('Deleting...');
        // Simulate async operation
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log('Deleted');
        return false;  // Allow close
      },
      onCancel: (e) => {
        console.log('Cancelled');
      }
    });
  };

  // Custom dialog
  const showCustomDialog = () => {
    Dialog.open({
      title: 'Custom Dialog',
      children: (
        <div style={{ padding: '16px' }}>
          <p>This is a custom dialog with custom footer</p>
          <input type="text" placeholder="Enter something" style={{ width: '100%' }} />
        </div>
      ),
      footer: [
        {
          content: 'Action 1',
          onClick: (e) => {
            console.log('Action 1');
            return true;  // Prevent close
          }
        },
        {
          content: 'Action 2',
          className: 'custom-button',
          onClick: (e) => {
            console.log('Action 2');
          }
        },
        {
          content: 'Close',
          onClick: (e) => {
            console.log('Close');
          }
        }
      ],
      footerType: 'button',  // 'grid' or 'button'
      maskClosable: true
    });
  };

  return (
    <div style={{ padding: '16px' }}>
      <button onClick={showAlert}>Show Alert</button>
      <button onClick={showConfirm} style={{ marginLeft: '8px' }}>Show Confirm</button>
      <button onClick={showCustomDialog} style={{ marginLeft: '8px' }}>Show Custom</button>
    </div>
  );
}

export default DialogExample;
```

### Controlled Dialog

```typescript
import React, { useState } from 'react';
import Dialog from '@arco-design/mobile-react/esm/dialog';
import '@arco-design/mobile-react/esm/dialog/style';

function ControlledDialogExample() {
  const [visible, setVisible] = useState(false);
  const [content, setContent] = useState('Initial content');

  return (
    <>
      <button onClick={() => setVisible(true)}>Open Dialog</button>

      <Dialog
        visible={visible}
        close={(e) => setVisible(false)}
        title="Controlled Dialog"
        footer={[
          {
            content: 'Cancel',
            onClick: () => setVisible(false)
          },
          {
            content: 'Confirm',
            onClick: () => {
              console.log('Confirmed');
              setVisible(false);
            }
          }
        ]}
        maskClosable={true}
        onClose={(scene) => {
          console.log('Dialog closed:', scene);
        }}
      >
        <div style={{ padding: '16px' }}>
          {content}
        </div>
      </Dialog>
    </>
  );
}
```

## Toast Component

### Toast Notifications

```typescript
import React from 'react';
import Toast from '@arco-design/mobile-react/esm/toast';
import '@arco-design/mobile-react/esm/toast/style';

function ToastExample() {
  // Info toast (text only)
  const showInfo = () => {
    const { close, update } = Toast.info('This is an info message');

    // Update after 1 second
    setTimeout(() => {
      update({ content: 'Updated message' });
    }, 1000);
  };

  // Success toast
  const showSuccess = () => {
    Toast.success({
      content: 'Operation successful!',
      duration: 2000,  // Auto close after 2s
      direction: 'center',  // 'top' | 'center' | 'bottom'
      onClose: () => {
        console.log('Toast closed');
      }
    });
  };

  // Error toast
  const showError = () => {
    Toast.error({
      content: 'Something went wrong!',
      duration: 3000
    });
  };

  // Loading toast
  const showLoading = () => {
    const { close } = Toast.loading({
      content: 'Loading...',
      duration: 0,  // Won't auto close
      disableBodyTouch: true  // Disable background interaction
    });

    // Simulate async operation
    setTimeout(() => {
      close();
      Toast.success('Loaded successfully!');
    }, 3000);
  };

  // Warning toast
  const showWarning = () => {
    Toast.warn('This is a warning message');
  };

  // Custom layout
  const showCustomLayout = () => {
    Toast.info({
      content: 'Horizontal layout message',
      layout: 'horizontal',  // 'vertical' | 'horizontal'
      icon: <span style={{ fontSize: '24px' }}>🎉</span>,
      duration: 2000
    });
  };

  // Toast at top
  const showTopToast = () => {
    Toast.info({
      content: 'Top positioned toast',
      direction: 'top'
    });
  };

  return (
    <div style={{ padding: '16px' }}>
      <button onClick={showInfo}>Info Toast</button>
      <button onClick={showSuccess} style={{ marginLeft: '8px' }}>Success Toast</button>
      <button onClick={showError} style={{ marginLeft: '8px' }}>Error Toast</button>
      <button onClick={showLoading} style={{ marginTop: '8px' }}>Loading Toast</button>
      <button onClick={showWarning} style={{ marginLeft: '8px' }}>Warning Toast</button>
      <button onClick={showCustomLayout} style={{ marginLeft: '8px' }}>Custom Layout</button>
      <button onClick={showTopToast} style={{ marginTop: '8px' }}>Top Toast</button>
    </div>
  );
}

export default ToastExample;
```

## Input Component

### Text Input with Validation

```typescript
import React, { useState } from 'react';
import Input from '@arco-design/mobile-react/esm/input';
import '@arco-design/mobile-react/esm/input/style';

function InputExample() {
  const [value, setValue] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <div style={{ padding: '16px' }}>
      {/* Basic input */}
      <Input
        placeholder="Enter your name"
        value={value}
        onChange={(e, val) => setValue(val)}
        clearable={true}
        label="Name"
        border="bottom"
      />

      {/* Email input with validation */}
      <Input
        type="email"
        placeholder="Enter email"
        value={email}
        onChange={(e, val) => setEmail(val)}
        validator={/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/}
        label="Email"
        required={true}
        clearable={true}
        border="bottom"
        style={{ marginTop: '16px' }}
      />

      {/* Password input */}
      <Input
        type="password"
        placeholder="Enter password"
        value={password}
        onInput={(e, val) => setPassword(val)}
        maxLength={20}
        label="Password"
        required={true}
        clearable={true}
        clearShowType="always"
        border="bottom"
        style={{ marginTop: '16px' }}
      />

      {/* Input with prefix and suffix */}
      <Input
        placeholder="Enter amount"
        prefix={<span>$</span>}
        suffix={<span>USD</span>}
        border="all"
        style={{ marginTop: '16px' }}
      />

      {/* Input with prepend and append */}
      <Input
        placeholder="Enter URL"
        prepend="https://"
        append=".com"
        border="all"
        style={{ marginTop: '16px' }}
      />

      {/* Disabled input */}
      <Input
        value="Disabled input"
        disabled={true}
        border="bottom"
        style={{ marginTop: '16px' }}
      />

      {/* Read-only input */}
      <Input
        value="Read-only input"
        readOnly={true}
        border="bottom"
        style={{ marginTop: '16px' }}
      />

      <div style={{ marginTop: '16px', color: '#666' }}>
        Current values: {value} / {email} / {password}
      </div>
    </div>
  );
}

export default InputExample;
```

## Form Component

### Complete Form with Validation

```typescript
import React, { useRef } from 'react';
import Form from '@arco-design/mobile-react/esm/form';
import Input from '@arco-design/mobile-react/esm/input';
import Textarea from '@arco-design/mobile-react/esm/textarea';
import Switch from '@arco-design/mobile-react/esm/switch';
import Button from '@arco-design/mobile-react/esm/button';
import Toast from '@arco-design/mobile-react/esm/toast';
import '@arco-design/mobile-react/esm/form/style';
import '@arco-design/mobile-react/esm/input/style';
import '@arco-design/mobile-react/esm/textarea/style';
import '@arco-design/mobile-react/esm/switch/style';
import '@arco-design/mobile-react/esm/button/style';
import '@arco-design/mobile-react/esm/toast/style';

function FormExample() {
  const [form] = Form.useForm();

  const handleSubmit = (values, errors) => {
    if (errors && errors.length > 0) {
      Toast.error('Please fix form errors');
      return;
    }
    console.log('Form submitted:', values);
    Toast.success('Form submitted successfully!');
  };

  const handleSubmitFailed = (values, errorInfo) => {
    console.log('Submit failed:', values, errorInfo);
    Toast.error('Form validation failed');
  };

  const handleReset = () => {
    form.resetFields();
    Toast.info('Form reset');
  };

  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={{
        username: '',
        email: '',
        age: '',
        bio: '',
        agree: false
      }}
      onSubmit={handleSubmit}
      onSubmitFailed={handleSubmitFailed}
      onChange={(changedValues, allValues) => {
        console.log('Form changed:', changedValues, allValues);
      }}
    >
      <Form.Item
        field="username"
        label="Username"
        required={true}
        rules={[
          {
            required: true,
            message: 'Username is required'
          },
          {
            type: 'string',
            minLength: 3,
            message: 'Username must be at least 3 characters'
          }
        ]}
      >
        <Input placeholder="Enter username" clearable={true} />
      </Form.Item>

      <Form.Item
        field="email"
        label="Email"
        required={true}
        rules={[
          {
            required: true,
            message: 'Email is required'
          },
          {
            type: 'email',
            message: 'Please enter a valid email'
          }
        ]}
      >
        <Input type="email" placeholder="Enter email" clearable={true} />
      </Form.Item>

      <Form.Item
        field="age"
        label="Age"
        rules={[
          {
            type: 'number',
            min: 18,
            max: 120,
            message: 'Age must be between 18 and 120'
          }
        ]}
      >
        <Input type="number" placeholder="Enter age" />
      </Form.Item>

      <Form.Item
        field="bio"
        label="Bio"
        rules={[
          {
            type: 'string',
            maxLength: 200,
            message: 'Bio cannot exceed 200 characters'
          }
        ]}
      >
        <Textarea placeholder="Tell us about yourself" maxLength={200} />
      </Form.Item>

      <Form.Item
        field="agree"
        required={true}
        rules={[
          {
            validator: (value) => {
              if (!value) {
                return 'You must agree to terms';
              }
            }
          }
        ]}
      >
        <Switch />
      </Form.Item>

      <div style={{ padding: '16px', display: 'flex', gap: '12px' }}>
        <Button type="primary" onClick={() => form.submit()}>
          Submit
        </Button>
        <Button type="default" onClick={handleReset}>
          Reset
        </Button>
        <Button
          type="ghost"
          onClick={() => {
            console.log('Current values:', form.getFieldsValue());
          }}
        >
          Get Values
        </Button>
      </div>
    </Form>
  );
}

export default FormExample;
```

## Picker Component

### Cascading Picker

```typescript
import React, { useState } from 'react';
import Picker from '@arco-design/mobile-react/esm/picker';
import Cell from '@arco-design/mobile-react/esm/cell';
import '@arco-design/mobile-react/esm/picker/style';
import '@arco-design/mobile-react/esm/cell/style';

function PickerExample() {
  const [visible, setVisible] = useState(false);
  const [selectedValue, setSelectedValue] = useState(['beijing', 'chaoyang']);

  // Cascading data structure
  const cascadeData = [
    {
      label: 'Beijing',
      value: 'beijing',
      children: [
        { label: 'Chaoyang District', value: 'chaoyang' },
        { label: 'Haidian District', value: 'haidian' },
        { label: 'Dongcheng District', value: 'dongcheng' }
      ]
    },
    {
      label: 'Shanghai',
      value: 'shanghai',
      children: [
        { label: 'Pudong New Area', value: 'pudong' },
        { label: 'Huangpu District', value: 'huangpu' },
        { label: 'Xuhui District', value: 'xuhui' }
      ]
    },
    {
      label: 'Guangzhou',
      value: 'guangzhou',
      children: [
        { label: 'Tianhe District', value: 'tianhe' },
        { label: 'Yuexiu District', value: 'yuexiu' }
      ]
    }
  ];

  const getSelectedLabels = () => {
    const findLabel = (data, values, index = 0) => {
      if (index >= values.length) return [];
      const item = data.find(d => d.value === values[index]);
      if (!item) return [];
      return [
        item.label,
        ...(item.children ? findLabel(item.children, values, index + 1) : [])
      ];
    };
    return findLabel(cascadeData, selectedValue).join(' - ');
  };

  return (
    <>
      <Cell
        label="Select Location"
        value={getSelectedLabels() || 'Please select'}
        showArrow={true}
        onClick={() => setVisible(true)}
      />

      <Picker
        visible={visible}
        data={cascadeData}
        cascade={true}
        cols={2}
        value={selectedValue}
        title="Select Location"
        okText="Confirm"
        dismissText="Cancel"
        onOk={(value, data) => {
          console.log('Selected:', value, data);
          setSelectedValue(value);
          setVisible(false);
        }}
        onDismiss={() => {
          setVisible(false);
        }}
        onPickerChange={(value, index, data) => {
          console.log('Picker changed:', value, index, data);
        }}
        maskClosable={false}
      />
    </>
  );
}

export default PickerExample;
```

### Multi-Column Picker (Non-Cascading)

```typescript
import React, { useState } from 'react';
import Picker from '@arco-design/mobile-react/esm/picker';
import Cell from '@arco-design/mobile-react/esm/cell';

function MultiColumnPickerExample() {
  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState(['2024', '01', '01']);

  // Non-cascading multi-column data
  const years = Array.from({ length: 10 }, (_, i) => ({
    label: `${2020 + i}`,
    value: `${2020 + i}`
  }));

  const months = Array.from({ length: 12 }, (_, i) => ({
    label: `${String(i + 1).padStart(2, '0')}`,
    value: `${String(i + 1).padStart(2, '0')}`
  }));

  const days = Array.from({ length: 31 }, (_, i) => ({
    label: `${String(i + 1).padStart(2, '0')}`,
    value: `${String(i + 1).padStart(2, '0')}`
  }));

  return (
    <>
      <Cell
        label="Select Date"
        value={value.join('-')}
        showArrow={true}
        onClick={() => setVisible(true)}
      />

      <Picker
        visible={visible}
        data={[years, months, days]}
        cascade={false}
        value={value}
        title="Select Date"
        rows={5}
        onOk={(val, data) => {
          setValue(val);
          setVisible(false);
        }}
        onDismiss={() => setVisible(false)}
      />
    </>
  );
}
```

## Tabs Component

### Swipeable Tabs

```typescript
import React, { useState } from 'react';
import Tabs from '@arco-design/mobile-react/esm/tabs';
import '@arco-design/mobile-react/esm/tabs/style';

function TabsExample() {
  const [activeTab, setActiveTab] = useState(0);

  const tabs = [
    { title: 'Home' },
    { title: 'Messages', badge: 5 },
    { title: 'Settings' },
    { title: 'Profile' }
  ];

  return (
    <div style={{ height: '100vh' }}>
      <Tabs
        tabs={tabs}
        activeTab={activeTab}
        type="line"
        tabBarPosition="top"
        tabBarScroll={true}
        swipeable={true}
        useCaterpillar={true}
        onChange={(tab, index, from) => {
          console.log('Tab changed:', tab, index, from);
          setActiveTab(index);
        }}
        onAfterChange={(tab, index, from) => {
          console.log('Tab change animation completed');
        }}
        onTabClick={(tab, index, e) => {
          console.log('Tab clicked:', tab, index);
        }}
      >
        <div style={{ padding: '16px' }}>
          <h3>Home Content</h3>
          <p>This is the home page content. Swipe left to see more tabs.</p>
        </div>

        <div style={{ padding: '16px' }}>
          <h3>Messages Content</h3>
          <p>You have 5 new messages.</p>
        </div>

        <div style={{ padding: '16px' }}>
          <h3>Settings Content</h3>
          <p>Configure your app settings here.</p>
        </div>

        <div style={{ padding: '16px' }}>
          <h3>Profile Content</h3>
          <p>Your profile information.</p>
        </div>
      </Tabs>
    </div>
  );
}

export default TabsExample;
```

### Card Style Tabs with Lazy Loading

```typescript
import React from 'react';
import Tabs from '@arco-design/mobile-react/esm/tabs';

function LazyTabsExample() {
  const tabs = Array.from({ length: 10 }, (_, i) => ({
    title: `Tab ${i + 1}`
  }));

  return (
    <Tabs
      tabs={tabs}
      defaultActiveTab={0}
      type="card"
      tabBarPosition="top"
      lazyloadCount={1}  // Only load current and adjacent tabs
      hideContentStyle={null}  // Destroy non-visible content
      renderHideContent={(index, pane) => {
        return <div>Tab {index + 1} (Not loaded yet)</div>;
      }}
      onAfterChange={(tab, index) => {
        console.log('Loading content for tab', index);
      }}
    >
      {tabs.map((_, index) => (
        <div key={index} style={{ padding: '16px', minHeight: '400px' }}>
          <h3>Tab {index + 1} Content</h3>
          <p>This content is lazy loaded.</p>
          <div style={{ marginTop: '20px' }}>
            {Array.from({ length: 20 }, (_, i) => (
              <p key={i}>Content line {i + 1}</p>
            ))}
          </div>
        </div>
      ))}
    </Tabs>
  );
}
```

## ActionSheet Component

### Action Sheet with Multiple Options

```typescript
import React from 'react';
import ActionSheet from '@arco-design/mobile-react/esm/action-sheet';
import Cell from '@arco-design/mobile-react/esm/cell';
import '@arco-design/mobile-react/esm/action-sheet/style';
import '@arco-design/mobile-react/esm/cell/style';

function ActionSheetExample() {
  const showBasicActionSheet = () => {
    const { close, update } = ActionSheet.open({
      items: [
        {
          content: 'Take Photo',
          onClick: () => {
            console.log('Take photo clicked');
          }
        },
        {
          content: 'Choose from Album',
          onClick: () => {
            console.log('Choose from album clicked');
          }
        },
        {
          content: 'View Photo',
          onClick: () => {
            console.log('View photo clicked');
          }
        }
      ],
      cancelText: 'Cancel',
      onClose: (scene) => {
        console.log('ActionSheet closed:', scene);
      }
    });
  };

  const showActionSheetWithDescription = () => {
    ActionSheet.open({
      title: 'Delete Account',
      subTitle: 'This action cannot be undone. All your data will be permanently deleted.',
      items: [
        {
          content: 'Delete Account',
          status: 'danger',
          onClick: () => {
            console.log('Account deletion confirmed');
          }
        }
      ],
      cancelText: 'Cancel'
    });
  };

  const showActionSheetWithStatus = () => {
    ActionSheet.open({
      items: [
        { content: 'Normal Option' },
        {
          content: 'Disabled Option',
          status: 'disabled'
        },
        {
          content: 'Loading...',
          status: 'loading',
          onClick: () => true  // Return true to prevent close
        },
        {
          content: 'Delete',
          status: 'danger',
          onClick: () => {
            console.log('Danger action');
          }
        }
      ],
      cancelText: 'Cancel'
    });
  };

  return (
    <div>
      <Cell
        label="Basic ActionSheet"
        showArrow={true}
        onClick={showBasicActionSheet}
      />
      <Cell
        label="With Description"
        showArrow={true}
        onClick={showActionSheetWithDescription}
      />
      <Cell
        label="With Status"
        showArrow={true}
        onClick={showActionSheetWithStatus}
      />
    </div>
  );
}

export default ActionSheetExample;
```

## Context Provider (Global Configuration)

### Theme and Locale Configuration

```typescript
import React from 'react';
import { ContextProvider } from '@arco-design/mobile-react/esm/context-provider';
import enUS from '@arco-design/mobile-react/esm/locale/en-US';
import zhCN from '@arco-design/mobile-react/esm/locale/zh-CN';
import Button from '@arco-design/mobile-react/esm/button';
import Dialog from '@arco-design/mobile-react/esm/dialog';

function App() {
  const [isDark, setIsDark] = React.useState(false);
  const [locale, setLocale] = React.useState(enUS);

  return (
    <ContextProvider
      prefixCls="arco"
      system="ios"  // or "android" or "pc"
      useDarkMode={false}
      isDarkMode={isDark}
      darkModeSelector="arco-theme-dark"
      theme={{
        'primary-color': '#3370FF',  // Custom primary color
        'success-color': '#00B42A',
        'warning-color': '#FF7D00'
      }}
      locale={locale}
      useRtl={false}
      onDarkModeChange={(isDarkMode) => {
        console.log('Dark mode changed:', isDarkMode);
      }}
    >
      <div style={{ padding: '16px' }}>
        <Button
          type="primary"
          onClick={() => setIsDark(!isDark)}
        >
          Toggle Dark Mode
        </Button>

        <Button
          type="default"
          onClick={() => setLocale(locale === enUS ? zhCN : enUS)}
          style={{ marginLeft: '8px' }}
        >
          Switch Language
        </Button>

        <Button
          type="primary"
          onClick={() => {
            Dialog.alert({
              title: 'Test',
              children: 'This dialog uses the global locale configuration'
            });
          }}
          style={{ marginTop: '12px' }}
        >
          Show Dialog
        </Button>
      </div>
    </ContextProvider>
  );
}

export default App;
```

## Summary

Arco Design Mobile serves as a production-ready solution for building mobile-first web applications with React. Its component library covers all essential UI patterns from basic elements (buttons, inputs) to complex interactions (pickers, tabs, forms). Each component is designed with mobile touch interactions in mind, offering smooth animations, gesture support, and responsive layouts. The library's architecture supports multiple integration methods including full imports for rapid prototyping and tree-shaking for optimized production builds.

The framework excels in enterprise scenarios requiring consistent design systems, internationalization support, and theme customization. Components like Form provide comprehensive validation APIs, while Dialog and Toast offer both imperative and declarative usage patterns. The ContextProvider enables global configuration for themes, locales, and platform-specific behaviors. With built-in TypeScript support, SSR compatibility, and extensive customization options through Less variables and CSS variables, Arco Design Mobile provides developers with the flexibility to build scalable mobile applications while maintaining design consistency across different platforms and devices.