[PAY-1319] Fix emoji keyboard overlapping chat text input (#3629)

packages/mobile/src/components/core/KeyboardAvoidingView.tsx

@@ -15,7 +15,6 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
 
 type KeyboardAvoidingViewProps = {
   style: StyleProp<ViewStyle>
-  heightOffsetRatio?: number
   keyboardShowingDuration?: number
   keyboardHidingDuration?: number
   // Offset is subtracted from the desired height when the keyboard is showing.
@@ -35,8 +34,6 @@ type KeyboardAvoidingViewProps = {
  */
 export const KeyboardAvoidingView = ({
   style,
-  // 0.75 seems to work well but need to test on more screen sizes.
-  heightOffsetRatio = 0.75,
   keyboardShowingDuration = 350,
   keyboardHidingDuration = 250,
   keyboardShowingOffset = 0,
@@ -50,21 +47,14 @@ export const KeyboardAvoidingView = ({
   const handleKeyboardWillShow = useCallback(
     (event) => {
       Animated.timing(keyboardHeight.current, {
-        toValue:
-          -event.endCoordinates.height * heightOffsetRatio +
-          keyboardShowingOffset,
+        toValue: -event.endCoordinates.height + keyboardShowingOffset,
         duration: keyboardShowingDuration,
         // Ease out to start animation fast and settle slowly
         easing: Easing.out(Easing.cubic),
         useNativeDriver: true
       }).start(onKeyboardShow)
     },
-    [
-      heightOffsetRatio,
-      keyboardShowingDuration,
-      keyboardShowingOffset,
-      onKeyboardShow
-    ]
+    [keyboardShowingDuration, keyboardShowingOffset, onKeyboardShow]
   )
 
   const handleKeyboardWillHide = useCallback(

packages/mobile/src/screens/chat-screen/ChatScreen.tsx

@@ -15,6 +15,7 @@ import {
   useCanSendMessage
 } from '@audius/common'
 import { Portal } from '@gorhom/portal'
+import { useKeyboard } from '@react-native-community/hooks'
 import { useFocusEffect } from '@react-navigation/native'
 import type { FlatListProps, LayoutChangeEvent } from 'react-native'
 import {
@@ -25,10 +26,12 @@ import {
   TouchableOpacity,
   View
 } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useDispatch, useSelector } from 'react-redux'
 
 import IconKebabHorizontal from 'app/assets/images/iconKebabHorizontal.svg'
 import IconMessage from 'app/assets/images/iconMessage.svg'
+import { BOTTOM_BAR_HEIGHT } from 'app/components/bottom-tab-bar'
 import {
   KeyboardAvoidingView,
   Screen,
@@ -215,6 +218,8 @@ export const ChatScreen = () => {
   const scrollPosition = useRef(0)
   const latestMessageId = useRef('')
   const flatListInnerHeight = useRef(0)
+  const { keyboardShown } = useKeyboard()
+  const insets = useSafeAreaInsets()
 
   const hasCurrentlyPlayingTrack = useSelector(getHasTrack)
   const userId = useSelector(getUserId)
@@ -516,6 +521,21 @@ export const ChatScreen = () => {
     }, 0)
   }, [flatListRef])
 
+  // For some reason the bottom padding behavior is different between the platforms.
+  const getKeyboardAvoidingPlaybarAwareStyle = useCallback(() => {
+    const style = {
+      paddingTop: hasCurrentlyPlayingTrack ? PLAY_BAR_HEIGHT : 0,
+      bottom: 0
+    }
+    if (Platform.OS === 'ios') {
+      style.bottom = hasCurrentlyPlayingTrack ? PLAY_BAR_HEIGHT : 0
+    } else if (Platform.OS === 'android') {
+      style.bottom =
+        hasCurrentlyPlayingTrack && !keyboardShown ? PLAY_BAR_HEIGHT : 0
+    }
+    return style
+  }, [hasCurrentlyPlayingTrack, keyboardShown])
+
   return (
     <Screen
       url={url}
@@ -563,13 +583,13 @@ export const ChatScreen = () => {
         <View ref={chatContainerRef} onLayout={measureChatContainerTop}>
           <KeyboardAvoidingView
             keyboardShowingOffset={
-              hasCurrentlyPlayingTrack ? PLAY_BAR_HEIGHT : 0
+              hasCurrentlyPlayingTrack
+                ? PLAY_BAR_HEIGHT + BOTTOM_BAR_HEIGHT + insets.bottom
+                : BOTTOM_BAR_HEIGHT + insets.bottom
             }
             style={[
               styles.keyboardAvoiding,
-              hasCurrentlyPlayingTrack
-                ? { bottom: PLAY_BAR_HEIGHT, paddingTop: PLAY_BAR_HEIGHT }
-                : null
+              getKeyboardAvoidingPlaybarAwareStyle()
             ]}
             onKeyboardHide={measureChatContainerBottom}
           >