fix: add expo 51 support for expo messaging app. (#2574)

* fix: issues with expo-media-library in expo 51

* chore: change expo-media-library version

* chore: change expo-media-library version

* chore: change expo-media-library version

* fix: unable to upload clicked image on expo 51 using expo-image-picker

* fix: update deps

* fix: expo-media-library issue

Author: khushal87

examples/ExpoMessaging/components/AuthProgressLoader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {ActivityIndicator, StyleSheet} from 'react-native';
-import {SafeAreaView} from 'react-native-safe-area-context';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export const AuthProgressLoader = () => {
   return (

examples/ExpoMessaging/constants.ts

@@ -1,6 +1,7 @@
 export const STREAM_API_KEY = 'q95x9hkbyd6p';
 export const userToken =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9uIn0.eRVjxLvd4aqCEHY_JRa97g6k7WpHEhxL7Z4K4yTot1c';
+
 export const user = {
   id: 'ron',
 };

examples/ExpoMessaging/context/AppContext.tsx

@@ -1,39 +1,33 @@
-import { PropsWithChildren, createContext, useContext, useState } from "react";
-import { StreamChatGenerics } from "../types";
-import { Channel as ChannelType } from "stream-chat";
-import { ThreadContextValue } from "stream-chat-expo";
+import { PropsWithChildren, createContext, useContext, useState } from 'react';
+import { StreamChatGenerics } from '../types';
+import { Channel as ChannelType } from 'stream-chat';
+import { ThreadContextValue } from 'stream-chat-expo';
 
 export type AppContextType = {
-    channel: ChannelType<StreamChatGenerics> | undefined;
-    setChannel: React.Dispatch<
-        React.SetStateAction<ChannelType<StreamChatGenerics> | undefined>
-    >;
-    setThread: React.Dispatch<
-        React.SetStateAction<
-            ThreadContextValue<StreamChatGenerics>["thread"] | undefined
-        >
-    >;
-    thread: ThreadContextValue<StreamChatGenerics>["thread"] | undefined;
+  channel: ChannelType<StreamChatGenerics> | undefined;
+  setChannel: React.Dispatch<React.SetStateAction<ChannelType<StreamChatGenerics> | undefined>>;
+  setThread: React.Dispatch<
+    React.SetStateAction<ThreadContextValue<StreamChatGenerics>['thread'] | undefined>
+  >;
+  thread: ThreadContextValue<StreamChatGenerics>['thread'] | undefined;
 };
 
 export const AppContext = createContext<AppContextType>({
-    channel: undefined,
-    setChannel: undefined,
-    setThread: undefined,
-    thread: undefined,
+  channel: undefined,
+  setChannel: undefined,
+  setThread: undefined,
+  thread: undefined,
 });
 
 export const AppProvider = ({ children }: PropsWithChildren) => {
-    const [channel, setChannel] = useState<
-        ChannelType<StreamChatGenerics> | undefined
-    >(undefined);
-    const [thread, setThread] = useState<
-        ThreadContextValue<StreamChatGenerics>["thread"] | undefined
-    >(undefined);
+  const [channel, setChannel] = useState<ChannelType<StreamChatGenerics> | undefined>(undefined);
+  const [thread, setThread] = useState<
+    ThreadContextValue<StreamChatGenerics>['thread'] | undefined
+  >(undefined);
 
-    return (
-        <AppContext.Provider value={{ channel, setChannel, thread, setThread }}>
-            {children}
-        </AppContext.Provider>
-    );
+  return (
+    <AppContext.Provider value={{ channel, setChannel, thread, setThread }}>
+      {children}
+    </AppContext.Provider>
+  );
 };

examples/ExpoMessaging/package.json

@@ -10,39 +10,39 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@react-native-community/netinfo": "11.1.0",
+    "@react-native-community/netinfo": "11.3.1",
     "@react-navigation/elements": "^1.3.30",
-    "expo": "~50.0.19",
-    "expo-av": "~13.10.6",
-    "expo-clipboard": "~5.0.1",
-    "expo-constants": "~15.4.6",
-    "expo-document-picker": "~11.10.1",
-    "expo-file-system": "~16.0.9",
-    "expo-haptics": "~12.8.1",
-    "expo-image-manipulator": "~11.8.0",
-    "expo-image-picker": "~14.7.1",
-    "expo-linking": "~6.2.2",
-    "expo-media-library": "~15.9.2",
-    "expo-router": "~3.4.10",
-    "expo-sharing": "~11.10.0",
-    "expo-splash-screen": "~0.26.5",
-    "expo-status-bar": "~1.11.1",
+    "expo": "~51.0.14",
+    "expo-av": "~14.0.5",
+    "expo-clipboard": "~6.0.3",
+    "expo-constants": "~16.0.2",
+    "expo-document-picker": "~12.0.2",
+    "expo-file-system": "~17.0.1",
+    "expo-haptics": "~13.0.1",
+    "expo-image-manipulator": "~12.0.5",
+    "expo-image-picker": "~15.0.5",
+    "expo-linking": "~6.3.1",
+    "expo-media-library": "~16.0.4",
+    "expo-router": "~3.5.16",
+    "expo-sharing": "~12.0.1",
+    "expo-splash-screen": "~0.27.5",
+    "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.6",
-    "react-native-gesture-handler": "~2.14.0",
-    "react-native-quick-sqlite": "^8.0.6",
-    "react-native-reanimated": "~3.6.2",
-    "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
-    "react-native-svg": "14.1.0",
+    "react-native": "0.74.2",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-quick-sqlite": "^8.1.0",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "3.31.1",
+    "react-native-svg": "15.2.0",
     "react-native-web": "~0.19.6",
     "stream-chat-expo": "link:../../package/expo-package",
     "stream-chat-react-native-core": "link:../../package",
-    "typescript": "^5.3.0"
+    "typescript": "~5.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.24.0",
     "@rnx-kit/metro-config": "^1.3.15",
     "@rnx-kit/metro-resolver-symlinks": "^0.1.35"
   },