ChatProvider and npm fix deps

xtablo-expo/app/(home)/_layout.tsx

@@ -1,36 +1,14 @@
-import { Slot, Stack } from "expo-router";
-import { useEffect } from "react";
-
-import { StreamChat } from "stream-chat";
-import { Chat, OverlayProvider } from "stream-chat-expo";
-
-const client = StreamChat.getInstance("t5vvvddteapa");
+import ChatProvider from "@/providers/ChatProvider";
+import { Stack } from "expo-router";
 
 export default function HomeLayout() {
-  useEffect(() => {
-    const connect = async () => {
-      await client.connectUser(
-        {
-          id: "artslidd",
-          name: "Arthur",
-        },
-        client.devToken("artslidd")
-      );
-      const channel = client.channel("messaging", "hello");
-      await channel.watch();
-    };
-    connect();
-  }, []);
-
   return (
-    <OverlayProvider>
-      <Chat client={client}>
-        <Stack>
-          <Stack.Screen name="index" options={{ headerShown: false }} />
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          <Stack.Screen name="channel" options={{ headerShown: false }} />
-        </Stack>
-      </Chat>
-    </OverlayProvider>
+    <ChatProvider>
+      <Stack>
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="channel" options={{ headerShown: false }} />
+      </Stack>
+    </ChatProvider>
   );
 }

xtablo-expo/app/(home)/channel/[cid].tsx

@@ -1,6 +1,6 @@
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { ActivityIndicator, Text } from "react-native";
+import { ActivityIndicator, SafeAreaView } from "react-native";
 import { Channel as ChannelType } from "stream-chat";
 import {
   Channel,
@@ -30,7 +30,9 @@ export default function ChannelScreen() {
   return (
     <Channel channel={channel}>
       <MessageList />
-      <MessageInput />
+      <SafeAreaView>
+        <MessageInput />
+      </SafeAreaView>
     </Channel>
   );
 }

xtablo-expo/package.json

@@ -16,43 +16,43 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
-    "@react-navigation/bottom-tabs": "^7.2.0",
-    "@react-navigation/native": "^7.0.14",
-    "expo": "~52.0.46",
-    "expo-blur": "~14.0.3",
-    "expo-constants": "~17.0.8",
-    "expo-font": "~13.0.4",
-    "expo-haptics": "~14.0.1",
-    "expo-linking": "~7.0.5",
-    "expo-router": "~4.0.20",
-    "expo-splash-screen": "~0.29.24",
-    "expo-status-bar": "~2.0.1",
-    "expo-symbols": "~0.2.2",
-    "expo-system-ui": "~4.0.9",
-    "expo-web-browser": "~14.0.2",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.76.9",
-    "react-native-gesture-handler": "~2.20.2",
-    "react-native-reanimated": "~3.16.1",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.4.0",
-    "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5",
-    "stream-chat-expo": "^6.7.3",
     "@react-native-community/netinfo": "11.4.1",
-    "expo-image-manipulator": "~13.0.6",
-    "react-native-svg": "15.8.0",
-    "expo-image-picker": "~16.0.6",
-    "expo-av": "~15.0.2"
+    "@react-navigation/bottom-tabs": "^7.2.0",
+    "expo": "^53.0.0",
+    "expo-av": "~15.1.4",
+    "expo-blur": "~14.1.4",
+    "expo-constants": "~17.1.5",
+    "expo-font": "~13.3.1",
+    "expo-haptics": "~14.1.4",
+    "expo-image-manipulator": "~13.1.5",
+    "expo-image-picker": "~16.1.4",
+    "expo-linking": "~7.1.4",
+    "expo-router": "~5.0.5",
+    "expo-splash-screen": "~0.30.8",
+    "expo-status-bar": "~2.2.3",
+    "expo-symbols": "~0.4.4",
+    "expo-system-ui": "~5.0.7",
+    "expo-web-browser": "~14.1.6",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.2",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.10.0",
+    "react-native-svg": "15.11.2",
+    "react-native-web": "^0.20.0",
+    "react-native-webview": "13.13.5",
+    "stream-chat-expo": "^6.7.3",
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@types/jest": "^29.5.12",
-    "@types/react": "~18.3.12",
+    "@types/react": "~19.0.10",
     "@types/react-test-renderer": "^18.3.0",
     "jest": "^29.2.1",
-    "jest-expo": "~52.0.6",
+    "jest-expo": "~53.0.4",
     "react-test-renderer": "18.3.1",
     "typescript": "^5.3.3"
   },

xtablo-expo/providers/ChatProvider.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { StreamChat } from "stream-chat";
+import { Chat, OverlayProvider } from "stream-chat-expo";
+
+export default function ChatProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const client = StreamChat.getInstance("t5vvvddteapa");
+
+  useEffect(() => {
+    const connect = async () => {
+      await client.connectUser(
+        {
+          id: "artslidd",
+          name: "Arthur",
+        },
+        client.devToken("artslidd")
+      );
+      const channel = client.channel("messaging", "hello");
+      await channel.watch();
+    };
+    connect();
+  }, []);
+
+  return (
+    <OverlayProvider>
+      <Chat client={client}>{children}</Chat>
+    </OverlayProvider>
+  );
+}