Skip to main content

Known Issues

Using the iterated container inside the declarative for loop​

Using the same container that was used to iterated over in the declarative for loop can cause out of bounds errors, if elements are removed from the container.

import * from ui

var presets = ["A", "B", "C", "D"]

export component Main {
    VStack {
        Text("Remove") with {
            TapGesture(fun (event) {
                presets.remove(at: 0)
            })
        }

        for i, preset in presets.enumerated() {
            Text("\{i}: \{presets[i]}")
        }
    }
}

export var main = Main()

For now it's best to only access the iteration values and not the entire list:

import * from ui

var presets = ["A", "B", "C", "D"]

export component Main {
    VStack {
        Text("Remove") with {
            TapGesture(fun (event) {
                presets.remove(at: 0)
            })
        }

        for i, preset in presets.enumerated() {
            Text("\{i}: \{preset}")
        }
    }
}

export var main = Main()

Using the same state in the declarative for loop and its body can cause a "cycle" error​

In some cases using the same state to create the sequence to loop over inside the body of the loop can cause a "cycle detected" error.

import * from ui

var presets = ["A", "B", "C", "D"]

export component Main {
    offset: Int = 0

    VStack {
        Text("Next") with {
            TapGesture(fun (event) {
                self.offset = (self.offset + 1) % presets.length
            })
        }

        for i, preset in presets.subsequence(from: self.offset, length: 1).enumerated() {
            Text("\{i + self.offset}: \{preset}")
        }
    }
}

export var main = Main()

Currently, the only workaround is to embed the total index (id) into the preset and avoid using the offset inside the body.

import * from ui

class Preset {
    id: Int
    name: String
}

var presets = [
    Preset(id: 0, name: "A"),
    Preset(id: 1, name: "B"),
    Preset(id: 2, name: "C"),
    Preset(id: 3, name: "D"),
]

export component Main {
    offset: Int = 0

    VStack {
        Text("Next") with {
            TapGesture(fun (event) {
                self.offset = (self.offset + 1) % presets.length
            })
        }

        for preset in presets.subsequence(from: self.offset, length: 1) {
            Text("\{preset.id}: \{preset.name}")
        }
    }
}

export var main = Main()

Comparing strings with differently composed UTF-8 characters​

In UTF-8 characters can existing in multiple forms, e.g. decomposed and pre-composed. Visually they always appear as a single character and should compare equal.

Spacer size incorrect if applying modifiers to it​

A modifier applied to a Spacer in a stack can alter the Spacer size in unexpected ways. For a correct behavior of Spacer, avoid applying modifiers directly on it.