fix: empty space android (#6715)

Author: diegolmello

app/containers/MessageComposer/hooks/useEmojiKeyboard.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, ReactElement, useContext, useState } from 'react';
+import { Platform } from 'react-native';
 import { useKeyboardHandler } from 'react-native-keyboard-controller';
 import { runOnJS, SharedValue, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -77,8 +78,9 @@ export const useEmojiKeyboard = () => {
 
 	const { bottom } = useSafeAreaInsets();
 	const { height } = useKeyboardAnimation();
-	const keyboardHeight = useSharedValue(bottom);
-	const previousHeight = useSharedValue(bottom);
+	const initialHeight = Platform.OS === 'ios' ? bottom : 0;
+	const keyboardHeight = useSharedValue(initialHeight);
+	const previousHeight = useSharedValue(initialHeight);
 
 	const updateHeight = (force: boolean = false) => {
 		'worklet';
@@ -90,7 +92,9 @@ export const useEmojiKeyboard = () => {
 		) {
 			return;
 		}
-		const notch = height.value > 0 ? 0 : bottom;
+		// On iOS, keyboard controller doesn't include bottom inset, so we add it when keyboard is closed
+		// On Android, keyboard controller already includes it, so we don't add it
+		const notch = Platform.OS === 'ios' && height.value === 0 ? bottom : 0;
 		keyboardHeight.value = height.value + notch;
 		previousHeight.value = keyboardHeight.value;
 	};

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 } from 'react-native-safe-area-context';
 import { enableScreens } from 'react-native-screens';
 import { Provider } from 'react-redux';
 import { KeyboardProvider } from 'react-native-keyboard-controller';
@@ -208,7 +208,7 @@ export default class Root extends React.Component<{}, IState> {
 	render() {
 		const { themePreferences, theme, width, height, scale, fontScale } = this.state;
 		return (
-			<SafeAreaProvider initialMetrics={initialWindowMetrics} style={{ backgroundColor: themes[this.state.theme].surfaceRoom }}>
+			<SafeAreaProvider style={{ backgroundColor: themes[this.state.theme].surfaceRoom }}>
 				<Provider store={store}>
 					<ThemeContext.Provider
 						value={{