SkipUI Documentation

SkipUI works by leveraging transformations performed by the Skip transpiler. Because SwiftUI uses View objects and Compose uses @Composable functions, the transpiler performs two key transformations:

1. State Syncing: It inserts code to synchronize SwiftUI state members (like @State or @EnvironmentObject) with Compose state mechanisms. This synchronization is bidirectional.
2. ViewBuilder Transformation: It converts @ViewBuilder blocks (including View.body) into ComposeBuilder objects.

Inside a ComposeBuilder, the original logic of the body is executed within a @Composable block. Any View that would have been returned in SwiftUI is instead rendered using the Compose(context:) function, which is part of SkipUI's View API. This allows the transpiler to bridge the declarative models of both frameworks.

struct V: View {
    let isHello: Bool

    var body: some View {
        if isHello {
            Text("Hello!")
        } else {
            Text("Goodbye!")
        }
    }
}

// Transpiled Kotlin equivalent:

class V(val isHello: Boolean) : View() {
    override fun body(): View {
        return ComposeBuilder { composectx -> 
            if (isHello) {
                Text("Hello!").Compose(context = composectx)
            } else {
                Text("Goodbye!").Compose(context = composectx)
            }
            ComposeResult.ok
        }
    }
}

SkipUI's AsyncImage is built on Coil for Android. Unlike SwiftUI's AsyncImagePhase, Coil has four phases: Success, Failure, Loading, and Empty.

In SkipUI, the empty case is modeled as empty(Image?). If the phase is empty and the image is nil, the image is currently Loading. You can handle this in three ways:

1. Optimistic: Attempt to render the image immediately if it exists in the empty phase to avoid a placeholder, but beware of layout shifts if the image size is 0x0.
2. ZStack: Render the placeholder underneath the image in a ZStack during the empty phase. If the image has no transparency, it will obscure the placeholder once loaded.
3. Pessimistic: Always show the placeholder during the empty phase and only render the image once the phase is explicitly .success.

AsyncImage(url: url) { phase in
    switch phase {
    case .empty:
        if let image = phase.image {
            // Option 1: Optimistic
            image.resizable()
        } else {
            // Option 3: Pessimistic
            ProgressView()
        }
    case .failure:
        Color.red
    case .success(let image):
        image.resizable()
    }
}

When passing data from compiled Swift to a #if SKIP block, simple types bridge automatically. For SwiftUI-specific types, SkipUI provides helper functions to convert them to their Compose equivalents:

• Color: Use SkipUI.Color.asComposeColor() to get an androidx.compose.ui.graphics.Color.
• Font: Use SkipUI.Font.asComposeTextStyle() to get an androidx.compose.ui.text.TextStyle.
• Image: Call Image.Compose(context:) to render a native SwiftUI Image in Compose.
• Text: Use SkipUI.Text.localizedTextString() to get the localized string value for use in Compose.

#if SKIP
struct MessageComposer : ContentComposer {
    let message: Text
    let textColor: Color

    @Composable override func Compose(context: ComposeContext) {
        androidx.compose.material3.Text(message.localizedTextString(), color: textColor.asComposeColor())
    }
}
#endif

SkipUI provides a family of .material3 modifiers to customize underlying Android components. These modifiers follow a specific pattern:

1. Closure-based API: The modifier takes a closure that receives a Material3<Component>Options struct.
2. Immutability via copy: Every options struct implements a copy method (matching Kotlin's pattern), allowing you to modify specific properties easily.
3. Environment-based propagation: Modifiers place the configuration into the SwiftUI Environment. To affect a group of subviews, apply the modifier to the parent/root view of that group, not the individual components themselves.
4. Compose-aligned types: The properties in the options structs typically match the parameters of the corresponding androidx.compose.material3 component functions.

// Example: Customizing a Navigation Bar
TabView {
    ...
}
.material3NavigationBar { options in 
    let updatedColors = options.itemColors.copy(selectedIndicatorColor: Color.green.asComposeColor())
    return options.copy(itemColors: updatedColors) 
}