Start on groups example

.gitignore

@@ -63,3 +63,4 @@ android/keystores/debug.keystore
 
 # Typedocs
 docs/
+**/.yarn/*

android/src/main/java/expo/modules/xmtpreactnativesdk/XMTPModule.kt

@@ -287,6 +287,15 @@ class XMTPModule : Module() {
             client.canMessage(peerAddress)
         }
 
+        AsyncFunction("canGroupMessage") { clientAddress: String, peerAddresses: List<String> ->
+            logV("canGroupMessage")
+            val client = clients[clientAddress] ?: throw XMTPException("No client")
+            if (client.libXMTPClient == null) {
+                throw XMTPException("Create client with enableAlphaMLS true in order to call canGroupMessage")
+            }
+            client.canMessage(peerAddresses)
+        }
+
         AsyncFunction("staticCanMessage") { peerAddress: String, environment: String, appVersion: String? ->
             try {
                 logV("staticCanMessage")

android/src/main/java/expo/modules/xmtpreactnativesdk/wrappers/ContentJson.kt

@@ -30,6 +30,9 @@ import org.xmtp.android.library.codecs.description
 import org.xmtp.android.library.codecs.getReactionAction
 import org.xmtp.android.library.codecs.getReactionSchema
 import org.xmtp.android.library.codecs.id
+import uniffi.xmtpv3.org.xmtp.android.library.codecs.ContentTypeGroupMembershipChange
+import uniffi.xmtpv3.org.xmtp.android.library.codecs.GroupMembershipChangeCodec
+import uniffi.xmtpv3.org.xmtp.android.library.codecs.GroupMembershipChanges
 import java.net.URL
 
 class ContentJson(
@@ -51,6 +54,7 @@ class ContentJson(
             Client.register(RemoteAttachmentCodec())
             Client.register(ReplyCodec())
             Client.register(ReadReceiptCodec())
+            Client.register(GroupMembershipChangeCodec())
         }
 
         fun fromJsonObject(obj: JsonObject): ContentJson {
@@ -171,6 +175,21 @@ class ContentJson(
                 "readReceipt" to ""
             )
 
+            ContentTypeGroupMembershipChange.id -> mapOf(
+                "groupChange" to mapOf(
+                    "membersAdded" to (content as GroupMembershipChanges).membersAddedList.map {
+                        mapOf(
+                            "address" to it.accountAddress,
+                            "initiatedByAddress" to it.initiatedByAccountAddress
+                        )},
+                    "membersRemoved" to content.membersRemovedList.map {
+                        mapOf(
+                            "address" to it.accountAddress,
+                            "initiatedByAddress" to it.initiatedByAccountAddress
+                        )},
+                )
+            )
+
             else -> {
                 val json = JsonObject()
                 encodedContent?.let {

example/App.tsx

@@ -12,6 +12,7 @@ import { XmtpProvider } from 'xmtp-react-native-sdk'
 
 import ConversationCreateScreen from './src/ConversationCreateScreen'
 import ConversationScreen from './src/ConversationScreen'
+import GroupScreen from './src/GroupScreen'
 import HomeScreen from './src/HomeScreen'
 import LaunchScreen from './src/LaunchScreen'
 import { Navigator } from './src/Navigation'
@@ -86,6 +87,11 @@ export default function App() {
                 options={{ title: 'Conversation' }}
                 initialParams={{ topic: '' }}
               />
+              <Navigator.Screen
+                name="group"
+                component={GroupScreen}
+                options={{ title: 'Group' }}
+              />
               <Navigator.Screen
                 name="conversationCreate"
                 component={ConversationCreateScreen}

example/src/ConversationCreateScreen.tsx

@@ -1,6 +1,6 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import React, { useState } from 'react'
-import { Button, ScrollView, Text, TextInput } from 'react-native'
+import { Button, ScrollView, Switch, Text, TextInput, View } from 'react-native'
 import { useXmtp } from 'xmtp-react-native-sdk'
 
 import { NavigationParamList } from './Navigation'
@@ -13,19 +13,32 @@ export default function ConversationCreateScreen({
   const [alert, setAlert] = useState<string>('')
   const [isCreating, setCreating] = useState<boolean>(false)
   const { client } = useXmtp()
+  const [groupsEnabled, setGroupsEnabled] = useState(false)
+
   const startNewConversation = async (toAddress: string) => {
     if (!client) {
       setAlert('Client not initialized')
       return
     }
-    const canMessage = await client.canMessage(toAddress)
-    if (!canMessage) {
-      setAlert(`${toAddress} is not on the XMTP network yet`)
-      return
+    if (groupsEnabled) {
+      const canMessage = (await client.canGroupMessage([toAddress]))[0]
+      if (!canMessage) {
+        setAlert(`${toAddress} cannot be added to a group conversation yet`)
+        return
+      }
+      const group = await client.conversations.newGroup([toAddress])
+      navigation.navigate('group', { id: group.id })
+    } else {
+      const canMessage = await client.canMessage(toAddress)
+      if (!canMessage) {
+        setAlert(`${toAddress} is not on the XMTP network yet`)
+        return
+      }
+      const convo = await client.conversations.newConversation(toAddress)
+      navigation.navigate('conversation', { topic: convo.topic })
     }
-    const convo = await client.conversations.newConversation(toAddress)
-    navigation.navigate('conversation', { topic: convo.topic })
   }
+
   return (
     <>
       <ScrollView>
@@ -48,6 +61,15 @@ export default function ConversationCreateScreen({
             opacity: isCreating ? 0.5 : 1,
           }}
         />
+        <View>
+          <Switch
+            value={groupsEnabled}
+            onValueChange={() =>
+              setGroupsEnabled((previousState) => !previousState)
+            }
+          />
+          <Text>Create Group: {groupsEnabled ? 'ON' : 'OFF'}</Text>
+        </View>
         <Button
           title="Start conversation"
           onPress={() => {