nbhasin2

SwiftUI in Firefox iOS

Decision Tree for SwiftUI vs. UIKit

The following decision tree should be used to determine whether to use SwiftUI or UIKit for new and existing components:

Existing Implementations (SwiftUI)

The following list shows components that are implemented using SwiftUI and some that have future potential for SwiftUI conversion.

| Component | Type |

nbhasin2

{
    "data": [
        {
          "appId": "org.mozilla.ios.Firefox",
          "appName": "firefox_ios",
          "application": "org.mozilla.ios.Firefox",
          "arguments": {},
          "branches": [
            {
              "feature": {

nbhasin2

{
    "data": [
      {
        "appId": "org.mozilla.ios.Firefox",
        "appName": "firefox_ios",
        "application": "org.mozilla.ios.Firefox",
        "arguments": {},
        "branches": [
          {
            "feature": {

nbhasin2

var body: some View {
    NavHandler { 
        List(cars) { car in
            NavigationLink(car.rawValue) {
                CarDetailView(car: car)
            }
        }
    }
}

nbhasin2

struct NavHandler<Content>: View where Content: View {
    @ViewBuilder var content: () -> Content
    
    var body: some View {
        if #available(iOS 16, *) {
            NavigationStack(root: content)
        } else {
            NavigationView(content: content)
        }
    }

nbhasin2

struct CarTypeView: View {
    let carType: CarType

    var body: some View {
        VStack {
            Text("Car type: \(carType.rawValue)")
        }
        .navigationTitle("\(carType.rawValue)")
    }
}

nbhasin2

struct CarDetailView: View {
    let car: Car

    var body: some View {
        VStack {
            Text("Car name: \(car.rawValue)")
        }
        .navigationTitle("\(car.rawValue)")
    }
}

nbhasin2

struct NavStackContentView: View {
    let cars: [Car]
    let viewType: ViewType = .navigationStack

    var body: some View {
        NavigationStack {
            List(cars) { car in
                NavigationLink(car.rawValue) {
                    CarDetailView(car: car)
                }

nbhasin2

struct NavStackValueBasedContentView: View {
    let carTypes: [CarType]
    let cars: [Car]
    let viewType: ViewType = .navigationStackValueBasedView

    var body: some View {
        NavigationStack {
            List {
                Section("Car Type") {
                    ForEach(carTypes) { carType in

nbhasin2

struct NavStackDestinationContentView: View {
    let cars: [Car]
    let viewType: ViewType = .navigationStackDestination

    var body: some View {
        NavigationStack {
            List(cars) { car in
                NavigationLink(car.rawValue, value: car)
            }
            .navigationBarTitleDisplayMode(.inline)