How should you implement a TopAppBar in iOS? Here ...

# compose-ios

[Sam Stone]

How should you implement a TopAppBar in iOS? Here is how Scaffold(topBar = { TopAppBar { Text("Hello, World!") } }) comes out on an iPhone 14 Pro:
Thread in Slack Conversation

[Tlaster]

You can checkout https://github.com/Tlaster/SafeArea as example

[Magdalena Tsolaki]

@Sam Stone my looks like this in Iphone 14 Pro Simulator:
Are you interested in the implementation?

Scaffold(
  floatingActionButton = {
    FloatingActionButton(
      onClick = component.viewModel::saveTask,
      backgroundColor = Color.Black,
    ) {
      Icon(
        imageVector = Icons.Default.Check,
        contentDescription = "Save Task",
        tint = Color.White
      )
    }
  },
  topBar = {
    TaskDetailTopBar(onBackPressed = component::onBackPressed, onDelete = component::onDelete, enableDelete = component.existingTask())
  }
)

.....

@Composable
internal fun TaskDetailTopBar(onBackPressed: () -> Unit, onDelete: () -> Unit, enableDelete: Boolean) {
  TopAppBar(
    title = {
      Text(text = "Task Details")
    },
    navigationIcon = {
      IconButton(onClick = onBackPressed) {
        Icon(Icons.Filled.ArrowBack, "Zurück")
      }
    },
    actions = {
      IconButton(onClick = onDelete, enabled = enableDelete) {
        Icon(Icons.Filled.Delete, "Task löschen")
      }
    },
    modifier = Modifier.fillMaxWidth()
  )
}