chore: rn 0.77 upgrade (#2973)

* chore: upgrade SampleApp and do necessary changes for 0.77

* chore: update more libs

* chore: upgrade reanimated and rngh

* chore: upgrade react-navigation

* chore: bump other deps

* chore: bump eslint and all other dev deps

* chore: migrate AppDelegate to Swift

* chore: upgrade typescript app to RN 0.77

* chore: upgrade eslint & friends on typescript app

* chore: migrate AppDelegate to Swift in typescript app

* fix: add tslint rules and fix some

* chore: upgrade plugins decl a bit and fix all broken eslint issues

* fix: some more prettier errors

* chore: improve typescript app config too

* fix: upload file/image and respect app settings (#2976)

* fix: file upload preview state refresh when state changes

* fix: upload file/image and respect app settings

* fix: upload file/image and respect app settings

* fix: upload file/image and respect app settings

* fix: update expo dependencies in expo sample app to latest (#2975)

* fix: file upload preview state refresh when state changes

* fix: update expo dependencies in expo sample app to latest

* chore: bump expo app to latest versions too

* chore: remove console.log

---------

Co-authored-by: Khushal Agarwal <[email protected]>

Author: isekovanic

examples/ExpoMessaging/package.json

@@ -10,7 +10,7 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@op-engineering/op-sqlite": "^11.4.2",
+    "@op-engineering/op-sqlite": "^11.4.7",
     "@react-native-community/netinfo": "11.4.1",
     "@react-navigation/elements": "^1.3.30",
     "expo": "~52.0.36",
@@ -30,21 +30,21 @@
     "expo-status-bar": "~2.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.76.7",
-    "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-svg": "15.8.0",
+    "react-native": "0.77.1",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.16.7",
+    "react-native-safe-area-context": "5.2.0",
+    "react-native-screens": "~4.8.0",
+    "react-native-svg": "15.11.1",
     "react-native-web": "~0.19.13",
     "stream-chat-expo": "link:../../package/expo-package",
     "stream-chat-react-native-core": "link:../../package",
-    "typescript": "~5.3.3"
+    "typescript": "~5.7.3"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@rnx-kit/metro-config": "^1.3.15",
-    "@rnx-kit/metro-resolver-symlinks": "^0.1.35"
+    "@rnx-kit/metro-config": "^2.0.1",
+    "@rnx-kit/metro-resolver-symlinks": "^0.2.1"
   },
   "private": true
 }

examples/ExpoMessaging/yarn.lock

@@ -33,6 +33,7 @@ local.properties
 .cxx/
 *.keystore
 !debug.keystore
+.kotlin/
 
 # node.js
 #
@@ -71,4 +72,4 @@ yarn-error.log
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions

examples/SampleApp/.eslintrc.js

@@ -12,7 +12,7 @@ import {
   ThemeProvider,
   useOverlayContext,
 } from 'stream-chat-react-native';
-import messaging from '@react-native-firebase/messaging';
+import { getMessaging } from '@react-native-firebase/messaging';
 import notifee, { EventType } from '@notifee/react-native';
 import { AppContext } from './src/context/AppContext';
 import { AppOverlayProvider } from './src/context/AppOverlayProvider';
@@ -80,7 +80,8 @@ const App = () => {
   const streamChatTheme = useStreamChatTheme();
 
   useEffect(() => {
-    const unsubscribeOnNotificationOpen = messaging().onNotificationOpenedApp((remoteMessage) => {
+    const messaging = getMessaging();
+    const unsubscribeOnNotificationOpen = messaging.onNotificationOpenedApp((remoteMessage) => {
       // Notification caused app to open from background state on iOS
       const channelId = remoteMessage.data?.channel_id as string;
       if (channelId) {
@@ -106,7 +107,7 @@ const App = () => {
         }
       }
     });
-    messaging()
+    messaging
       .getInitialNotification()
       .then((remoteMessage) => {
         if (remoteMessage) {
@@ -138,6 +139,7 @@ const App = () => {
               ...(colorScheme === 'dark' ? DarkTheme : DefaultTheme).colors,
               background: streamChatTheme.colors?.white_snow || '#FCFCFC',
             },
+            fonts: (colorScheme === 'dark' ? DarkTheme : DefaultTheme).fonts,
             dark: colorScheme === 'dark',
           }}
         >
@@ -181,7 +183,7 @@ const DrawerNavigatorWrapper: React.FC<{
         <Chat<StreamChatGenerics>
           client={chatClient}
           enableOfflineSupport
-          // @ts-expect-error
+          // @ts-expect-error - the `ImageComponent` prop is generic, meaning we can expect an error
           ImageComponent={FastImage}
           isMessageAIGenerated={(message: MessageType) => !!message.ai_generated}
         >

examples/SampleApp/.gitignore

@@ -78,7 +78,7 @@ GEM
     colored2 (3.1.2)
     commander (4.6.0)
       highline (~> 2.0.0)
-    concurrent-ruby (1.3.4)
+    concurrent-ruby (1.2.3)
     declarative (0.0.20)
     digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
@@ -317,6 +317,7 @@ PLATFORMS
 DEPENDENCIES
   activesupport (>= 6.1.7.5, != 7.1.0)
   cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
+  concurrent-ruby (< 1.3.4)
   fastlane
   fastlane-plugin-firebase_app_distribution
   fastlane-plugin-load_json

examples/SampleApp/App.tsx

@@ -65,14 +65,14 @@ def enableProguardInReleaseBuilds = false
  * The preferred build flavor of JavaScriptCore (JSC)
  *
  * For example, to use the international variant, you can use:
- * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ * `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
  *
  * The international variant includes ICU i18n library and necessary data
  * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
  * give correct results when using with locales other than en-US. Note that
  * this variant is about 6MiB larger per architecture than default.
  */
-def jscFlavor = 'org.webkit:android-jsc:+'
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
 
 android {
     ndkVersion rootProject.ext.ndkVersion

examples/SampleApp/Gemfile.lock

@@ -6,9 +6,9 @@ buildscript {
         buildToolsVersion = "35.0.0"
         minSdkVersion = 24
         compileSdkVersion = 35
-        targetSdkVersion = 34
-        ndkVersion = "26.1.10909125"
-        kotlinVersion = "1.9.25"
+        targetSdkVersion = 35
+        ndkVersion = "27.1.12297006"
+        kotlinVersion = "2.0.21"
         androidXCore = "1.0.2"
     }
     repositories {

examples/SampleApp/android/app/build.gradle

@@ -1,7 +1,7 @@
 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.12-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
-zipStorePath=wrapper/dists
+zipStorePath=wrapper/dists

examples/SampleApp/android/build.gradle

@@ -86,8 +86,7 @@ done
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
 # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
-APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
-' "$PWD" ) || exit
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
@@ -249,4 +248,4 @@ eval "set -- $(
         tr '\n' ' '
     )" '"$@"'
 
-exec "$JAVACMD" "$@"
+exec "$JAVACMD" "$@"