expo-ui-swift-ui

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Create local Expo module for custom SwiftUI components

To create a custom SwiftUI component, start by creating a local Expo module in your project using the command: npx create-expo-module@latest --local my-ui

Add ExpoUI as podspec dependency

Add ExpoUI as a dependency in your module's podspec file by including s.dependency 'ExpoUI' in the Pod::Spec.new block.

Custom SwiftUI view structure and requirements

A custom SwiftUI view requires two parts: a Props class that extends UIBaseViewProps from ExpoUI to support the modifiers prop, and a View struct that conforms to ExpoSwiftUI.View protocol. The View struct must have an @ObservedObject props property and a body property that defines the view hierarchy.

Register SwiftUI view with ExpoUIView

Register your SwiftUI view in the module definition using ExpoUIView(YourCustomView.self). This wraps the SwiftUI view with modifier support and makes it available to JavaScript.

Render React children in SwiftUI view

To render React children in your custom SwiftUI view, use the Children() component within your view body.

Create TypeScript wrapper for custom SwiftUI view

Create a TypeScript wrapper component that uses requireNativeView to get the native view, extends CommonViewModifierProps, and calls createViewModifierEventListener(modifiers) to enable event-based modifiers like onTapGesture and onAppear.

Custom modifier structure with ViewModifier and Record

Custom modifiers must conform to both ViewModifier and Record protocols. Use @Field properties for configurable parameters and implement the body method that applies the visual modifications to content.

Register custom modifiers with ViewModifierRegistry

Register custom modifiers in the module definition using OnCreate to call ViewModifierRegistry.register(name) with a closure that instantiates the modifier, and OnDestroy to call ViewModifierRegistry.unregister(name). This prevents race conditions with the SwiftUI render thread.

Create TypeScript function for custom modifiers

Create a TypeScript function that wraps createModifier from @expo/ui/swift-ui/modifiers. The function takes parameters as an object and returns createModifier('modifierName', params).

Example custom SwiftUI view with props and children

final class MyCustomViewProps: UIBaseViewProps { @Field var title: String = "" } struct MyCustomView: ExpoSwiftUI.View { @ObservedObject public var props: MyCustomViewProps var body: some View { VStack { Text(props.title) .font(.headline) Children() } } } This example shows a custom view with a title prop and support for child components.

Example custom border modifier implementation

struct CustomBorderModifier: ViewModifier, Record { @Field var color: Color = .red @Field var width: CGFloat = 2 @Field var cornerRadius: CGFloat = 0 func body(content: Content) -> some View { content .overlay( RoundedRectangle(cornerRadius: cornerRadius) .stroke(color, lineWidth: width) ) } } This example shows a custom modifier that applies a colored rounded border around any view.

Example custom view usage with modifiers

<MyCustomView title="Hello World" modifiers={[padding({ all: 16 }), cornerRadius(12), background('#f0f0f0')]} > <Text>Child content</Text> </MyCustomView> This example shows how to use a custom component with built-in ExpoUI modifiers applied.

Example custom modifier registration in module

OnCreate { ViewModifierRegistry.register("customBorder") { params, appContext, _ in return try CustomBorderModifier(from: params, appContext: appContext) } } OnDestroy { ViewModifierRegistry.unregister("customBorder") } This example shows how to register and unregister a custom modifier in the module definition.

Give your agent this brain