dep(react-native): Update to 0.77.2 (#16160)

* This is a huge update, mostly because we updated Gradle on the Android side, which includes a more strict bundle process for third party modules. On iOS, even though new architecture is disabled, we had to be explicit about it because of this react native update and because some updated dependencies have it enabled by default and are using turbo modules which are not available, YET, in our project.

react/features/app/components/App.native.tsx

@@ -2,7 +2,8 @@ import React, { ComponentType } from 'react';
 import { NativeModules, Platform, StyleSheet, View } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import SplashScreen from 'react-native-splash-screen';
+// @ts-ignore
+import { hideSplash } from 'react-native-splash-view';
 
 import BottomSheetContainer from '../../base/dialog/components/native/BottomSheetContainer';
 import DialogContainer from '../../base/dialog/components/native/DialogContainer';
@@ -84,7 +85,7 @@ export class App extends AbstractApp<IProps> {
     override async componentDidMount() {
         await super.componentDidMount();
 
-        SplashScreen.hide();
+        hideSplash();
 
         const liteTxt = AppInfo.isLiteSDK ? ' (lite)' : '';
 

react/features/base/ui/components/native/IconButton.tsx

@@ -58,7 +58,7 @@ const IconButton: React.FC<IIconButtonProps> = ({
             style = { [
                 iconButtonContainerStyles,
                 style
-            ] as ViewStyle }
+            ] as ViewStyle[] }
             underlayColor = { underlayColor }>
             <Icon
                 color = { color }

react/features/mobile/wake-lock/middleware.ts

@@ -1,4 +1,4 @@
-import KeepAwake from 'react-native-keep-awake';
+import { activateKeepAwake, deactivateKeepAwake } from '@sayem314/react-native-keep-awake';
 
 import { getCurrentConference } from '../../base/conference/functions';
 import StateListenerRegistry from '../../base/redux/StateListenerRegistry';
@@ -28,8 +28,8 @@ StateListenerRegistry.register(
  */
 function _setWakeLock(wakeLock: boolean) {
     if (wakeLock) {
-        KeepAwake.activate();
+        activateKeepAwake();
     } else {
-        KeepAwake.deactivate();
+        deactivateKeepAwake();
     }
 }

react/features/toolbox/components/native/CustomOptionButton.tsx

@@ -44,6 +44,7 @@ class CustomOptionButton extends AbstractButton<ICustomOptionButton> {
         if (this.iconSrc?.includes('svg')) {
             iconComponent = (
                 <SvgCssUri
+                    // @ts-ignore
                     height = { BaseTheme.spacing[4] }
                     uri = { this.iconSrc }
                     width = { BaseTheme.spacing[4] } />
@@ -62,7 +63,7 @@ class CustomOptionButton extends AbstractButton<ICustomOptionButton> {
             <View
                 style = { this.props.isToolboxButton && [
                     styles.toolboxButtonIconContainer,
-                    { backgroundColor: this.backgroundColor } ] as ViewStyle }>
+                    { backgroundColor: this.backgroundColor } ] as ViewStyle[] }>
                 { iconComponent }
             </View>
         );

react/features/welcome/components/WelcomePage.native.tsx

@@ -258,8 +258,8 @@ class WelcomePage extends AbstractWelcomePage<IProps> {
 
         if (this.state._fieldFocused) {
             return (
-                <Animated.View style = { this._getHintBoxStyle() as ViewStyle }>
-                    <View style = { styles.hintTextContainer } >
+                <Animated.View style = { this._getHintBoxStyle() as ViewStyle[] }>
+                    <View style = { styles.hintTextContainer as ViewStyle } >
                         <Text style = { styles.hintText as TextStyle }>
                             { t('welcomepage.roomnameHint') }
                         </Text>