System WindowInsets Not Consumed on iOS Targets When using Nested Navigators

[mofeejegi]

This is a bit complex to explain, but to summarise, the WindowInsets aren't consumed when it is called from a Nested Navigator (navigator.level > 0) on an iOS device with ignoreSafeArea set to .all in ContentView.swift.

This error specifically happens from Voyager 1.1.0-alpha03 (including newer versions) alongside the Compose Multiplatform Plugin 1.7.0-beta02 version. Perhaps it is some compose multiplatform plugin compatibility problem. Basically: Compose MP 1.7.0-beta02 + Voyager 1.1.0-alpha03 upwards = Issue occurs ❌ Compose MP 1.7.0-beta01 downwards + Voyager (any version) = Working as expected ✅ Compose MP (any version) + Voyager 1.1.0-alpha02 downwards = Working as expected ✅

To highlight the defect, you can check out this sample reproduction on Github.

Here's the code to explain the problem:

@Composable
@Preview
fun App() {
    MaterialTheme {
        Surface {
            Navigator(screen = FirstScreen())
        }
    }
}

class FirstScreen : Screen {
    @Composable
    override fun Content() {
        Box(modifier = Modifier.fillMaxSize().background(color = Color.Blue)) {
            Navigator(screen = SecondScreen())
        }
    }
}

class SecondScreen : Screen {
    @Composable
    override fun Content() {
        Box(modifier = Modifier.fillMaxSize().systemBarsPadding().background(color = Color.Green)) {}
    }
}

Correct Result

Wrong Result

NOTES:

• If the insets systemBarsPadding() is called in the First Navigator, the insets padding is applied normally.
• iOSApp ContentView.swift has its code like .ignoresSafeArea(.all) in order to draw from edge to edge.
• I'm not sure if this a Voyager issue or Compose Multiplatform issue (or perhaps both).

[hristogochev]

Can confirm, this is a a huge issue for me and my team.

[mofeejegi]

I did some more research and checked out https://github.com/adrielcafe/voyager/issues/366 and https://github.com/adrielcafe/voyager/issues/355 . It seems like this is some kind of compatibility issue between the latest Compose MP plugin and the Compose MP plugin referenced by Voyager. It also seems to be somewhat recurrent across versions ever since Voyager upgraded to Compose MP 1.6.0 in version 1.1.0-alpha03. Reverting my codebase to use Compose 1.7.0-beta01 isn't the best option right now because of the issues in that version, so I may have to wait for a resolution.

[hristogochev]

I've tried forking voyager and updating its compose plugin to version 1.7.0-beta02 but unfortunately that doesn't seem to solve the issue.

[hristogochev]

I did some research and think the issue might be related to the new implementation of iOS platformLayers: https://github.com/JetBrains/compose-multiplatform-core/pull/1515

[mofeejegi]

I saw that change too. If I recall correctly, there were changes to the way platform layers were used in Compose MP on iOS over the past few versions.

• 1.7.0-beta02 - iOS fullscreen canvas for platform layers
• 1.6.10 - Allow drawing outside of platform layers
• 1.6.0 - iOS use platformLayers=true by default

It would be quite coincidental if the changes to the use of Platform Layers in Compose MP on iOS somehow led to this issue with Voyager's Nested Navigators. Note that this issue has been happening in various combinations of Voyager and Compose MP. That said, I still can't find how this affects Voyager Nested Navigators, I was hoping to discover the link and attempt resolving it myself.

[hristogochev]

Although not ideal, I've come up with a workaround for this issue: https://gist.github.com/hristogochev/41c7d2f12447e3e4854705d9f5b4e5dc

If you want navigation bars or status bars instead of system bars you can change the code accordingly.