fix: android keyboard issue

Signed-off-by: Sakul <sakulbudhathoki977@gmail.com>

js/android/app/src/main/AndroidManifest.xml

@@ -37,7 +37,7 @@
         android:launchMode="singleTask"
         android:exported="true"
         android:screenOrientation="portrait"
-        android:windowSoftInputMode="adjustResize">
+        android:windowSoftInputMode="adjustPan">
         <intent-filter>
             <action android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.DEFAULT" />

js/global.d.ts

@@ -10,6 +10,7 @@ declare module 'react-native-audiowaveform'
 declare module 'linkify-it'
 declare module 'react-native-flags'
 declare module 'react-native-emoji-board'
+declare module 'react-native-android-keyboard-adjust'
 
 declare module 'google-palette' {
 	const content: (type: string, count: number) => string[]

js/packages/components/chat/MultiMember.tsx

@@ -25,6 +25,8 @@ import { MultiMemberAvatar } from '../avatars'
 import { MessageList } from '@berty-tech/components/chat/MessageList'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ReplyReactionProvider } from './ReplyReactionContext'
+import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust'
+import { useFocusEffect } from '@react-navigation/native'
 
 //
 // MultiMember
@@ -129,6 +131,13 @@ export const MultiMember: React.FC<ScreenProps.Chat.Group> = ({ route: { params
 
 	const [isSwipe, setSwipe] = useState(true)
 
+	useFocusEffect(
+		React.useCallback(() => {
+			AndroidKeyboardAdjust?.setAdjustResize()
+			return () => AndroidKeyboardAdjust?.setAdjustPan()
+		}, []),
+	)
+
 	return (
 		<ReplyReactionProvider>
 			{({ activeEmojiKeyboardCid, setActiveEmojiKeyboardCid, setActivePopoverCid }) => (
@@ -147,6 +156,7 @@ export const MultiMember: React.FC<ScreenProps.Chat.Group> = ({ route: { params
 						<KeyboardAvoidingView
 							style={[flex.tiny]}
 							behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+							bottomFixedViewPadding={20}
 						>
 							<MessageList id={params?.convId} {...{ setStickyDate, setShowStickyDate }} />
 							<ChatFooter

js/packages/components/chat/OneToOne.tsx

@@ -25,6 +25,8 @@ import { ChatDate, ChatFooter } from './common'
 import { SwipeNavRecognizer } from '../shared-components/SwipeNavRecognizer'
 import { MessageList } from '@berty-tech/components/chat/MessageList'
 import { ReplyReactionProvider } from './ReplyReactionContext'
+import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust'
+import { useFocusEffect } from '@react-navigation/native'
 
 //
 // Chat
@@ -153,6 +155,13 @@ export const OneToOne: React.FC<ScreenProps.Chat.OneToOne> = ({ route: { params
 	const [showStickyDate, setShowStickyDate] = useState(false)
 	const [isSwipe, setSwipe] = useState(true)
 
+	useFocusEffect(
+		React.useCallback(() => {
+			AndroidKeyboardAdjust?.setAdjustResize()
+			return () => AndroidKeyboardAdjust?.setAdjustPan()
+		}, []),
+	)
+
 	return (
 		<ReplyReactionProvider>
 			{({ activeEmojiKeyboardCid, setActiveEmojiKeyboardCid, setActivePopoverCid }) => (
@@ -171,6 +180,7 @@ export const OneToOne: React.FC<ScreenProps.Chat.OneToOne> = ({ route: { params
 						<KeyboardAvoidingView
 							behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
 							style={[flex.tiny, { justifyContent: 'flex-start' }]}
+							bottomFixedViewPadding={20}
 						>
 							<MessageList
 								id={params?.convId}

js/packages/components/shared-components/KeyboardAvoidingView.tsx

@@ -1,18 +1,48 @@
-import React from 'react'
-import { KeyboardAvoidingView as KeyboardAvoiding, KeyboardAvoidingViewProps } from 'react-native'
-// import { useSafeAreaInsets } from 'react-native-safe-area-context'
-// import { useMusicPlayer } from '@berty-tech/music-player'
-// import { HEIGHT_OF_PLAYER, MARGIN_FIX } from './StickyMusicPlayer'
-export const KeyboardAvoidingView: React.FC<KeyboardAvoidingViewProps> = (props) => {
-	// const { top } = useSafeAreaInsets()
-	// const {
-	// 	player: { player },
-	// } = useMusicPlayer()
-
-	return (
-		<KeyboardAvoiding
-			{...props}
-			// keyboardVerticalOffset={player ? HEIGHT_OF_PLAYER - top + MARGIN_FIX : 0}
-		/>
-	)
+import React, { useState } from 'react'
+import {
+	KeyboardAvoidingView as KeyboardAvoiding,
+	KeyboardAvoidingViewProps,
+	Platform,
+	StatusBar,
+} from 'react-native'
+
+import { useMusicPlayer } from '@berty-tech/music-player'
+import { HEIGHT_OF_PLAYER } from './StickyMusicPlayer'
+
+interface CustomKeyboardAvoidingViewProps extends KeyboardAvoidingViewProps {
+	bottomFixedViewPadding?: number
+}
+
+export const KeyboardAvoidingView: React.FC<CustomKeyboardAvoidingViewProps> = ({
+	bottomFixedViewPadding = 0,
+	...props
+}) => {
+	const {
+		player: { player },
+	} = useMusicPlayer()
+
+	const [initialMode] = useState(!!player)
+
+	const defaultAndroidStatusBarHeight = 24
+	let offset = Platform.OS === 'android' ? bottomFixedViewPadding : 0
+
+	if (
+		Platform.OS === 'android' &&
+		StatusBar.currentHeight &&
+		StatusBar.currentHeight > defaultAndroidStatusBarHeight
+	) {
+		offset += StatusBar.currentHeight - defaultAndroidStatusBarHeight
+	}
+
+	if (Platform.OS === 'android' && initialMode !== !!player) {
+		if (player) {
+			offset += HEIGHT_OF_PLAYER * 2
+		} else {
+			offset -= HEIGHT_OF_PLAYER
+		}
+	} else if (player) {
+		offset += HEIGHT_OF_PLAYER
+	}
+
+	return <KeyboardAvoiding {...props} keyboardVerticalOffset={offset} />
 }

js/packages/components/shared-components/StickyMusicPlayer.tsx

@@ -6,7 +6,6 @@ import { useMusicPlayer } from '@berty-tech/music-player'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export const HEIGHT_OF_PLAYER = 60
-export const MARGIN_FIX = 10
 
 export const StickMusicPlayer = () => {
 	const [{ border, padding, margin }, { windowWidth, scaleSize }] = useStyles()
@@ -52,8 +51,8 @@ export const StickMusicPlayer = () => {
 					justifyContent: 'center',
 					width: '100%',
 					position: 'relative',
-					marginBottom: -top + MARGIN_FIX,
-					marginTop: (top + 10) * scaleSize,
+					marginBottom: -top,
+					marginTop: top,
 					zIndex: 9,
 					backgroundColor: '#4F58C0',
 					height: HEIGHT_OF_PLAYER,