Skip to content
React Native SwiftUI

Quick Start

This guide will help you understand the core concepts and get you building with React Native SwiftUI quickly.

Basic Structure

Section titled “Basic Structure”

Every SwiftUI component tree must be wrapped in a SwiftUI root container:

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


export function MyComponent() {
  return (
    <View style={{ flex: 1 }}>
      <SwiftUI style={{ flex: 1 }}>
        {/* SwiftUI components go here */}
      </SwiftUI>
    </View>
  );
}

The SwiftUI component acts as a bridge between React Native and native SwiftUI. All SwiftUI components must be descendants of this root container.

Using Components

Section titled “Using Components”

Components are accessed via the SwiftUI namespace:

<SwiftUI style={{ flex: 1 }}>
  <SwiftUI.VStack>
    <SwiftUI.Text text="Hello World" />
    <SwiftUI.Button title="Press Me" onPress={() => console.log('Pressed!')} />
  </SwiftUI.VStack>
</SwiftUI>

Building a Simple Form

Section titled “Building a Simple Form”

Here’s a complete example of a form with various input types:

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


export function SimpleForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [birthDate, setBirthDate] = useState(new Date());
  const [notifications, setNotifications] = useState(true);
  const [theme, setTheme] = useState('system');


  const handleSubmit = () => {
    Alert.alert('Form Submitted', JSON.stringify({
      name,
      email,
      birthDate: birthDate.toISOString(),
      notifications,
      theme,
    }, null, 2));
  };


  return (
    <View style={{ flex: 1 }}>
      <SwiftUI style={{ flex: 1 }}>
        <SwiftUI.Form>
          <SwiftUI.Section header="Personal Information">
            <SwiftUI.TextField
              label="Name"
              placeholder="Enter your name"
              text={name}
              onChange={setName}
            />
            <SwiftUI.TextField
              label="Email"
              placeholder="Enter your email"
              text={email}
              keyboardType="emailAddress"
              onChange={setEmail}
            />
            <SwiftUI.DatePicker
              label="Birth Date"
              selection={birthDate}
              displayedComponents="date"
              onChange={setBirthDate}
            />
          </SwiftUI.Section>


          <SwiftUI.Section header="Preferences">
            <SwiftUI.Toggle
              label="Enable Notifications"
              isOn={notifications}
              onChange={setNotifications}
            />
            <SwiftUI.Picker
              label="Theme"
              selection={theme}
              options={['system', 'light', 'dark']}
              onChange={setTheme}
            />
          </SwiftUI.Section>


          <SwiftUI.Section>
            <SwiftUI.Button
              title="Submit"
              onPress={handleSubmit}
            />
          </SwiftUI.Section>
        </SwiftUI.Form>
      </SwiftUI>
    </View>
  );
}

Key Concepts

Section titled “Key Concepts”

Components Return Null

Section titled “Components Return Null”

SwiftUI components don’t render React Native views - they register themselves in a view tree that’s rendered natively. This means:

  • Components return null in JSX
  • Rendering happens entirely on the native side
  • You can’t mix React Native views inside the SwiftUI tree

State Management

Section titled “State Management”

State works just like regular React:

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


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

Event Handling

Section titled “Event Handling”

Events follow React patterns with callbacks:

<SwiftUI.Button
  title="Press Me"
  onPress={() => console.log('Button pressed')}
/>


<SwiftUI.TextField
  text={text}
  onChange={(value) => setText(value)}
  onFocus={() => console.log('Field focused')}
  onBlur={() => console.log('Field blurred')}
/>

Layout Components

Section titled “Layout Components”

Use stack components for layout:

<SwiftUI.VStack spacing={10}>
  <SwiftUI.Text text="Vertical stack" />
  <SwiftUI.HStack spacing={20}>
    <SwiftUI.Text text="Left" />
    <SwiftUI.Spacer />
    <SwiftUI.Text text="Right" />
  </SwiftUI.HStack>
</SwiftUI.VStack>

Next Steps

Section titled “Next Steps”