chore: upgrade to react native 81 and expo 54

.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml

@@ -18,7 +18,7 @@ tags:
 # Show alerts as Toasts
 - tapOn: 'Menu'
 - tapOn: 'Accessibility & appearance'
-- tapOn: 'Show alerts as. Toasts'
+- tapOn: '.*Show alerts as.*'
 - assertVisible: 'Toasts. Dismissed automatically. Checked'
 - assertVisible: 'Dialogs. Require manual dismissal. Unchecked'
 - tapOn:
@@ -37,7 +37,7 @@ tags:
 
 # Show alerts as Dialogs
 - tapOn: 'Accessibility & appearance'
-- tapOn: 'Show alerts as. Toasts'
+- tapOn: '.*Show alerts as.*'
 - assertVisible: 'Toasts. Dismissed automatically. Checked'
 - tapOn: 'Dialogs. Require manual dismissal. Unchecked'
 - tapOn: 'Menu'

.maestro/tests/assorted/join-from-directory.yaml

@@ -97,10 +97,10 @@ tags:
     id: 'directory-view-filter'
 - extendedWaitUntil:
     visible:
-      text: 'Users unselected'
+      id: 'directory-switch-users'
     timeout: 60000
 - tapOn:
-    text: 'Users unselected'
+    id: 'directory-switch-users'
 - tapOn:
     id: 'directory-view-search'
 - inputText: ${output.otherUser.username}
@@ -145,10 +145,10 @@ tags:
     id: 'directory-view-filter'
 - extendedWaitUntil:
     visible:
-      text: 'Teams unselected'
+      id: 'directory-switch-teams'
     timeout: 60000
 - tapOn:
-    text: 'Teams unselected'
+    id: 'directory-switch-teams'
 - tapOn:
     id: 'directory-view-search'
 - inputText: ${output.team}

.maestro/tests/assorted/profile.yaml

@@ -96,7 +96,8 @@ tags:
     env:
       id: 'profile-view-username'
 - inputText: ${output.user.username + 'username'}
-- tapOn: '.*Username.*' #hidekeyboard on iOS
+- runFlow:
+    file: '../../helpers/hide-keyboard.yaml'
 - scrollUntilVisible:
     element:
       id: 'profile-view-submit'
@@ -111,9 +112,8 @@ tags:
 - tapOn:
     id: 'profile-view-nickname'
 - inputText: ${output.user.username + 'newnickname'}
-- tapOn:
-    text: '.*Nickname.*'
-    index: 0
+- runFlow:
+    file: '../../helpers/hide-keyboard.yaml'
 - assertVisible:
     id: 'profile-view-bio'
 - tapOn:

.maestro/tests/room/room-actions.yaml

@@ -121,8 +121,8 @@ tags:
     from:
       id: action-sheet-handle
     direction: UP
-- extendedWaitUntil:
-    visible:
+- scrollUntilVisible:
+    element:
       text: 'Star'
     timeout: 60000
 - tapOn:

android/app/src/main/AndroidManifest.xml

@@ -28,6 +28,7 @@
         android:requestLegacyExternalStorage="true"
         android:supportsRtl="true"
         android:theme="@style/AppTheme"
+        android:usesCleartextTraffic="${usesCleartextTraffic}"
         android:hardwareAccelerated="true"
         tools:replace="android:allowBackup">
         <activity

android/app/src/main/java/chat/rocket/reactnative/MainApplication.kt

@@ -5,13 +5,14 @@ import android.content.res.Configuration
 import com.facebook.react.PackageList
 import com.facebook.react.ReactApplication
 import com.facebook.react.ReactHost
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
+import com.facebook.react.ReactInstanceEventListener
 import com.facebook.react.ReactNativeHost
 import com.facebook.react.ReactPackage
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.react.soloader.OpenSourceMergedSoMapping
-import com.facebook.soloader.SoLoader
 import com.nozbe.watermelondb.jsi.WatermelonDBJSIPackage;
 import com.bugsnag.android.Bugsnag
 import expo.modules.ApplicationLifecycleDispatcher
@@ -61,15 +62,14 @@ open class MainApplication : Application(), ReactApplication {
 
   override fun onCreate() {
     super.onCreate()
-    SoLoader.init(this, OpenSourceMergedSoMapping)
     Bugsnag.start(this)
 
     // Initialize MMKV encryption - reads existing key or generates new one
     // Must run before React Native starts to avoid race conditions
     MMKVKeyManager.initialize(this)
 
     // Load the native entry point for the New Architecture
-    load()
+    loadReactNative(this)
 
 		ApplicationLifecycleDispatcher.onApplicationCreate(this)
   }

android/app/src/main/java/chat/rocket/reactnative/networking/SSLPinningTurboModule.java

@@ -33,7 +33,7 @@
 import java.util.concurrent.TimeUnit;
 
 import com.reactnativecommunity.webview.RNCWebViewManager;
-import expo.modules.filesystem.FileSystemModule;
+import expo.modules.filesystem.legacy.FileSystemLegacyModule;
 import chat.rocket.reactnative.networking.ExpoImageClient;
 
 public class SSLPinningTurboModule extends NativeSSLPinningSpec implements KeyChainAliasCallback {
@@ -107,7 +107,7 @@ public void setCertificate(String name, Promise promise) {
         RNCWebViewManager.setCertificateAlias(name);
 
         // Expo File System network layer
-        FileSystemModule.setOkHttpClient(client);
+        FileSystemLegacyModule.setOkHttpClient(client);
         // Expo Image network layer
         ExpoImageClient.setOkHttpClient(client);
         ExpoImageClient.applyToGlide(this.reactContext);

android/build.gradle

@@ -1,11 +1,11 @@
 buildscript {
     ext {
-        buildToolsVersion = "35.0.0"
+        buildToolsVersion = "36.0.0"
         minSdkVersion = 24
-        compileSdkVersion = 35
-        targetSdkVersion = 35
+        compileSdkVersion = 36
+        targetSdkVersion = 36
         ndkVersion = "27.1.12297006"
-        kotlinVersion = "2.0.21"
+        kotlinVersion = "2.1.20"
         kotlin_version = kotlinVersion
         glideVersion = "4.11.0"
         supportLibVersion = "28.0.0"

android/gradle.properties

@@ -43,4 +43,9 @@ BugsnagAPIKey=""
 
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.
-hermesEnabled=true
+hermesEnabled=true
+
+# Use this property to enable edge-to-edge display support.
+# This allows your app to draw behind system bars for an immersive UI.
+# Note: Only works with ReactActivity and should not be used with custom Activity.
+edgeToEdgeEnabled=false

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

app.json

@@ -1,3 +1,4 @@
 {
-	"name": "RocketChatRN"
+	"name": "RocketChatRN",
+	"plugins": ["@react-native-community/datetimepicker", "expo-web-browser"]
 }

app/containers/ActionSheet/Handle.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { Pressable } from 'react-native-gesture-handler';
+import { RectButton } from 'react-native-gesture-handler';
 
 import styles from './styles';
 import { themes } from '../../lib/constants/colors';
@@ -11,16 +11,16 @@ export const Handle = ({ onPress }: { onPress: () => void }) => {
 
 	const { theme } = useTheme();
 
-	// We should use Pressable from gesture-handler to avoid issues with the keyboard
+	// We should use RectButton from gesture-handler to avoid issues with the keyboard
 	return (
-		<Pressable
+		<RectButton
 			onPress={onPress}
 			style={styles.handle}
 			testID='action-sheet-handle'
 			accessibilityRole='button'
 			accessibilityLabel='Close action sheet'
 			accessibilityHint='Dismisses the action sheet'>
 			<View style={[styles.handleIndicator, { backgroundColor: themes[theme].fontSecondaryInfo }]} />
-		</Pressable>
+		</RectButton>
 	);
 };

app/containers/AudioPlayer/Seek.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
 import { type LayoutChangeEvent, View, TextInput, type TextInputProps, TouchableNativeFeedback } from 'react-native';
-import { PanGestureHandler, type PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
 	type SharedValue,
-	runOnJS,
-	useAnimatedGestureHandler,
 	useAnimatedProps,
 	useAnimatedStyle,
 	useDerivedValue,
-	useSharedValue
+	useSharedValue,
+	withTiming
 } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 
 import styles from './styles';
 import { useTheme } from '../../theme';
 import { SEEK_HIT_SLOP, THUMB_SEEK_SIZE, ACTIVE_OFFSET_X, DEFAULT_TIME_LABEL } from './constants';
 
-Animated.addWhitelistedNativeProps({ text: true });
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
 interface ISeek {
@@ -50,6 +49,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 	const timeLabel = useSharedValue(DEFAULT_TIME_LABEL);
 	const scale = useSharedValue(1);
 	const isPanning = useSharedValue(false);
+	const contextX = useSharedValue(0);
 
 	const styleLine = useAnimatedStyle(() => ({
 		width: translateX.value
@@ -64,21 +64,25 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 		maxWidth.value = width;
 	};
 
-	const onGestureEvent = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, { offsetX: number }>({
-		onStart: (_event, ctx) => {
+	const panGesture = Gesture.Pan()
+		.enabled(loaded)
+		.activeOffsetX([-ACTIVE_OFFSET_X, ACTIVE_OFFSET_X])
+		.onStart(() => {
 			isPanning.value = true;
-			ctx.offsetX = translateX.value;
-		},
-		onActive: ({ translationX }, ctx) => {
-			translateX.value = clamp(ctx.offsetX + translationX, 0, maxWidth.value);
-			scale.value = 1.3;
-		},
-		onFinish() {
-			scale.value = 1;
+			contextX.value = translateX.value;
+			scale.value = withTiming(1.3, { duration: 150 });
+		})
+		.onUpdate(event => {
+			const newX = contextX.value + event.translationX;
+			translateX.value = clamp(newX, 0, maxWidth.value);
+		})
+		.onEnd(() => {
+			scheduleOnRN(onChangeTime, Math.round(currentTime.value * 1000));
+		})
+		.onFinalize(() => {
 			isPanning.value = false;
-			runOnJS(onChangeTime)(Math.round(currentTime.value * 1000));
-		}
-	});
+			scale.value = withTiming(1, { duration: 150 });
+		});
 
 	useDerivedValue(() => {
 		if (isPanning.value) {
@@ -118,9 +122,9 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 					<View style={[styles.line, { backgroundColor: colors.strokeLight }]}>
 						<Animated.View style={[styles.line, styleLine, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]} />
 					</View>
-					<PanGestureHandler enabled={loaded} onGestureEvent={onGestureEvent} activeOffsetX={[-ACTIVE_OFFSET_X, ACTIVE_OFFSET_X]}>
+					<GestureDetector gesture={panGesture}>
 						<Animated.View hitSlop={SEEK_HIT_SLOP} style={[styles.thumbSeek, { backgroundColor: thumbColor }, styleThumb]} />
-					</PanGestureHandler>
+					</GestureDetector>
 				</View>
 			</View>
 		</TouchableNativeFeedback>