SwiftUI, using ForEach inside ZStack causes screen flickering

Question

when calling router1(), there is quick (white screen) flickering
when calling router2(), no flickering

NOTE: in both cases navigationLevelsStack just has 1 element

It seems it just depends on the fact that router1() uses a ForEach?

Is there a way to make ForEach not causing that flickering?

@ViewBuilder func router1(_ stateProvider: StateProvider,_ events: Events) -> some View {

    ZStack {
        ForEach(navigationLevelsStack, id: \.self.URI) { screenIdentifier in
             self.screenPicker(screenIdentifier)
        }
    }

}

@ViewBuilder func router2(_ stateProvider: StateProvider,_ events: Events) -> some View {

    ZStack {
             self.screenPicker(navigationLevelsStack.last!)
        }
    }

}

Can you show the code where you are calling `router1()`/`router2()`? — aheze, May 18 '21 at 17:19
forEach in ZStack will keep on adding screenPicker on top of each other till the loop ends, may be that might be causing it depending upon what exactly screenPicker does. — Tushar Sharma, May 18 '21 at 17:23
@TusharSharma this is happening even if `navigationLevelsStack` just has 1 element — Daniele B, May 18 '21 at 17:46

Daniele B · Answer 1 · 2021-05-19T02:04:03.610

1

I found the reason:

It is because self.URI is a computed property, so each time it was called, it took time to process.

UPDATE:

Actually the reason is not because .URI is a computed property. It has to do with the fact that the old ForEach id value is replaced by a new ForEach id value. If you want to avoid the flickering, it's ok to render a different view, but the ForEach id should stay the same. So, it makes sense it to be an index number.

edited May 19 '21 at 02:04

answered May 18 '21 at 18:19

Daniele B

19,801
29
115
173

1

I feel like I've seen a very, very similar answer before. Deja vu? – aheze May 18 '21 at 18:20

SwiftUI, using ForEach inside ZStack causes screen flickering

1 Answers1