expo-ui-swift-ui

Files (1)

• SKILL.md

SKILL.md (first lines)

# iOS UI with SwiftUI via @expo/ui

## Overview

`@expo/ui/swift-ui` provides iOS-native SwiftUI views directly in React Native Expo apps. The API mirrors SwiftUI naming conventions, so iOS developers find it immediately familiar. These components render as true SwiftUI views, not approximations.

**Core principle:** Use `@expo/ui/swift-ui` for iOS-specific screens that must feel fully native. Combine with `RNHostView` to embed React Native content inside SwiftUI hierarchies when needed.

## When to Use

- Building iOS-specific settings screens, forms, or detail views
- Needing native iOS list styles (inset grouped, sidebar)
- Implementing SwiftUI navigation patterns (NavigationStack, NavigationSplitView)
- Embedding React Native views inside SwiftUI layouts via `RNHostView`
- Using iOS-specific controls not available in cross-platform React Native

## Import Pattern

```tsx
// iOS-specific SwiftUI components
import { List, Section, Label, Toggle, Picker, Gauge } from '@expo/ui/swift-ui';

// Cross-platform @expo/ui components (Switch, Slider, etc.) work on both platforms
import { Switch, Slider } from '@expo/ui';
```

## List and Section

SwiftUI's `List` provides native iOS list rendering with section headers, footers, and grouped styles:

```tsx
import { List, Section, Label, Text } from '@expo/ui/swift-ui';

function SettingsScreen() {
  return (
    <List style={{ flex: 1 }}>
      <Section header="General" footer="Customize your app experience">
        <Label
          title="Language"
          systemImage="globe"
          onPress={() => router.push('/language')}
        />
        <Label
          title="Notifications"
          systemImage="bell"
          onPress={() => router.push('/notifications')}
        />
      </Section>

      <Section header="Account">
        <Label
          title="Profile"
          systemImage="person.circle"
          onPress={() => router.push('/profile')}
        />
        <Label
          title="Privacy"
          systemImage="lock.shield"
          onPress={() => router.push('/privacy')}
        />
      </Section>
    </List>
  );
}
```

### List Styles

```tsx
// Inset grouped (default iOS Settings style)
<List listStyle="insetGrouped" style={{ flex: 1 }}>
  {/* ... */}
</List>

// Plain list
<List listStyle="plain" style={{ flex: 1 }}>
  {/* ... */}
</List>

// Sidebar (iPad)
<List listStyle="sidebar" style={{ flex: 1 }}>
  {/* ... */}
</List>
```

## Toggle

Native iOS toggle with SwiftUI styling:

```tsx
import { Toggle } from '@expo/ui/swift-ui';
import { useState } from 'react';

function NotificationSettings() {
  const [pushEnabled, setPushEnabled] = useState(true);
  const [soundEnabled, setSoundEnabled] = useState(false);

  return (
    <List style={{ flex: 1 }}>
      <Section header="Notifications">
        <Toggle
          value={pushEnabled}
          onValueChange={setPushEnabled}
          label="Push Notifications"
          systemImage="bell.fill"
        />
        <Toggle
          value={soundEnabled}
          onValueChange={setSoundEnabled}
          label="Sound"
          systemImage="speaker.wave.2"
        />
      </Section>
    </List>
  );
}
```

## Picker

From bidah/react-native-hifi, MIT.

More from bidah/react-native-hifi