I'm using the compose multiplatform to build an ap...

# multiplatform

[zrll]

I'm using the compose multiplatform to build an app. My app looks alright on Android, but on iOS, there are white spaces on the top and bottom, where they are supposed to have background color. I don't know whether this is caused by Scaffold.
My code:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview
fun App() {
    AppTheme {
        var showContent by remember { mutableStateOf(false) }
        Scaffold(
            Modifier.fillMaxWidth(),
            topBar = { TopAppBar({ Text("Event Reminder") }) }) {
            Column(Modifier.padding(it).fillMaxWidth().padding(20.dp), horizontalAlignment = Alignment.CenterHorizontally) {
                Button(onClick = { showContent = !showContent }) {
                    Text("Click me!")
                }
                AnimatedVisibility(showContent) {
                    val greeting = remember { Greeting().greet() }
                    Column(
                        Modifier.fillMaxWidth(),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Image(painterResource(Res.drawable.compose_multiplatform), null)
                        Text("Compose: $greeting")
                    }
                }
            }

        }
    }
}

[krzysztof]

the non-white area where your composables are visible is called safe area - the white areas are excluded from drawing, to not obscure system bars. If your project is generated by KMP wizard, check out the ContentView.swift file, where .ignoreSafeArea modifier is applied in swift view.

I hope this might give you more insight: https://swiftwithmajid.com/2021/11/03/managing-safe-area-in-swiftui/

[Colton Idle]

Update ContentView.swift and add .ignoresSafeArea(edges: .all)