Components Overview

React Native SwiftUI provides a comprehensive set of components that render native SwiftUI views. This page explains the architecture and patterns used throughout the library.

Architecture

The SwiftUI Root

All SwiftUI components must be wrapped in a SwiftUI root container:

import { SwiftUI } from '@mgcrea/react-native-swiftui';
import { View } from 'react-native';

<View style={{ flex: 1 }}>
  <SwiftUI style={{ flex: 1 }}>
    {/* Components here */}
  </SwiftUI>
</View>

The root component:

• Creates a bridge between React and native SwiftUI
• Manages the component tree and event handling
• Renders all descendant components natively

Component Registration

When you use a SwiftUI component, it doesn’t render a React Native view. Instead, it:

1. Registers itself in a virtual tree
2. Returns null from the render function
3. The native side reads this tree and renders actual SwiftUI views

This means you cannot inspect SwiftUI components in React DevTools, but they will appear in Xcode’s view debugger.

Component Categories

Form Controls

Input components for building forms:

Component	Description
TextField	Text input field
NumberField	Numeric input with formatting
Toggle	Boolean switch
Slider	Range value selector
Stepper	Increment/decrement control
DatePicker	Date and time selection
Picker	Single value selection
MultiPicker	Multi-column picker

Display Components

Components for displaying content:

Component	Description
Text	Text display
Image	Image display
Button	Tappable button

Container Components

Components for organizing content:

Component	Description
Form	Form container with iOS styling
Section	Grouped content with header/footer
Sheet	Modal sheet presentation
SheetPicker	Searchable picker in a sheet

Layout Components

See the Layout section for:

• HStack, VStack, ZStack
• LazyVGrid
• Spacer, Group, Rectangle

Common Patterns

State Binding

All interactive components follow a controlled component pattern:

const [value, setValue] = useState('');

<SwiftUI.TextField
  text={value}
  onChange={setValue}
/>

Event Handlers

Events are passed as callback props:

<SwiftUI.Button
  title="Submit"
  onPress={() => handleSubmit()}
/>

<SwiftUI.TextField
  text={value}
  onChange={(newValue) => setValue(newValue)}
  onFocus={() => console.log('Focused')}
  onBlur={() => console.log('Blurred')}
/>

Styling

Components accept a style prop for customization:

<SwiftUI.Text
  text="Styled text"
  style={{
    color: 'blue',
    fontSize: 18,
    fontWeight: 'bold',
  }}
/>

See the Styling Guide for details on available style properties.

Limitations

No Mixed Content

You cannot place React Native views inside the SwiftUI tree:

// ❌ Won't work
<SwiftUI style={{ flex: 1 }}>
  <View> {/* Regular RN View inside SwiftUI */}
    <SwiftUI.Text text="Hello" />
  </View>
</SwiftUI>

// ✅ Correct
<SwiftUI style={{ flex: 1 }}>
  <SwiftUI.VStack>
    <SwiftUI.Text text="Hello" />
  </SwiftUI.VStack>
</SwiftUI>

iOS Only

SwiftUI components only render on iOS. For cross-platform apps, you’ll need platform-specific code:

import { Platform } from 'react-native';

{Platform.OS === 'ios' ? (
  <SwiftUI style={{ flex: 1 }}>
    <SwiftUI.Form>...</SwiftUI.Form>
  </SwiftUI>
) : (
  <AndroidForm />
)}