Add jetpack compose to sample app

Summary: Add an entry to the sample app to showcase Jetpack compose support. Note that you need to enable View Attribute Debugging in the Android Debug settings for this to work.

Reviewed By: lblasa

Differential Revision: D46933645

fbshipit-source-id: fbe2ddd50ef0e7917ef873959db5b3f35b833cf0

android/sample/AndroidManifest.xml

@@ -89,6 +89,15 @@
         <data android:scheme="flipper" android:host="fragment_test_activity" />
       </intent-filter>
     </activity>
+      <activity android:name=".JetpackComposeActivity"
+          android:exported="true">
+          <intent-filter>
+              <action android:name="android.intent.action.VIEW" />
+              <category android:name="android.intent.category.DEFAULT" />
+              <category android:name="android.intent.category.BROWSABLE" />
+              <data android:scheme="flipper" android:host="jetpack_compose_activity" />
+          </intent-filter>
+      </activity>
     <activity android:name="com.facebook.flipper.android.diagnostics.FlipperDiagnosticActivity"
         android:exported="true"/>
     <activity android:name="com.facebook.flipper.connectivitytest.ConnectionTestActivity"

android/sample/build.gradle

@@ -5,7 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-apply plugin: 'com.android.application'
+plugins {
+    id 'com.android.application'
+    id 'kotlin-android'
+}
 
 android {
     namespace 'com.facebook.flipper.sample'
@@ -36,9 +39,16 @@ android {
         }
     }
 
-    compileOptions {
+    buildFeatures {
-        targetCompatibility rootProject.javaTargetVersion
+        compose true
-        sourceCompatibility rootProject.javaTargetVersion
+    }
+
+    composeOptions {
+        kotlinCompilerExtensionVersion = "1.4.6"
+    }
+
+    kotlinOptions {
+        jvmTarget = "1.8"
     }
 
     packagingOptions {
@@ -61,9 +71,18 @@ dependencies {
     implementation deps.lithoWidget
     implementation deps.lithoAnnotations
     implementation deps.lithoFresco
-    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
     annotationProcessor deps.lithoProcessor
 
+    // Compose
+    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
+    implementation 'androidx.activity:activity-ktx:1.7.2'
+    implementation 'androidx.compose.runtime:runtime:1.4.3'
+    implementation 'androidx.activity:activity-compose:1.7.2'
+    implementation 'androidx.compose.ui:ui:1.4.3'
+    implementation 'androidx.compose.material3:material3:1.1.1'
+    implementation 'androidx.compose.ui:ui-tooling:1.4.3'
+    implementation 'androidx.compose.ui:ui-tooling-preview:1.4.3'
+
     // Third-party
     implementation deps.soloader
     implementation deps.okhttp3
@@ -83,5 +102,6 @@ dependencies {
     debugImplementation project(':android')
     debugImplementation project(':network-plugin')
     debugImplementation project(':litho-plugin')
+    debugImplementation project(':jetpack-compose-plugin')
     releaseImplementation project(':noop')
 }

android/sample/src/debug/java/com/facebook/flipper/sample/FlipperInitializer.java

@@ -16,6 +16,7 @@ import com.facebook.flipper.plugins.example.ExampleFlipperPlugin;
 import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
 import com.facebook.flipper.plugins.inspector.DescriptorMapping;
 import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
+import com.facebook.flipper.plugins.jetpackcompose.UIDebuggerComposeSupport;
 import com.facebook.flipper.plugins.navigation.NavigationFlipperPlugin;
 import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
 import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
@@ -65,6 +66,7 @@ public final class FlipperInitializer {
     TreeObserverFactory treeObserverFactory = TreeObserverFactory.Companion.withDefaults();
     UIDContext uidContext = UIDContext.Companion.create((Application) context);
     UIDebuggerLithoSupport.INSTANCE.enable(uidContext);
+    UIDebuggerComposeSupport.INSTANCE.enable(uidContext);
 
     client.addPlugin(new UIDebuggerFlipperPlugin(uidContext));
     client.start();

android/sample/src/main/java/com/facebook/flipper/sample/JetpackComposeActivity.kt

@@ -0,0 +1,30 @@
+package com.facebook.flipper.sample
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun MessageCard(name: String) {
+  Row(modifier = Modifier.padding(all = 8.dp)) { Text(text = "Hello $name!") }
+}
+
+@Preview
+@Composable
+fun PreviewMessageCard() {
+  MessageCard("Android")
+}
+
+class JetpackComposeActivity : ComponentActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(savedInstanceState)
+    setContent { MessageCard("Flipper") }
+  }
+}

android/sample/src/main/java/com/facebook/flipper/sample/RootComponentSpec.java

@@ -116,10 +116,17 @@ public class RootComponentSpec {
                     .clickHandler(RootComponent.openIncrementActivity(c)))
             .child(
                 Text.create(c)
-                    .text("Crash this app")
+                    .text("Navigate to Jetpack Compose activity")
                     .key("12")
                     .marginDip(YogaEdge.ALL, 10)
                     .textSizeSp(20)
+                    .clickHandler(RootComponent.openJetpackComposeActivity(c)))
+            .child(
+                Text.create(c)
+                    .text("Crash this app")
+                    .key("13")
+                    .marginDip(YogaEdge.ALL, 10)
+                    .textSizeSp(20)
                     .clickHandler(RootComponent.triggerCrash(c)))
             .child(
                 FrescoImage.create(c)
@@ -203,4 +210,10 @@ public class RootComponentSpec {
     final Intent intent = new Intent(c.getAndroidContext(), ButtonsActivity.class);
     c.getAndroidContext().startActivity(intent);
   }
+
+  @OnEvent(ClickEvent.class)
+  static void openJetpackComposeActivity(final ComponentContext c) {
+    final Intent intent = new Intent(c.getAndroidContext(), JetpackComposeActivity.class);
+    c.getAndroidContext().startActivity(intent);
+  }
 }