Upgrade Expo SDK to v51

android/.gitignore

@@ -10,6 +10,7 @@ build/
 local.properties
 *.iml
 *.hprof
+.cxx/
 
 # Bundle artifacts
 *.jsbundle

android/app/build.gradle

@@ -221,7 +221,6 @@ dependencies {
     implementation("androidx.core:core-splashscreen:1.0.0")
     // implementation 'org.web3j:core:4.8.8-android'
 
-    implementation("com.facebook.react:flipper-integration")
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")
     } else {

android/app/src/main/java/com/converse/dev/MainApplication.kt

@@ -2,18 +2,14 @@ package com.converse.dev
 
 import android.app.Application
 import android.content.res.Configuration
-import androidx.annotation.NonNull
 
 import com.facebook.react.PackageList
 import com.facebook.react.ReactApplication
 import com.facebook.react.ReactNativeHost
 import com.facebook.react.ReactPackage
 import com.facebook.react.ReactHost
-import com.facebook.react.config.ReactFeatureFlags
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.react.flipper.ReactNativeFlipper
 import com.facebook.soloader.SoLoader
 
 import expo.modules.ApplicationLifecycleDispatcher
@@ -40,21 +36,15 @@ class MainApplication : Application(), ReactApplication {
   )
 
   override val reactHost: ReactHost
-    get() = getDefaultReactHost(this.applicationContext, reactNativeHost)
+    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
 
   override fun onCreate() {
     super.onCreate()
     SoLoader.init(this, false)
-//    if (!BuildConfig.REACT_NATIVE_UNSTABLE_USE_RUNTIME_SCHEDULER_ALWAYS) {
-//      ReactFeatureFlags.unstable_useRuntimeSchedulerAlways = false
-//    }
     if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       load()
     }
-    if (BuildConfig.DEBUG) {
-      ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
-    }
     ApplicationLifecycleDispatcher.onApplicationCreate(this)
   }
 

android/app/src/main/java/com/converse/dev/PushNotificationsService.kt

@@ -15,9 +15,7 @@ import com.google.crypto.tink.subtle.Base64
 import com.google.firebase.messaging.FirebaseMessagingService
 import com.google.firebase.messaging.RemoteMessage
 import com.reactnativecommunity.asyncstorage.AsyncStorageModule
-import expo.modules.core.ExportedModule
 import expo.modules.core.ModuleRegistry
-import expo.modules.core.ViewManager
 import expo.modules.core.interfaces.InternalModule
 import expo.modules.core.interfaces.SingletonModule
 import expo.modules.kotlin.AppContext
@@ -189,11 +187,9 @@ class PushNotificationsService : FirebaseMessagingService() {
         // to access the Expo SecureStore module from Kotlin
 
         val internalModules: Collection<InternalModule> = listOf()
-        val exportedModules: Collection<ExportedModule> = listOf()
-        val viewManagers: Collection<ViewManager<View>> = listOf()
         val singletonModules: Collection<SingletonModule> = listOf()
 
-        val moduleRegistry = ModuleRegistry(internalModules, exportedModules, viewManagers, singletonModules)
+        val moduleRegistry = ModuleRegistry(internalModules, singletonModules)
 
         reactAppContext = ReactApplicationContext(this)
         val weakRef = WeakReference(reactAppContext)

android/build.gradle

@@ -6,16 +6,16 @@ buildscript {
         minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '23')
         compileSdkVersion = 34
         targetSdkVersion = 34
-        kotlinVersion = "1.8.0"
+        kotlinVersion = "1.9.23"
 
-        ndkVersion = "25.1.8937393"
+        ndkVersion = "26.1.10909125"
     }
     repositories {
         google()
         mavenCentral()
     }
     dependencies {
-        classpath('com.android.tools.build:gradle:8.4.1')
+        classpath('com.android.tools.build:gradle:8.5.0')
         classpath('com.facebook.react:react-native-gradle-plugin')
         classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.0'
         classpath("io.sentry:sentry-android-gradle-plugin:3.11.1")

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.6-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

android/gradlew.bat

@@ -43,11 +43,11 @@ set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
 if %ERRORLEVEL% equ 0 goto execute
 
-echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
 
 goto fail
 
@@ -57,11 +57,11 @@ set JAVA_EXE=%JAVA_HOME%/bin/java.exe
 
 if exist "%JAVA_EXE%" goto execute
 
-echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
 
 goto fail
 

components/AccountSettingsButton.tsx

@@ -15,6 +15,9 @@ import {
   useColorScheme,
 } from "react-native";
 
+import Picto from "./Picto/Picto";
+import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
+import { TableViewPicto } from "./TableView/TableViewImage";
 import { refreshProfileForAddress } from "../data/helpers/profiles/profilesUpdate";
 import { useAccountsStore } from "../data/store/accountsStore";
 import { useAppStore } from "../data/store/appStore";
@@ -26,9 +29,6 @@ import {
   NotificationPermissionStatus,
   requestPushNotificationsPermissions,
 } from "../utils/notifications";
-import Picto from "./Picto/Picto";
-import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
-import { TableViewPicto } from "./TableView/TableViewImage";
 
 type Props = {
   account: string;

components/Chat/Chat.tsx

@@ -21,6 +21,13 @@ import {
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+import ChatPlaceholder from "./ChatPlaceholder/ChatPlaceholder";
+import { GroupChatPlaceholder } from "./ChatPlaceholder/GroupChatPlaceholder";
+import ConsentPopup from "./ConsentPopup/ConsentPopup";
+import { GroupConsentPopup } from "./ConsentPopup/GroupConsentPopup";
+import ChatInput from "./Input/Input";
+import CachedChatMessage, { MessageToDisplay } from "./Message/Message";
+import TransactionInput from "./Transaction/TransactionInput";
 import {
   useCurrentAccount,
   useProfilesStore,
@@ -40,13 +47,6 @@ import { converseEventEmitter } from "../../utils/events";
 import { getProfileData } from "../../utils/profile";
 import { isContentType } from "../../utils/xmtpRN/contentTypes";
 import { Recommendation } from "../Recommendations/Recommendation";
-import ChatPlaceholder from "./ChatPlaceholder/ChatPlaceholder";
-import { GroupChatPlaceholder } from "./ChatPlaceholder/GroupChatPlaceholder";
-import ConsentPopup from "./ConsentPopup/ConsentPopup";
-import { GroupConsentPopup } from "./ConsentPopup/GroupConsentPopup";
-import ChatInput from "./Input/Input";
-import CachedChatMessage, { MessageToDisplay } from "./Message/Message";
-import TransactionInput from "./Transaction/TransactionInput";
 
 const getListArray = (
   xmtpAddress?: string,

components/Chat/ChatGroupUpdatedMessage.tsx

@@ -3,12 +3,12 @@ import { GroupUpdatedContent } from "@xmtp/react-native-sdk";
 import { useMemo } from "react";
 import { StyleSheet, Text, useColorScheme } from "react-native";
 
+import { MessageToDisplay } from "./Message/Message";
 import {
   useInboxIdStore,
   useProfilesStore,
 } from "../../data/store/accountsStore";
 import { getPreferredName } from "../../utils/profile";
-import { MessageToDisplay } from "./Message/Message";
 
 export default function ChatGroupUpdatedMessage({
   message,

components/Chat/Frame/FramesPreviews.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 
+import FramePreview from "./FramePreview";
 import { useCurrentAccount } from "../../../data/store/accountsStore";
 import { useFramesStore } from "../../../data/store/framesStore";
 import {
@@ -9,7 +10,6 @@ import {
   fetchFramesForMessage,
 } from "../../../utils/frames";
 import { MessageToDisplay } from "../Message/Message";
-import FramePreview from "./FramePreview";
 
 type Props = {
   message: MessageToDisplay;

components/Chat/Input/Input.tsx

@@ -16,6 +16,7 @@ import {
   View,
 } from "react-native";
 
+import ChatInputReplyPreview from "./InputReplyPreview";
 import SendButtonDefaultDark from "../../../assets/send-button-dark.svg";
 import SendButtonHigher from "../../../assets/send-button-higher.svg";
 import SendButtonDefaultLight from "../../../assets/send-button-light.svg";
@@ -26,7 +27,6 @@ import { sendMessage } from "../../../utils/message";
 import { TextInputWithValue } from "../../../utils/str";
 import AddAttachmentButton from "../Attachment/AddAttachmentButton";
 import { MessageToDisplay } from "../Message/Message";
-import ChatInputReplyPreview from "./InputReplyPreview";
 
 const getSendButtonType = (input: string): "DEFAULT" | "HIGHER" => {
   if (input.match(/\bhigher\b/gi)) {

components/Chat/Message/Message.tsx

@@ -21,6 +21,9 @@ import {
 } from "react-native";
 import { Swipeable } from "react-native-gesture-handler";
 
+import ChatMessageActions from "./MessageActions";
+import ChatMessageReactions from "./MessageReactions";
+import MessageStatus from "./MessageStatus";
 import {
   currentAccount,
   useChatStore,
@@ -54,9 +57,6 @@ import ChatGroupUpdatedMessage from "../ChatGroupUpdatedMessage";
 import FramesPreviews from "../Frame/FramesPreviews";
 import ChatInputReplyBubble from "../Input/InputReplyBubble";
 import TransactionPreview from "../Transaction/TransactionPreview";
-import ChatMessageActions from "./MessageActions";
-import ChatMessageReactions from "./MessageReactions";
-import MessageStatus from "./MessageStatus";
 
 export type MessageToDisplay = XmtpMessage & {
   hasPreviousMessageInSeries: boolean;

components/Chat/Message/MessageActions.tsx

@@ -26,6 +26,8 @@ import {
   withTiming,
 } from "react-native-reanimated";
 
+import { MessageToDisplay } from "./Message";
+import MessageTail from "./MessageTail";
 import {
   useCurrentAccount,
   useSettingsStore,
@@ -47,8 +49,6 @@ import {
 import { isTransactionMessage } from "../../../utils/transaction";
 import EmojiPicker from "../../../vendor/rn-emoji-keyboard";
 import { showActionSheetWithOptions } from "../../StateHandlers/ActionSheetStateHandler";
-import { MessageToDisplay } from "./Message";
-import MessageTail from "./MessageTail";
 
 type Props = {
   children: React.ReactNode;

components/Chat/Message/MessageReactions.tsx

@@ -12,6 +12,7 @@ import {
   View,
 } from "react-native";
 
+import { MessageToDisplay } from "./Message";
 import {
   useCurrentAccount,
   useProfilesStore,
@@ -25,7 +26,6 @@ import {
   removeReactionFromMessage,
 } from "../../../utils/reactions";
 import { showActionSheetWithOptions } from "../../StateHandlers/ActionSheetStateHandler";
-import { MessageToDisplay } from "./Message";
 
 type Props = {
   message: MessageToDisplay;

components/Chat/Message/MessageTimestamp.tsx

@@ -2,8 +2,8 @@ import { textPrimaryColor } from "@styles/colors";
 import React from "react";
 import { StyleSheet, Text, useColorScheme, View } from "react-native";
 
-import { getTime } from "../../../utils/date";
 import { MessageToDisplay } from "./Message";
+import { getTime } from "../../../utils/date";
 
 type Props = {
   message: MessageToDisplay;

components/ClickableText.tsx

@@ -5,6 +5,7 @@ import { useCallback } from "react";
 import { StyleProp, StyleSheet, TextStyle, useColorScheme } from "react-native";
 import ParsedText from "react-native-parsed-text";
 
+import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
 import { navigate } from "../utils/navigation";
 import {
   ADDRESS_REGEX,
@@ -16,7 +17,6 @@ import {
   UNS_REGEX,
   URL_REGEX,
 } from "../utils/regex";
-import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
 
 type Props = {
   children: React.ReactNode;

components/Connecting.tsx

@@ -1,7 +1,7 @@
+import ActivityIndicator from "./ActivityIndicator/ActivityIndicator";
 import { useChatStore } from "../data/store/accountsStore";
 import { useAppStore } from "../data/store/appStore";
 import { useSelect } from "../data/store/storeHelpers";
-import ActivityIndicator from "./ActivityIndicator/ActivityIndicator";
 
 export const useShouldShowConnecting = () => {
   const isInternetReachable = useAppStore((s) => s.isInternetReachable);

components/ConversationFlashList.tsx

@@ -4,6 +4,8 @@ import { backgroundColor } from "@styles/colors";
 import { useCallback, useEffect, useRef } from "react";
 import { Platform, StyleSheet, View, useColorScheme } from "react-native";
 
+import { GroupConversationItem } from "./ConversationList/GroupConversationItem";
+import ConversationListItem from "./ConversationListItem";
 import {
   useChatStore,
   useCurrentAccount,
@@ -19,8 +21,6 @@ import {
 } from "../utils/conversation";
 import { getPreferredAvatar } from "../utils/profile";
 import { conversationName } from "../utils/str";
-import { GroupConversationItem } from "./ConversationList/GroupConversationItem";
-import ConversationListItem from "./ConversationListItem";
 
 type Props = {
   onScroll?: () => void;

components/ConversationListItem.tsx

@@ -32,6 +32,10 @@ import { RectButton } from "react-native-gesture-handler";
 import Swipeable from "react-native-gesture-handler/Swipeable";
 import { TouchableRipple } from "react-native-paper";
 
+import Avatar from "./Avatar";
+import GroupAvatar from "./GroupAvatar";
+import Picto from "./Picto/Picto";
+import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
 import {
   currentAccount,
   useChatStore,
@@ -45,10 +49,6 @@ import { isDesktop } from "../utils/device";
 import { converseEventEmitter } from "../utils/events";
 import { navigate } from "../utils/navigation";
 import { consentToPeersOnProtocol } from "../utils/xmtpRN/conversations";
-import Avatar from "./Avatar";
-import GroupAvatar from "./GroupAvatar";
-import Picto from "./Picto/Picto";
-import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
 
 type ConversationListItemProps = {
   colorScheme: ColorSchemeName;

components/DebugButton.tsx

@@ -7,6 +7,7 @@ import { Image } from "expo-image";
 import * as Updates from "expo-updates";
 import { forwardRef, useImperativeHandle } from "react";
 
+import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
 import config from "../config";
 import { getDbPath, resetDb } from "../data/db";
 import {
@@ -17,7 +18,6 @@ import {
 import { getPresignedUriForUpload } from "../utils/api";
 import { debugLogs, resetDebugLogs } from "../utils/debug";
 import mmkv from "../utils/mmkv";
-import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
 
 export const useEnableDebug = () => {
   const userAddress = useCurrentAccount() as string;

components/GroupAvatar.tsx

@@ -16,13 +16,13 @@ import {
   View,
 } from "react-native";
 
+import Avatar from "./Avatar";
 import {
   useProfilesStore,
   useCurrentAccount,
 } from "../data/store/accountsStore";
 import { useGroupMembers } from "../hooks/useGroupMembers";
 import { getPreferredAvatar, getPreferredName } from "../utils/profile";
-import Avatar from "./Avatar";
 
 const MAIN_CIRCLE_RADIUS = 50;
 const MAX_VISIBLE_MEMBERS = 4;