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

packages/common/src/store/reducers.ts

@@ -81,6 +81,9 @@ import {
 import addToPlaylistReducer, {
   AddToPlaylistState
 } from './ui/add-to-playlist/reducer'
+import bottomTabBarReducer, {
+  BottomTabBarState
+} from './ui/bottom-tab-bar/slice'
 import buyAudioReducer from './ui/buy-audio/slice'
 import collectibleDetailsReducer, {
   CollectibleDetailsState
@@ -188,6 +191,7 @@ export const reducers = () => ({
     modals: modalsReducer,
     musicConfetti: musicConfettiReducer,
     nowPlaying: nowPlayingReducer,
+    bottomTabBar: bottomTabBarReducer,
     reactions: reactionsReducer,
     remixSettings: remixSettingsReducer,
     shareSoundToTikTokModal: shareSoundToTikTokModalReducer,
@@ -307,6 +311,7 @@ export type CommonState = {
     modals: ModalsState
     musicConfetti: MusicConfettiState
     nowPlaying: NowPlayingState
+    bottomTabBar: BottomTabBarState
     reactions: ReactionsState
     relatedArtists: RelatedArtistsState
     remixSettings: RemixSettingsState

packages/common/src/store/ui/bottom-tab-bar/selectors.ts

@@ -0,0 +1,4 @@
+import { CommonState } from 'store/commonStore'
+
+export const getBottomTabBarHeight = (state: CommonState) =>
+  state.ui.bottomTabBar.bottomTabBarHeight

packages/common/src/store/ui/bottom-tab-bar/slice.ts

@@ -0,0 +1,29 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+export type BottomTabBarState = {
+  bottomTabBarHeight: number
+}
+
+const initialState: BottomTabBarState = {
+  bottomTabBarHeight: 0
+}
+
+const slice = createSlice({
+  name: 'ui/bottom-tab-bar',
+  initialState,
+  reducers: {
+    setBottomTabBarHeight: (
+      state,
+      action: PayloadAction<{
+        height: number
+      }>
+    ) => {
+      const { height } = action.payload
+      state.bottomTabBarHeight = height
+    }
+  }
+})
+
+export const { setBottomTabBarHeight } = slice.actions
+export const actions = slice.actions
+export default slice.reducer

packages/common/src/store/ui/index.ts

@@ -131,3 +131,9 @@ export {
 } from './search-users-modal/slice'
 export * as searchUsersModalSelectors from './search-users-modal/selectors'
 export { default as searchUsersModalSagas } from './search-users-modal/sagas'
+
+export {
+  default as bottomTabBarUIReducer,
+  actions as bottomTabBarUIActions
+} from './bottom-tab-bar/slice'
+export * as bottomTabBarUISelectors from './bottom-tab-bar/selectors'

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 = 100,
   keyboardHidingDuration = 100,
   keyboardShowingOffset = 0,
@@ -50,20 +47,13 @@ export const KeyboardAvoidingView = ({
   const handleKeyboardWillShow = useCallback(
     (event) => {
       Animated.timing(keyboardHeight.current, {
-        toValue:
-          -event.endCoordinates.height * heightOffsetRatio +
-          keyboardShowingOffset,
+        toValue: -event.endCoordinates.height + keyboardShowingOffset,
         duration: keyboardShowingDuration,
         easing: Easing.inOut(Easing.quad),
         useNativeDriver: true
       }).start(onKeyboardShow)
     },
-    [
-      heightOffsetRatio,
-      keyboardShowingDuration,
-      keyboardShowingOffset,
-      onKeyboardShow
-    ]
+    [keyboardShowingDuration, keyboardShowingOffset, onKeyboardShow]
   )
 
   const handleKeyboardWillHide = useCallback(

packages/mobile/src/screens/app-screen/AppTabBar.tsx

@@ -1,29 +1,60 @@
-import { useRef } from 'react'
+import { useCallback, useRef } from 'react'
 
+import { bottomTabBarUIActions } from '@audius/common'
 import type { BottomTabBarProps } from '@react-navigation/bottom-tabs'
-import { Animated } from 'react-native'
+import { Animated, Dimensions, View } from 'react-native'
+import { useDispatch } from 'react-redux'
 
 import { BottomTabBar } from 'app/components/bottom-tab-bar'
 import { FULL_DRAWER_HEIGHT } from 'app/components/drawer'
 import { NowPlayingDrawer } from 'app/components/now-playing-drawer'
+import { makeStyles } from 'app/styles'
+
+const { setBottomTabBarHeight } = bottomTabBarUIActions
+
+const useStyles = makeStyles(({ palette }) => ({
+  bottomBarContainer: {
+    zIndex: 4,
+    elevation: 4
+  }
+}))
 
 type TabBarProps = BottomTabBarProps
 
+const screenHeight = Dimensions.get('screen').height
+
 export const AppTabBar = (props: TabBarProps) => {
   const { navigation, state } = props
+  const styles = useStyles()
+  const dispatch = useDispatch()
   // Set handlers for the NowPlayingDrawer and BottomTabBar
   // When the drawer is open, the bottom bar should hide (animated away).
   // When the drawer is closed, the bottom bar should reappear (animated in).
   const translationAnim = useRef(new Animated.Value(FULL_DRAWER_HEIGHT)).current
 
+  const viewRef = useRef<View | null>(null)
+  const handleOnLayout = useCallback(() => {
+    if (viewRef.current) {
+      viewRef.current.measure((x, y, width, height, pageX, pageY) => {
+        dispatch(setBottomTabBarHeight({ height: screenHeight - pageY }))
+      })
+    }
+  }, [dispatch])
+
   return (
     <>
       <NowPlayingDrawer translationAnim={translationAnim} />
-      <BottomTabBar
-        translationAnim={translationAnim}
-        navigation={navigation}
-        state={state}
-      />
+      <View
+        style={styles.bottomBarContainer}
+        onLayout={handleOnLayout}
+        ref={viewRef}
+      >
+        <BottomTabBar
+          translationAnim={translationAnim}
+          navigation={navigation}
+          state={state}
+        />
+      </View>
     </>
   )
 }

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

@@ -12,7 +12,8 @@ import {
   encodeUrlName,
   isEarliestUnread,
   playerSelectors,
-  useCanSendMessage
+  useCanSendMessage,
+  bottomTabBarUISelectors
 } from '@audius/common'
 import { Portal } from '@gorhom/portal'
 import { useFocusEffect } from '@react-navigation/native'
@@ -84,6 +85,7 @@ const {
 } = chatActions
 const { getUserId } = accountSelectors
 const { getHasTrack } = playerSelectors
+const { getBottomTabBarHeight } = bottomTabBarUISelectors
 
 const messages = {
   title: 'Messages',
@@ -238,6 +240,7 @@ export const ChatScreen = () => {
   )
   const { canSendMessage, firstOtherUser: otherUser } =
     useCanSendMessage(chatId)
+  const bottomTabBarHeight = useSelector(getBottomTabBarHeight)
 
   // A ref so that the unread separator doesn't disappear immediately when the chat is marked as read
   // Using a ref instead of state here to prevent unwanted flickers.
@@ -563,7 +566,9 @@ export const ChatScreen = () => {
         <View ref={chatContainerRef} onLayout={measureChatContainerTop}>
           <KeyboardAvoidingView
             keyboardShowingOffset={
-              hasCurrentlyPlayingTrack ? PLAY_BAR_HEIGHT : 0
+              hasCurrentlyPlayingTrack
+                ? PLAY_BAR_HEIGHT + bottomTabBarHeight
+                : bottomTabBarHeight
             }
             style={[
               styles.keyboardAvoiding,

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