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
facebook · Jun 23, 2023 · 820cf6a · 820cf6a
1 parent ad25c24
commit 820cf6a
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 6 deletions.
diff --git a/android/sample/AndroidManifest.xml b/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"

diff --git a/android/sample/build.gradle b/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 {
-        targetCompatibility rootProject.javaTargetVersion
-        sourceCompatibility rootProject.javaTargetVersion
+    buildFeatures {
+        compose true
+    }
+
+    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')
 }
diff --git a/android/sample/src/debug/java/com/facebook/flipper/sample/FlipperInitializer.java b/android/sample/src/debug/java/com/facebook/flipper/sample/FlipperInitializer.java
@@ -16,6 +16,7 @@
 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 static InitializationResult initFlipperPlugins(Context context, FlipperCl
     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();

diff --git a/android/sample/src/main/java/com/facebook/flipper/sample/JetpackComposeActivity.kt b/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") }
+  }
+}
diff --git a/android/sample/src/main/java/com/facebook/flipper/sample/RootComponentSpec.java b/android/sample/src/main/java/com/facebook/flipper/sample/RootComponentSpec.java
@@ -116,10 +116,17 @@ static Component onCreateLayout(final ComponentContext c, @State boolean display
                     .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 @@ static void openIncrementActivity(final ComponentContext c) {
     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);
+  }
 }