[PAY-1319] Fix emoji keyboard overlapping chat text input

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

@@ -14,7 +14,9 @@ import {
   playerSelectors,
   useCanSendMessage
 } from '@audius/common'
+import { PLAY } from '@audius/common/dist/store/lineup/actions'
 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 {
@@ -57,6 +59,7 @@ import { EmptyChatMessages } from './EmptyChatMessages'
 import { HeaderShadow } from './HeaderShadow'
 import { ReactionPopup } from './ReactionPopup'
 import {
+  BOTTOM_BAR_HEIGHT,
   END_REACHED_MIN_MESSAGES,
   NEW_MESSAGE_TOAST_SCROLL_THRESHOLD,
   SCROLL_TO_BOTTOM_THRESHOLD
@@ -215,6 +218,7 @@ export const ChatScreen = () => {
   const scrollPosition = useRef(0)
   const latestMessageId = useRef('')
   const flatListInnerHeight = useRef(0)
+  const { keyboardShown } = useKeyboard()
 
   const hasCurrentlyPlayingTrack = useSelector(getHasTrack)
   const userId = useSelector(getUserId)
@@ -516,6 +520,19 @@ export const ChatScreen = () => {
     }, 0)
   }, [flatListRef])
 
+  // For some reason the bottom padding behavior is different between the platforms.
+  const getPlaybarAvoidingBottomPadding = useCallback(() => {
+    if (Platform.OS === 'ios') {
+      return hasCurrentlyPlayingTrack ? PLAY_BAR_HEIGHT : 0
+    } else if (Platform.OS === 'android') {
+      return hasCurrentlyPlayingTrack && !keyboardShown ? PLAY_BAR_HEIGHT : 0
+    }
+  }, [hasCurrentlyPlayingTrack, keyboardShown])
+
+  console.log(
+    `REED keyboardShown: ${keyboardShown} hasCurrentlyPlayingTrack: ${hasCurrentlyPlayingTrack}`
+  )
+
   return (
     <Screen
       url={url}
@@ -563,13 +580,15 @@ export const ChatScreen = () => {
         <View ref={chatContainerRef} onLayout={measureChatContainerTop}>
           <KeyboardAvoidingView
             keyboardShowingOffset={
-              hasCurrentlyPlayingTrack ? PLAY_BAR_HEIGHT : 0
+              hasCurrentlyPlayingTrack
+                ? PLAY_BAR_HEIGHT + BOTTOM_BAR_HEIGHT
+                : BOTTOM_BAR_HEIGHT
             }
             style={[
               styles.keyboardAvoiding,
-              hasCurrentlyPlayingTrack
-                ? { bottom: PLAY_BAR_HEIGHT, paddingTop: PLAY_BAR_HEIGHT }
-                : null
+              {
+                bottom: getPlaybarAvoidingBottomPadding()
+              }
             ]}
             onKeyboardHide={measureChatContainerBottom}
           >

packages/mobile/src/screens/chat-screen/constants.ts

@@ -8,3 +8,4 @@ export const UNMOUNT_ANIMATION_DURATION_MS = 100
 export const END_REACHED_MIN_MESSAGES = 10
 export const NEW_MESSAGE_TOAST_SCROLL_THRESHOLD = 100
 export const SCROLL_TO_BOTTOM_THRESHOLD = 20
+export const BOTTOM_BAR_HEIGHT = 82