Discussion: Jetpack Compose & SwiftUI support?

[brianguertin]

Any thoughts on supporting these modern UI toolkits in Flipper?

Compose is supposed to hit 1.0 in July, and SwiftUI has been out for some time already.

I've already started migrating to Jetpack Compose I'd like to keep using Flipper 🤞

[nikoant]

There are no plans on implementing that internally in FB. If someone in open source would like to work on supporting Jetpack Compose or SwiftUI - contributions are welcome. You can either build a separate plugin for Flipper, or probably extend the existing Layout plugin to support these toolkits.

[ln-12]

Hey @nikoant and @mweststrate, are there any plans in the meantime to support Compose on Android? According to Google it is the recommended UI framework now, so it would be a great pity if we cannot continue to use Flipper.

I saw that there is the new UI debugger, but it still does not support compose.

Maestro Studio for example is able to extract this information: https://maestro.mobile.dev/platform-support/android-jetpack-compose

[mweststrate]

cc @lblasa

[ln-12]

Hey guys, can you give an update on the current state of this feature? I wanted to look into it to see if I can contribute something myself but discovered that there already is some implementation in https://github.com/facebook/flipper/tree/main/android/plugins/jetpack-compose. Are you already actively working on it?

[ln-12]

For anyone coming across this issue, this is what I got working:

In your gradle file add:

    debugImplementation 'com.facebook.flipper:flipper:0.238.0'
    debugImplementation 'com.facebook.soloader:soloader:0.10.2'
    releaseImplementation 'com.facebook.flipper:flipper-noop:0.238.0'
    debugImplementation("com.facebook.flipper:flipper-jetpack-compose-plugin:0.238.0")

And in your application do it like this:

    override fun onCreate() {
        super.onCreate()
        SoLoader.init(this, false)

        val client = AndroidFlipperClient.getInstance(this)
        val context = UIDContext.create(this)
        client.addPlugin(UIDebuggerFlipperPlugin(context))
        UIDebuggerComposeSupport.enable(context)
        client.start()
    }

Then you can make of the new UI debugger which also shows information about Compose Nodes. Changing node properties does not seem to work yet.