Custom Views

There are certain instances when you'll need to use a native SwiftUI view within Judo. This may be the case for a complex custom view that is bespoke to your product, or perhaps embedding a map or video player view. This can be done using a Component-type property in your Judo.

Overview

The Judo SDK supports overriding Component Properties with a custom SwiftUI view using the same properties API introduced previously which facilitates overriding Text, Number, and Image Properties.

Like text and image properties being passed to a Judo component via JudoView are bindable to Text and Image layers within that component, a SwiftUI view type property can be bound to Component Instance layer.

Set up your Judo file

Review our guide Using Custom SwiftUI Views to learn how to set up a Judo component to accept a custom SwiftUI view as a Component-type property.

Implement your custom SwiftUI view

Define your custom SwiftUI view to embed within your Judo UI as a custom component, and then pass it as a value to the JudoView using the property modifier.

struct ContentView: View {
    var body: some View {
        JudoView("Main")
            .property("customComponent", CustomView())
    }
}

/// This is the view you are going to embed within your Judo UI as a custom component.
struct CustomView: View {
    var body: some View {
        // custom SwiftUI, such as MapKit, AVPlayer, etc.
        // UIKit can be wrapped in a UIViewRepresentable.
    }
}