diff --git a/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx b/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx index 8493b132652..d6c7c73283f 100644 --- a/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx +++ b/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx @@ -1,9 +1,9 @@ import { useCallback, useState } from 'react' -import { chatActions } from '@audius/common' +import { chatActions, playerSelectors } from '@audius/common' import { Platform } from 'react-native' import { TouchableWithoutFeedback } from 'react-native-gesture-handler' -import { useDispatch } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import IconSend from 'app/assets/images/iconSend.svg' import { TextInput } from 'app/components/core' @@ -11,6 +11,7 @@ import { makeStyles } from 'app/styles' import { spacing } from 'app/styles/spacing' const { sendMessage } = chatActions +const { getHasTrack } = playerSelectors const ICON_BLUR = 0.5 const ICON_FOCUS = 1 @@ -22,7 +23,7 @@ const messages = { const useStyles = makeStyles(({ spacing, palette, typography }) => ({ composeTextContainer: { display: 'flex', - alignItems: 'center', + alignItems: 'flex-end', backgroundColor: palette.neutralLight10, paddingLeft: spacing(4), borderRadius: spacing(1) @@ -48,6 +49,7 @@ export const ChatTextInput = ({ chatId }: ChatTextInputProps) => { const dispatch = useDispatch() const [inputMessage, setInputMessage] = useState('') + const hasCurrentlyPlayingTrack = useSelector(getHasTrack) const handleSubmit = useCallback( (message) => { @@ -76,7 +78,8 @@ export const ChatTextInput = ({ chatId }: ChatTextInputProps) => { root: styles.composeTextContainer, input: [ styles.composeTextInput, - Platform.OS === 'ios' ? { paddingBottom: spacing(1) } : null + Platform.OS === 'ios' ? { paddingBottom: spacing(1) } : null, + { maxHeight: hasCurrentlyPlayingTrack ? spacing(70) : spacing(80) } ] }} onChangeText={(text) => {