Skip to content
🤔 Documentation issue? Report or edit

Compose for SwiftUI Developers

SwiftUI Compose
Button Button
Text Text
TextEditor TextField
Image Image
HStack Row
VStack Column
ZStack Box
LazyVStack LazyColumn
LazyHStack LazyRow
ScrollView LazyColumn

What is the equivalent of a View?

In “Jetpack Compose” Views are called Composable. They are Kotlin functions that are annotated with @Composable.

@Composable fun ComposableDemo(){
    Text("Hello, World")

How to define a state?

In SwiftUI you can use the @State property wrapper to create a state.

@State var isActiveState = false

In Compose you use mutableStateOf()

var isActiveState = mutableStateOf(false)

But this will only create the state. When you want to remember the value of your state in every recomposition, you have to put your state inside remember

 val isActiveState = remember { mutableStateOf(false) }

What is the equivalent of a ViewModifier?

struct ContentView: View {
    var body : some View {
        Text("Hello, World!").background(Color.Red).padding(100)

In Compose a ViewModifier is called Modifier. You can’t directly append it to a View, you need to apply your modifier as a parameter to a Composable that expects a modifier.

Text("Hello, World", modifier = Modifier.background(Color.Red).padding(100.dp))

What is the equivalent of EnvironmentObject?

For data that should be shared with all views in your entire app, in SwiftUI you can use EnvironmentObject. In Compose this can be done with CompositionLocal

Last update: August 16, 2021