Extend example app

example/README.md

@@ -6,6 +6,8 @@ This is a new [**React Native**] project, bootstrapped using [`@react-native-com
 > **Note**: Make sure you have completed the [React Native - Environment Setup] instructions up to
 > the "Creating a new application" step, before proceeding.
 
+- install rust e.g. `brew install rust`
+- prepare module via `npm run prepare` or `yarn prepare`
 
 ## Step 1: Start the Metro Server
 

example/android/app/build.gradle

@@ -128,5 +128,4 @@ if (isNewArchitectureEnabled()) {
         workingDir "$rootDir/../../"
         commandLine "npx", "bob", "build", "--target", "codegen"
     }
-    preBuild.dependsOn invokeLibraryCodegen
-}
+}

example/android/build.gradle

@@ -1,10 +1,10 @@
 buildscript {
     ext {
-        buildToolsVersion = "35.0.0"
+        buildToolsVersion = "36.0.0"
         minSdkVersion = 24
-        compileSdkVersion = 35
+        compileSdkVersion = 36
         targetSdkVersion = 34
-        ndkVersion = "26.1.10909125"
+        ndkVersion = "27.1.12297006"
         kotlinVersion = "1.9.25"
     }
     repositories {

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

example/package.json

@@ -10,20 +10,23 @@
     "build:ios": "react-native build-ios --scheme ReactNativeMatrixSdkExample --mode Debug --extra-params \"-sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO\""
   },
   "dependencies": {
-    "react": "18.3.1",
-    "react-native": "0.76.9"
+    "@react-navigation/native": "^7.3.18",
+    "@react-navigation/native-stack": "^7.18.10",
+    "react": "19.2.7",
+    "react-native": "^0.86.0",
+    "react-native-safe-area-context": "^5.9.1",
+    "react-native-screens": "^4.27.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
-    "@react-native-community/cli": "15.0.1",
-    "@react-native-community/cli-platform-android": "15.0.1",
-    "@react-native-community/cli-platform-ios": "15.0.1",
-    "@react-native/babel-preset": "0.76.9",
-    "@react-native/metro-config": "0.76.9",
-    "@react-native/typescript-config": "0.76.9",
-    "react-native-builder-bob": "^0.31.0"
+    "@react-native-community/cli": "^20.2.0",
+    "@react-native-community/cli-platform-android": "^20.2.0",
+    "@react-native-community/cli-platform-ios": "^20.2.0",
+    "@react-native/babel-preset": "^0.86.0",
+    "@react-native/metro-config": "^0.86.0",
+    "@react-native/typescript-config": "0.86.0"
   },
   "engines": {
     "node": ">=18"

example/src/App.tsx

@@ -1,43 +1,38 @@
-import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
 
-import { StyleSheet, View, Text, TextInput, Button } from 'react-native';
-import { ClientBuilder } from '@unomed/react-native-matrix-sdk';
+import { AppNavigationStack, CHAT, CHAT_LIST } from './AppNavigator';
+import { ChatListScreen } from './ChatListScreen';
+import { ChatScreen } from './ChatScreen';
+import { LoginScreen } from './LoginScreen';
 
-export default function App() {
-  const [homeserver, setHomeserver] = React.useState("https://matrix.org");
-  const [status, setStatus] = React.useState("");
-
-  const updateHomeserverLoginDetails = React.useCallback(async () => {
-    if (!homeserver.length) {
-      setStatus("");
-      return;
-    }
+import { MatrixProvider, useMatrix } from './use-matrix';
 
-    try {
-      const client = await (new ClientBuilder()).homeserverUrl(homeserver).build();
-      const loginDetails = await client.homeserverLoginDetails();
+function ExampleApp() {
+  const { session } = useMatrix();
 
-      setStatus(`url: ${loginDetails.url()}\n`
-        + `supportsOidcLogin: ${loginDetails.supportsOauthLogin()}\n`
-        + `supportsPasswordLogin: ${loginDetails.supportsPasswordLogin()}`);
-    } catch (error) {
-      setStatus(`${error}`);
-    }
-  }, [homeserver]);
+  if (!session) {
+    return <LoginScreen />
+  }
 
   return (
-    <View style={styles.container}>
-      <TextInput value={homeserver} onChangeText={setHomeserver}></TextInput>
-      <Button title='Go' onPress={updateHomeserverLoginDetails}></Button>
-      <Text>{status}</Text>
-    </View>
+    <NavigationContainer>
+      <AppNavigationStack.Navigator
+        initialRouteName={CHAT_LIST}
+        screenOptions={{
+          headerShown: false,
+        }}>
+        <AppNavigationStack.Screen name={CHAT_LIST} component={ChatListScreen} />
+        <AppNavigationStack.Screen name={CHAT} component={ChatScreen} />
+      </AppNavigationStack.Navigator>
+    </NavigationContainer>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  }
-});
+
+export default function App() {
+  return (
+    <MatrixProvider>
+      <ExampleApp />
+    </MatrixProvider>
+  );
+}

example/src/AppNavigator.tsx

@@ -0,0 +1,27 @@
+import { createNativeStackNavigator, type NativeStackScreenProps } from '@react-navigation/native-stack';
+
+export const LOGIN = 'login';
+export const CHAT_LIST = 'chat-list';
+export const CHAT = 'chat';
+
+export type AppNavigationType = {
+    [LOGIN]: undefined;
+    [CHAT_LIST]: undefined;
+    [CHAT]: { id: string };
+};
+
+export type LoginScreenProps = NativeStackScreenProps<
+    AppNavigationType,
+    typeof LOGIN
+>;
+export type ChatListScreenProps = NativeStackScreenProps<
+    AppNavigationType,
+    typeof CHAT_LIST
+>;
+export type ChatScreenProps = NativeStackScreenProps<
+    AppNavigationType,
+    typeof CHAT
+>;
+
+export const AppNavigationStack =
+  createNativeStackNavigator<AppNavigationType>();

example/src/ChatListScreen.tsx

@@ -0,0 +1,68 @@
+import { type FunctionComponent } from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { CHAT, type ChatListScreenProps } from './AppNavigator';
+import { styles } from './styles';
+import { useMatrix, type MatrixAPI } from './use-matrix';
+import { Picture } from './Picture';
+import { Footer } from './Footer';
+import { roomWithNewestMessageFirst } from './matrix-lib/sort';
+import { MessagePreview } from './ChatScreen';
+
+export const ChatListScreen: FunctionComponent<ChatListScreenProps> = ({ navigation }) => {
+    const { roomMap, messageMap, spaceMap, session, userMap } = useMatrix();
+    const ownUserId = session?.userId;
+    const ownUser = ownUserId ? userMap[ownUserId] : undefined;
+
+    return (
+        <SafeAreaView style={styles.container}>
+            <View style={[styles.hStack, styles.hSpaceCenter, styles.vSpaceCenter, { padding: 5 }]}>
+                <Picture url={ownUser?.avatarUrl} style={[styles.picture, styles.pictureSmall]}/>
+                <Text>{ownUser?.displayName}</Text>
+            </View>
+            <ScrollView contentContainerStyle={{ padding: 10 }}>
+                {
+                    Object.entries(roomMap)
+                        .sort(([_idA,roomA],[_idB, roomB]) => roomWithNewestMessageFirst(roomA, roomB))
+                        .map(([id, chat], index) => <Pressable key={chat.id()} onPress={() => navigation.navigate(CHAT, { id })} style={[
+                            { paddingVertical: 5},
+                            index === 0 ? { borderTopWidth: 1, borderTopColor: 'black'} : {},
+                            { borderBottomWidth: 1, borderBottomColor: 'black' }
+                            ]}>
+                            <ChatRow chat={chat} messageList={messageMap[id] ?? []} space={spaceMap[id]?.displayName()}/>
+                        </Pressable>)
+                }
+            </ScrollView>
+            <Footer />
+        </SafeAreaView>
+    );
+}
+
+type Chat = MatrixAPI['roomMap'][keyof MatrixAPI['roomMap']];
+type MessageList = MatrixAPI['messageMap'][keyof MatrixAPI['messageMap']]
+const ChatRow: FunctionComponent<{ chat: Chat, messageList: MessageList, space: string | undefined }> = ({ chat, messageList, space }) => {
+    const lastMessage = messageList[messageList.length - 1];
+    const unreadMessages = messageList.filter(({ isRead }) => !isRead);
+    return <View style={[styles.hStack, { gap: 8, width: '100%' }]}>
+        <Picture url={chat.avatarUrl()} style={[styles.picture, styles.pictureLarge]}/>
+        <View style={[styles.vStack, styles.hSpaceCenter]}>
+            <View style={[styles.hStack, styles.hSpaceBetween, styles.vSpaceCenter, { width: '100%' }]}>
+                <Text>{chat.displayName()} {space ? `(${space.split(' ')[0]})` : ''}</Text>
+                <Text>{lastMessage?.timestamp.toLocaleString()}</Text>
+            </View>
+            <View style={[styles.hStack, styles.hSpaceBetween, styles.vSpaceBottom]}>
+                {
+                    lastMessage
+                    ? <MessagePreview message={lastMessage} />
+                    : <Text style={{fontStyle: 'italic'}}>no message</Text>
+                }
+                {
+                    unreadMessages.length > 0
+                    ? <View style={[styles.badge]}><Text>{unreadMessages.length}</Text></View>
+                    : null
+                }
+            </View>
+        </View>
+    </View>
+}