feat: postMessage API

.changeset/fair-zebras-heal.md

@@ -0,0 +1,5 @@
+---
+'@callstack/react-native-brownfield': minor
+---
+
+feat: added postMessage API

apps/AndroidApp/app/src/expo/java/com/callstack/brownfield/android/example/ReactNativeConstants.kt

@@ -1,5 +1,6 @@
 package com.callstack.brownfield.android.example
 
 object ReactNativeConstants {
-    const val MAIN_MODULE_NAME = "RNApp"
+    const val MAIN_MODULE_NAME = "main"
+    const val APP_NAME = "Android (Expo)"
 }

apps/AndroidApp/app/src/main/java/com/callstack/brownfield/android/example/MainActivity.kt

@@ -9,28 +9,22 @@ import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Button
-import androidx.compose.material3.Card
-import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.fragment.compose.AndroidFragment
+import com.callstack.brownfield.android.example.components.GreetingCard
+import com.callstack.brownfield.android.example.components.PostMessageCard
 import com.callstack.brownfield.android.example.ui.theme.AndroidBrownfieldAppTheme
 import com.callstack.reactnativebrownfield.ReactNativeFragment
 import com.callstack.reactnativebrownfield.constants.ReactNativeFragmentArgNames
@@ -81,57 +75,22 @@ private fun MainScreen(modifier: Modifier = Modifier) {
         horizontalAlignment = Alignment.CenterHorizontally // center top bar content
     ) {
         GreetingCard(
-            name = "Android",
-            modifier = Modifier.fillMaxWidth()
+            name = ReactNativeConstants.APP_NAME,
         )
 
+        PostMessageCard()
+
+        Spacer(modifier = Modifier.height(1.dp))
+
         ReactNativeView(
             modifier = Modifier
-                .fillMaxWidth()
+                .fillMaxSize()
                 .clip(RoundedCornerShape(16.dp))
                 .background(MaterialTheme.colorScheme.surface)
         )
     }
 }
 
-@Composable
-fun GreetingCard(
-    name: String,
-    modifier: Modifier = Modifier
-) {
-    var counter by rememberSaveable { mutableStateOf(0) }
-
-    Card(
-        modifier = modifier,
-        shape = RoundedCornerShape(16.dp),
-        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
-    ) {
-        Column(
-            modifier = Modifier
-                .padding(16.dp)
-                .fillMaxWidth(),
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(12.dp)
-        ) {
-            Text(
-                text = "Hello native $name 👋",
-                style = MaterialTheme.typography.titleMedium,
-                textAlign = TextAlign.Center
-            )
-
-            Text(
-                text = "You clicked the button $counter time${if (counter == 1) "" else "s"}",
-                textAlign = TextAlign.Center,
-                style = MaterialTheme.typography.bodyMedium
-            )
-
-            Button(onClick = { counter++ }) {
-                Text("Increment counter")
-            }
-        }
-    }
-}
-
 @Composable
 fun ReactNativeView(
     modifier: Modifier = Modifier

apps/AndroidApp/app/src/main/java/com/callstack/brownfield/android/example/components/GreetingCard.kt

@@ -0,0 +1,51 @@
+package com.callstack.brownfield.android.example.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun GreetingCard(
+    name: String,
+) {
+    var counter by rememberSaveable { mutableIntStateOf(0) }
+
+    MaterialCard {
+        Column(
+            modifier = Modifier
+                .padding(16.dp)
+                .fillMaxWidth(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            Text(
+                text = "Hello native $name 👋",
+                style = MaterialTheme.typography.titleMedium,
+                textAlign = TextAlign.Center
+            )
+
+            Text(
+                text = "You clicked the button $counter time${if (counter == 1) "" else "s"}",
+                textAlign = TextAlign.Center,
+                style = MaterialTheme.typography.bodyMedium
+            )
+
+            Button(onClick = { counter++ }) {
+                Text("Increment counter")
+            }
+        }
+    }
+}

apps/AndroidApp/app/src/main/java/com/callstack/brownfield/android/example/components/MaterialCard.kt

@@ -0,0 +1,22 @@
+package com.callstack.brownfield.android.example.components
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun MaterialCard(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit
+) {
+    Card(
+        modifier = modifier,
+        shape = RoundedCornerShape(16.dp),
+        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
+    ) {
+        content()
+    }
+}

apps/AndroidApp/app/src/main/java/com/callstack/brownfield/android/example/components/PostMessageCard.kt

@@ -0,0 +1,96 @@
+package com.callstack.brownfield.android.example.components
+
+import android.widget.Toast
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
+import com.callstack.reactnativebrownfield.OnMessageListener
+import com.callstack.reactnativebrownfield.ReactNativeBrownfield
+import org.json.JSONObject
+
+@Composable
+fun PostMessageCard() {
+    var nextId by remember { mutableIntStateOf(0) }
+    var draft by remember { mutableStateOf("") }
+    val lastToast = remember { mutableStateOf<Toast?>(null) }
+
+    val context = LocalContext.current
+
+    DisposableEffect(Unit) {
+        val listener = OnMessageListener { raw ->
+            val text = try {
+                JSONObject(raw).optString("text", raw)
+            } catch (_: Exception) {
+                raw
+            }
+            val toast = Toast.makeText(
+                context,
+                "Received message from React Native: $text",
+                Toast.LENGTH_LONG
+            )
+            lastToast.value?.cancel() // cancel previous toast if still visible
+            toast.show()
+            lastToast.value = toast
+        }
+        ReactNativeBrownfield.shared.addMessageListener(listener)
+        onDispose { ReactNativeBrownfield.shared.removeMessageListener(listener) }
+    }
+
+    MaterialCard {
+        Column(
+            modifier = Modifier
+                .padding(16.dp)
+                .fillMaxWidth(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            Text(
+                "postMessage",
+                style = MaterialTheme.typography.titleMedium,
+                modifier = Modifier
+                    .padding(bottom = 2.dp)
+                    .align(Alignment.CenterHorizontally)
+            )
+
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+
+                OutlinedTextField(
+                    value = draft,
+                    onValueChange = { draft = it },
+                    modifier = Modifier.weight(1f),
+                    placeholder = { Text("Type a message...") },
+                    singleLine = true,
+                )
+                Button(onClick = {
+                    val text = draft.ifBlank { "Hello from Android! (#${nextId++})" }
+                    val json = JSONObject().put("text", text).toString()
+                    ReactNativeBrownfield.shared.postMessage(json)
+                    draft = ""
+                }) {
+                    Text("Send")
+                }
+            }
+        }
+    }
+}

apps/AndroidApp/app/src/vanilla/java/com/callstack/brownfield/android/example/ReactNativeConstants.kt

@@ -2,4 +2,5 @@ package com.callstack.brownfield.android.example
 
 object ReactNativeConstants {
     const val MAIN_MODULE_NAME = "RNApp"
+    const val APP_NAME = "Android"
 }