chore: support for edge to edge screen in android

android/app/src/main/res/values/styles.xml

@@ -1,5 +1,5 @@
 <resources>
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <style name="AppTheme" parent="Theme.EdgeToEdge">
         <item name="android:colorEdgeEffect">#aaaaaa</item>
         <item name="colorPrimaryDark">@color/splashBackground</item>
         <item name="android:navigationBarColor">@color/splashBackground</item>

app/containers/StatusBar.tsx

@@ -1,27 +1,12 @@
 import React from 'react';
-import { StatusBar as StatusBarRN } from 'react-native';
+import { SystemBars } from "react-native-edge-to-edge";
 
 import { useTheme } from '../theme';
 
-const supportedStyles = {
-	'light-content': 'light-content',
-	'dark-content': 'dark-content'
-};
-
-interface IStatusBar {
-	barStyle?: keyof typeof supportedStyles;
-	backgroundColor?: string;
-}
-
-const StatusBar = ({ barStyle, backgroundColor }: IStatusBar) => {
-	const { theme, colors } = useTheme();
-	if (!barStyle) {
-		barStyle = 'light-content';
-		if (theme === 'light') {
-			barStyle = 'dark-content';
-		}
-	}
-	return <StatusBarRN backgroundColor={backgroundColor ?? colors.surfaceNeutral} barStyle={barStyle} animated />;
+const StatusBar = () => {
+	const { theme } = useTheme();
+
+	return <SystemBars style={theme === 'light' ? 'dark' : 'light'} />
 };
 
 export default StatusBar;

app/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Dimensions, EmitterSubscription, Linking } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
+import { SafeAreaProvider, initialWindowMetrics, SafeAreaView } from 'react-native-safe-area-context';
 import RNScreens from 'react-native-screens';
 import { Provider } from 'react-redux';
 
@@ -24,7 +24,6 @@ import {
 	getTheme,
 	initialTheme,
 	newThemeState,
-	setNativeTheme,
 	subscribeTheme,
 	unsubscribeTheme
 } from './lib/methods/helpers/theme';
@@ -35,6 +34,7 @@ import { initStore } from './lib/store/auxStore';
 import { TSupportedThemes, ThemeContext } from './theme';
 import ChangePasscodeView from './views/ChangePasscodeView';
 import ScreenLockedView from './views/ScreenLockedView';
+import { KeyboardAvoidingView, KeyboardProvider } from "react-native-keyboard-controller";
 
 RNScreens.enableScreens();
 initStore(store);
@@ -101,7 +101,6 @@ export default class Root extends React.Component<{}, IState> {
 		if (isTablet) {
 			this.initTablet();
 		}
-		setNativeTheme(theme);
 	}
 
 	componentDidMount() {
@@ -204,36 +203,42 @@ export default class Root extends React.Component<{}, IState> {
 		const { themePreferences, theme, width, height, scale, fontScale } = this.state;
 		return (
 			<SafeAreaProvider initialMetrics={initialWindowMetrics} style={{ backgroundColor: themes[this.state.theme].surfaceRoom }}>
-				<Provider store={store}>
-					<ThemeContext.Provider
-						value={{
-							theme,
-							themePreferences,
-							setTheme: this.setTheme,
-							colors: colors[theme]
-						}}>
-						<DimensionsContext.Provider
-							value={{
-								width,
-								height,
-								scale,
-								fontScale,
-								setDimensions: this.setDimensions
-							}}>
-							<GestureHandlerRootView>
-								<ActionSheetProvider>
-									<AppContainer />
-									<TwoFactor />
-									<ScreenLockedView />
-									<ChangePasscodeView />
-									<InAppNotification />
-									<Toast />
-									<Loading />
-								</ActionSheetProvider>
-							</GestureHandlerRootView>
-						</DimensionsContext.Provider>
-					</ThemeContext.Provider>
-				</Provider>
+				<SafeAreaView style={{ flex: 1 }} edges={['right', 'left']}>
+					<KeyboardProvider>
+						<Provider store={store}>
+							<KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
+								<ThemeContext.Provider
+									value={{
+										theme,
+										themePreferences,
+										setTheme: this.setTheme,
+										colors: colors[theme]
+									}}>
+									<DimensionsContext.Provider
+										value={{
+											width,
+											height,
+											scale,
+											fontScale,
+											setDimensions: this.setDimensions
+										}}>
+										<GestureHandlerRootView>
+												<ActionSheetProvider>
+													<AppContainer />
+													<TwoFactor />
+													<ScreenLockedView />
+													<ChangePasscodeView />
+													<InAppNotification />
+													<Toast />
+													<Loading />
+												</ActionSheetProvider>
+										</GestureHandlerRootView>
+									</DimensionsContext.Provider>
+								</ThemeContext.Provider>
+							</KeyboardAvoidingView>
+						</Provider>
+					</KeyboardProvider>
+				</SafeAreaView>
 			</SafeAreaProvider>
 		);
 	}

app/lib/methods/helpers/theme.ts

@@ -53,7 +53,7 @@ export const setNativeTheme = async (themePreferences: IThemePreference): Promis
 		const iconsLight = theme === 'light';
 		try {
 			// The late param as default is true @ react-native-navigation-bar-color/src/index.js line 8
-			await changeNavigationBarColor(themes[theme].surfaceLight, iconsLight, true);
+			//await changeNavigationBarColor(themes[theme].surfaceLight, iconsLight, true);
 		} catch (error) {
 			// Do nothing
 		}
@@ -77,6 +77,4 @@ export const subscribeTheme = (themePreferences: IThemePreference, setTheme: ()
 		// unsubscribe appearance changes when automatic was disabled
 		unsubscribeTheme();
 	}
-	// set native components theme
-	setNativeTheme(themePreferences);
 };

app/views/RoomView/definitions.ts

@@ -61,4 +61,5 @@ export interface IRoomViewState {
 	roomUserId?: string | null;
 	action: TMessageAction;
 	selectedMessages: string[];
+	keyboardVisible: boolean;
 }

app/views/RoomView/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InteractionManager, Text, View } from 'react-native';
+import { InteractionManager, Keyboard, Text, View } from 'react-native';
 import { connect } from 'react-redux';
 import parse from 'url-parse';
 import moment from 'moment';
@@ -178,7 +178,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 			canReturnQueue: false,
 			canPlaceLivechatOnHold: false,
 			isOnHold: false,
-			rightButtonsWidth: 0
+			rightButtonsWidth: 0,
+			keyboardVisible: false
 		};
 
 		this.setHeader();
@@ -245,6 +246,14 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		this.unsubscribeBlur = navigation.addListener('blur', () => {
 			AudioManager.pauseAudio();
 		});
+
+		Keyboard.addListener('keyboardDidShow', () => {
+			this.setState({ keyboardVisible: true });
+		});
+
+		Keyboard.addListener('keyboardDidHide', () => {
+			this.setState({ keyboardVisible: false });
+		})
 	}
 
 	shouldComponentUpdate(nextProps: IRoomViewProps, nextState: IRoomViewState) {
@@ -266,6 +275,9 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		if (isOnHold !== nextState.isOnHold) {
 			return true;
 		}
+		if(state.keyboardVisible !== nextState.keyboardVisible) {
+			return true;
+		}
 		const stateUpdated = stateAttrsUpdate.some(key => nextState[key] !== state[key]);
 		if (stateUpdated) {
 			return true;
@@ -359,6 +371,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		if (!this.tmid) {
 			await AudioManager.unloadRoomAudios(this.rid);
 		}
+		Keyboard.removeAllListeners('keyboardDidShow');
+		Keyboard.removeAllListeners('keyboardDidHide');
 	}
 
 	canForwardGuest = async () => {
@@ -1528,7 +1542,9 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 						showMessageInMainThread={user.showMessageInMainThread ?? false}
 						serverVersion={serverVersion}
 					/>
-					{this.renderFooter()}
+					<View style={{ paddingBottom: this.state.keyboardVisible ? 0 : this.props.insets.bottom, backgroundColor: themes[theme].surfaceLight }}>
+						{this.renderFooter()}
+					</View>
 					{this.renderActions()}
 					<UploadProgress rid={rid} user={user} baseUrl={baseUrl} width={width} />
 					<JoinCode ref={this.joinCode} onJoin={this.onJoin} rid={rid} t={t} theme={theme} />

package.json

@@ -94,12 +94,14 @@
 		"react-native-device-info": "^11.1.0",
 		"react-native-easy-grid": "0.2.2",
 		"react-native-easy-toast": "2.3.0",
+		"react-native-edge-to-edge": "^1.1.3",
 		"react-native-fast-image": "RocketChat/react-native-fast-image.git#bump-version",
 		"react-native-file-viewer": "2.1.4",
 		"react-native-gesture-handler": "^2.16.0",
 		"react-native-image-crop-picker": "RocketChat/react-native-image-crop-picker#54e1e1c7e7d4b731c74ce9dd1bf9eb5148065092",
 		"react-native-image-progress": "1.1.1",
 		"react-native-katex": "0.5.1",
+		"react-native-keyboard-controller": "^1.14.5",
 		"react-native-keychain": "^8.2.0",
 		"react-native-linear-gradient": "2.6.2",
 		"react-native-localize": "2.1.1",

yarn.lock

@@ -11950,6 +11950,11 @@ [email protected]:
     deprecated-react-native-prop-types "^2.3.0"
     prop-types "^15.6.0"
 
+react-native-edge-to-edge@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/react-native-edge-to-edge/-/react-native-edge-to-edge-1.1.3.tgz#bcfc5142da5556766de7ac8371fba94d0bc72e07"
+  integrity sha512-+as8PmGZCvZtHbHT2xXH0YFH1qqBpFVH14Pzk0+6fI53zWMa56m5HY9S1mhIBgPjdqLBM8Y6KresI1/MUI86pw==
+
 react-native-fast-image@RocketChat/react-native-fast-image.git#bump-version:
   version "8.5.12"
   resolved "https://codeload.github.com/RocketChat/react-native-fast-image/tar.gz/8bdb187a4500e23ad1c95324a669c25361bbf685"
@@ -11991,13 +11996,25 @@ react-native-iphone-x-helper@^1.0.3:
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
   integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
 
+react-native-is-edge-to-edge@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.1.6.tgz#69ec13f70d76e9245e275eed4140d0873a78f902"
+  integrity sha512-1pHnFTlBahins6UAajXUqeCOHew9l9C2C8tErnpGC3IyLJzvxD+TpYAixnCbrVS52f7+NvMttbiSI290XfwN0w==
+
 [email protected]:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/react-native-katex/-/react-native-katex-0.5.1.tgz#516428ddc10b71e2f219869880222b1d3a1fc5eb"
   integrity sha512-71Hi66DsTsCHnxKcT0BtmylJvl8q285qbmSPJRzLM05Lu4qtgNwx2htb+k+nNaFv0KJl67n/irdd3uktpkXPsg==
   dependencies:
     react-native-webview "^11.18.2"
 
+react-native-keyboard-controller@^1.14.5:
+  version "1.14.5"
+  resolved "https://registry.yarnpkg.com/react-native-keyboard-controller/-/react-native-keyboard-controller-1.14.5.tgz#ec1e7d1fb8ee18b69ced4d8ddd6fd99bdaaf14bb"
+  integrity sha512-Cx7+SWI/P50i4PKJZN4T43RqoFkJ3GBoxjQ5ysrzZGoImHTF4j3atSwcBQGMmunKCem1yGOOQ84or+Vbcor6wQ==
+  dependencies:
+    react-native-is-edge-to-edge "^1.1.6"
+
 react-native-keychain@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/react-native-keychain/-/react-native-keychain-8.2.0.tgz#aea82df37aacbb04f8b567a8e0e6d7292025610a"