feat: introduce expo-router to expo messaging app (#2150)

* feat: introduce expo-router to expo messaging app

* refactor: move api key, user details and token to constants.ts

* fix: app name in package.json

Author: khushal87

examples/ExpoMessaging/App.tsx

@@ -3,11 +3,6 @@
     "name": "ExpoMessaging",
     "slug": "ExpoMessaging",
     "privacy": "public",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -19,19 +14,26 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
       "usesIcloudStorage": true,
       "bundleIdentifier": "io.stream.expomessaging"
     },
+    "android": {
+      "package": "io.stream.expomessaging",
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png",
+      "bundler": "metro"
+    },
     "experiments": {
       "turboModules": true
     },
-    "android": {
-      "package": "io.stream.expomessaging"
-    }
+    "scheme": "ExpoMessaging"
   }
 }

examples/ExpoMessaging/app.json

@@ -0,0 +1,23 @@
+import { Stack } from "expo-router";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { ChatWrapper } from "../components/ChatWrapper";
+import { AppProvider } from "../context/AppContext";
+import { StyleSheet } from "react-native";
+
+export default function Layout() {
+    return (
+        <GestureHandlerRootView style={styles.container}>
+            <ChatWrapper>
+                <AppProvider>
+                    <Stack />
+                </AppProvider>
+            </ChatWrapper>
+        </GestureHandlerRootView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});

examples/ExpoMessaging/app/_layout.tsx

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { SafeAreaView, View } from 'react-native';
+import { Channel, MessageInput, MessageList } from 'stream-chat-expo';
+import { Stack, useRouter } from 'expo-router';
+import { AuthProgressLoader } from '../../../components/AuthProgressLoader';
+import { AppContext } from '../../../context/AppContext';
+
+export default function ChannelScreen() {
+  const router = useRouter();
+  const { setThread, channel } = useContext(AppContext);
+
+  if (!channel) {
+    return <AuthProgressLoader />;
+  }
+
+  return (
+    <SafeAreaView>
+      <Stack.Screen options={{ title: 'Channel Screen' }} />
+      {channel && (
+        <Channel channel={channel}>
+          <View style={{ flex: 1 }}>
+            <MessageList
+              onThreadSelect={(thread) => {
+                setThread(thread);
+                router.push(`/channel/${channel.cid}/thread/${thread.cid}`);
+              }}
+            />
+            <MessageInput />
+          </View>
+        </Channel>
+      )}
+    </SafeAreaView>
+  );
+}

examples/ExpoMessaging/app/channel/[cid]/index.tsx

@@ -0,0 +1,29 @@
+import React, { useContext } from "react";
+import { SafeAreaView, View } from "react-native";
+import { Channel, Thread } from "stream-chat-expo";
+import { Stack } from "expo-router";
+import { AppContext } from "../../../../../context/AppContext";
+
+export default function ThreadScreen() {
+    const { channel, thread, setThread } = useContext(AppContext);
+    return (
+        <SafeAreaView>
+            <Stack.Screen options={{ title: "Thread Screen" }} />
+
+            <Channel channel={channel} thread={thread} threadList>
+                <View
+                    style={{
+                        flex: 1,
+                        justifyContent: "flex-start",
+                    }}
+                >
+                    <Thread
+                        onThreadDismount={() => {
+                            setThread(undefined);
+                        }}
+                    />
+                </View>
+            </Channel>
+        </SafeAreaView>
+    );
+}