Updates:

.github/workflows/release.yml

@@ -0,0 +1,23 @@
+name: Release
+on:
+  workflow_dispatch:
+
+jobs:
+  android:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-java@v4
+        with:
+          java-version: '17'
+          distribution: 'zulu'
+      - uses: actions/setup-node@v3
+      - run: yarn
+      - run: cd android && ./gradlew assembleRelease
+      - name: Archive code coverage results
+        uses: actions/upload-artifact@v4
+        with:
+          name: APK
+          path: ./android/app/build/outputs/apk/release/app-release.apk

.vscode/settings.json

@@ -3,4 +3,5 @@
   "editor.codeActionsOnSave": {
     "source.organizeImports": "explicit"
   },
+  "java.compile.nullAnalysis.mode": "automatic",
 }

android/app/build.gradle

@@ -1,6 +1,7 @@
 apply plugin: "com.android.application"
 apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
+apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
 
 /**
  * This is the configuration block to customize your React Native Android app.

src/components/ConversationMessageContent.tsx

@@ -38,7 +38,9 @@ export const ConversationMessageContent: FC<
 
   if (message.contentTypeId === ContentTypes.RemoteStaticAttachment) {
     return (
-      <ImageMessage content={message.content() as RemoteAttachmentContent} />
+      <Container alignSelf={isMe ? 'flex-end' : 'flex-start'}>
+        <ImageMessage content={message.content() as RemoteAttachmentContent} />
+      </Container>
     );
   }
 

src/components/GroupListItem.tsx

@@ -21,20 +21,20 @@
   display,
   lastMessageTime,
 }) => {
-  const {data: addresses} = useGroupParticipantsQuery(group.id);
+  const {data: addresses} = useGroupParticipantsQuery(group?.id);
   const {navigate} = useTypedNavigation();
   const {data, groupDisplayName} = useGroupContactInfo(addresses ?? []);
 
   return (
     <Pressable
       onPress={() => {
         navigate(ScreenNames.Group, {
-          id: group.id,
+          id: group?.id,
         });
       }}>
       <HStack space={[2, 3]} alignItems={'center'} w={'100%'} padding={'16px'}>
         <Box marginRight={'30px'}>
           <GroupAvatarStack style={{paddingRight: 10}} data={data} />
         </Box>
         <VStack flex={1} justifyContent={'flex-end'}>
           <Text
@@ -50,7 +50,7 @@
         <Text
           alignSelf={'flex-start'}
           typography="text-xs/regular"
           style={{textAlignVertical: 'top'}}>
           {getMessageTimeDisplay(lastMessageTime)}
         </Text>
       </HStack>

src/components/ImageMessage.tsx

@@ -48,9 +48,10 @@ export const ImageMessage: FC<ImageMessageProps> = ({content}) => {
       resizeMethod="auto"
       resizeMode="cover"
       source={{uri: downloadedUri}}
-      // source={require('../../assets/images/discover1.png')}
       height={40}
       width={40}
+      borderRadius={10}
+      alt="image message"
     />
   );
 };

src/components/AddGroupParticipantModal.tsx → src/components/modals/AddGroupParticipantModal.tsx

@@ -2,17 +2,17 @@ import {Group} from '@xmtp/react-native-sdk/build/lib/Group';
 import {Box, FlatList, HStack, Input, Pressable, VStack} from 'native-base';
 import React, {FC, useCallback, useMemo, useState} from 'react';
 import {ListRenderItem, useWindowDimensions} from 'react-native';
-import {TestIds} from '../consts/TestIds';
-import {useContactInfo} from '../hooks/useContactInfo';
-import {useContacts} from '../hooks/useContacts';
-import {translate} from '../i18n';
-import {colors} from '../theme/colors';
-import {formatAddress} from '../utils/formatAddress';
-import {AvatarWithFallback} from './AvatarWithFallback';
-import {Button} from './common/Button';
-import {Icon} from './common/Icon';
-import {Modal} from './common/Modal';
-import {Text} from './common/Text';
+import {TestIds} from '../../consts/TestIds';
+import {useContactInfo} from '../../hooks/useContactInfo';
+import {useContacts} from '../../hooks/useContacts';
+import {translate} from '../../i18n';
+import {colors} from '../../theme/colors';
+import {formatAddress} from '../../utils/formatAddress';
+import {AvatarWithFallback} from '../AvatarWithFallback';
+import {Button} from '../common/Button';
+import {Icon} from '../common/Icon';
+import {Modal} from '../common/Modal';
+import {Text} from '../common/Text';
 
 export interface GroupInfoModalProps {
   shown: boolean;

src/components/GroupInfoModal.tsx → src/components/modals/GroupInfoModal.tsx

@@ -1,14 +1,14 @@
 import {Group} from '@xmtp/react-native-sdk/build/lib/Group';
 import {HStack, Pressable, VStack} from 'native-base';
 import React, {FC, useCallback} from 'react';
-import {useContactInfo} from '../hooks/useContactInfo';
-import {translate} from '../i18n';
-import {colors} from '../theme/colors';
-import {AvatarWithFallback} from './AvatarWithFallback';
-import {Button} from './common/Button';
-import {Icon} from './common/Icon';
-import {Modal} from './common/Modal';
-import {Text} from './common/Text';
+import {useContactInfo} from '../../hooks/useContactInfo';
+import {translate} from '../../i18n';
+import {colors} from '../../theme/colors';
+import {AvatarWithFallback} from '../AvatarWithFallback';
+import {Button} from '../common/Button';
+import {Icon} from '../common/Icon';
+import {Modal} from '../common/Modal';
+import {Text} from '../common/Text';
 
 export interface GroupInfoModalProps {
   shown: boolean;
@@ -30,7 +30,7 @@
           {displayName}
         </Text>
         <AvatarWithFallback
           style={{marginLeft: 10}}
           size={40}
           address={address}
           avatarUri={avatarUrl}

src/i18n/locales/en.json

@@ -57,5 +57,16 @@
   "guest_wallet": "Guest Wallet",
   "group_changed": "Group Changed",
   "add_to_group": "Add",
-  "group": "Group"
+  "group": "Group",
+
+  "dev_screen": "Dev Screen",
+  "client": "Client",
+  "address": "Address",
+  "list_queries": "List Queries",
+  "conversation_messages_queries": "Conversation Messages",
+  "group_messages_queries": "Group Messages Queries",
+  "group_members_queries": "Group Members Queries",
+  "get_conversations": "Get Conversations",
+  "get_groups": "Get Groups",
+  "get_contacts": "Get Contacts"
 }

src/navigation/AppNavigation.tsx

@@ -6,6 +6,7 @@ import {useClientContext} from '../context/ClientContext';
 import {AccountSettingsScreen} from '../screens/AccountSettingsScreen';
 import {ConversationListScreen} from '../screens/ConversationListScreen';
 import {ConversationScreen} from '../screens/ConversationScreen';
+import {DevScreen} from '../screens/DevScreen';
 import {DiscoverScreen} from '../screens/DiscoverScreen';
 import {GroupScreen} from '../screens/GroupScreen';
 import {LoadingScreen} from '../screens/LoadingScreen';
@@ -111,6 +112,15 @@ export const AppNavigation = () => {
               presentation: 'modal',
             }}
           />
+          {__DEV__ && (
+            <AuthenticatedStack.Screen
+              name={ScreenNames.Dev}
+              component={DevScreen}
+              options={{
+                presentation: 'modal',
+              }}
+            />
+          )}
         </AuthenticatedStack.Navigator>
       )}
     </NavigationContainer>

src/navigation/ScreenNames.ts

@@ -15,4 +15,5 @@ export enum ScreenNames {
   Search = 'search',
   QRCode = 'qr_code',
   UserProfiles = 'user_profiles',
+  Dev = 'dev',
 }

src/navigation/StackParams.ts

@@ -19,6 +19,7 @@ export type AuthenticatedStackParams = {
   [ScreenNames.Search]: undefined;
   [ScreenNames.QRCode]: undefined;
   [ScreenNames.UserProfiles]: {address: string};
+  [ScreenNames.Dev]: undefined;
 };
 
 export type RootStackParams = LoadingStackParams &

src/queries/useListQuery.ts

@@ -5,10 +5,9 @@ import {QueryKeys} from './QueryKeys';
 
 export const useListQuery = () => {
   const {client} = useClient();
-
   return useQuery({
     queryKey: [QueryKeys.List, client?.address],
     queryFn: () => getAllListMessages(client),
-    enabled: !!client,
+    enabled: Boolean(client),
   });
 };

src/screens/ConversationListScreen.tsx

@@ -27,11 +27,12 @@ import {colors} from '../theme/colors';
 const EmptyBackground = require('../../assets/images/Bg_asset.svg').default;
 
 const keyExtractor = (item: ListConversation | ListGroup) =>
-  'conversation' in item ? item.conversation.topic : item.group.id;
+  'conversation' in item ? item.conversation?.topic : item.group?.id ?? '';
 
 const useData = () => {
   const {client} = useClient();
-  const {data, isLoading, refetch, isRefetching} = useListMessages();
+  const {data, isLoading, refetch, isRefetching, isError, error} =
+    useListMessages();
 
   const {listItems, requests} = useMemo(() => {
     const listMessages: ListMessages = [];
@@ -58,6 +59,8 @@ const useData = () => {
     isLoading,
     refetch,
     isRefetching,
+    isError,
+    error,
   };
 };
 
@@ -85,6 +88,11 @@ const ListHeader: FC<ListHeaderProps> = ({
   const handleAccountPress = useCallback(() => {
     navigate(ScreenNames.Account);
   }, [navigate]);
+  const navigateToDev = useCallback(() => {
+    if (__DEV__) {
+      navigate(ScreenNames.Dev);
+    }
+  }, [navigate]);
   return (
     <VStack>
       <HStack
@@ -109,6 +117,7 @@ const ListHeader: FC<ListHeaderProps> = ({
           shadow={4}>
           <Box>
             <Button
+              onLongPress={navigateToDev}
               size={'sm'}
               variant={'ghost'}
               leftIcon={
@@ -203,7 +212,6 @@ export const ConversationListScreen = () => {
   const showPicker = () => {
     setShowPickerModal(true);
   };
-
   const handleNewMessagePress = useCallback(() => {
     navigate(ScreenNames.Search);
   }, [navigate]);

src/screens/ConversationScreen.tsx

@@ -1,15 +1,8 @@
 import {useRoute} from '@react-navigation/native';
 import {DecodedMessage, RemoteAttachmentContent} from '@xmtp/react-native-sdk';
-import {
-  Box,
-  FlatList,
-  HStack,
-  KeyboardAvoidingView,
-  Pressable,
-  VStack,
-} from 'native-base';
+import {Box, FlatList, HStack, Pressable, VStack} from 'native-base';
 import React, {useCallback, useEffect, useState} from 'react';
-import {ListRenderItem, Platform} from 'react-native';
+import {KeyboardAvoidingView, ListRenderItem, Platform} from 'react-native';
 import {Asset} from 'react-native-image-picker';
 import {ConversationHeader} from '../components/ConversationHeader';
 import {ConversationInput} from '../components/ConversationInput';
@@ -196,9 +189,8 @@ export const ConversationScreen = () => {
           />
           <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-            height={'100%'}
-            keyboardVerticalOffset={50}
-            w="100%">
+            style={{height: '100%'}}
+            keyboardVerticalOffset={10}>
             <Box flex={1}>
               <FlatList
                 keyExtractor={item => item.id}