diff --git a/js/android/app/src/main/AndroidManifest.xml b/js/android/app/src/main/AndroidManifest.xml index 47f4f44689..71e760b7c0 100644 --- a/js/android/app/src/main/AndroidManifest.xml +++ b/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"> diff --git a/js/global.d.ts b/js/global.d.ts index 8e4eb4f36e..68becaba81 100644 --- a/js/global.d.ts +++ b/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[] diff --git a/js/package.json b/js/package.json index 92162c3113..15050834c6 100644 --- a/js/package.json +++ b/js/package.json @@ -42,6 +42,7 @@ "react": "16.13.1", "react-i18next": "^11.8.6", "react-native": "0.63.4", + "react-native-android-keyboard-adjust": "^1.2.0", "react-native-audiowaveform": "^2.0.5", "react-native-bootsplash": "^3.1.2", "react-native-camera": "^3.42.0", diff --git a/js/packages/components/chat/MultiMember.tsx b/js/packages/components/chat/MultiMember.tsx index 37f1335ccf..c8a490e6c1 100644 --- a/js/packages/components/chat/MultiMember.tsx +++ b/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 = ({ route: { params const [isSwipe, setSwipe] = useState(true) + useFocusEffect( + React.useCallback(() => { + AndroidKeyboardAdjust?.setAdjustResize() + return () => AndroidKeyboardAdjust?.setAdjustPan() + }, []), + ) + return ( {({ activeEmojiKeyboardCid, setActiveEmojiKeyboardCid, setActivePopoverCid }) => ( @@ -147,6 +156,7 @@ export const MultiMember: React.FC = ({ route: { params = ({ route: { params const [showStickyDate, setShowStickyDate] = useState(false) const [isSwipe, setSwipe] = useState(true) + useFocusEffect( + React.useCallback(() => { + AndroidKeyboardAdjust?.setAdjustResize() + return () => AndroidKeyboardAdjust?.setAdjustPan() + }, []), + ) + return ( {({ activeEmojiKeyboardCid, setActiveEmojiKeyboardCid, setActivePopoverCid }) => ( @@ -171,6 +180,7 @@ export const OneToOne: React.FC = ({ route: { params = (props) => { - // const { top } = useSafeAreaInsets() - // const { - // player: { player }, - // } = useMusicPlayer() - - return ( - - ) +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 = ({ + 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 } diff --git a/js/packages/components/shared-components/StickyMusicPlayer.tsx b/js/packages/components/shared-components/StickyMusicPlayer.tsx index 965a929434..0bfd93e27c 100644 --- a/js/packages/components/shared-components/StickyMusicPlayer.tsx +++ b/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, diff --git a/js/yarn.lock b/js/yarn.lock index 87f2c84f0e..54d7cd50b7 100644 --- a/js/yarn.lock +++ b/js/yarn.lock @@ -8243,6 +8243,11 @@ react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339" integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA== +react-native-android-keyboard-adjust@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/react-native-android-keyboard-adjust/-/react-native-android-keyboard-adjust-1.2.0.tgz#7988b1258482c08548ce972401b2ae03a674fcb4" + integrity sha512-Q280bmf0zXnzLbHU9DcVoKZSKihd0s3hltz2kIUCJ5Q9EhLVR/pjgZ3Bwd1VgrHxQPnduHXdCp0432msklRMow== + react-native-audiowaveform@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/react-native-audiowaveform/-/react-native-audiowaveform-2.0.5.tgz#fb60fe92a81433d5394c770c1bebd81f0092420d"