Fix composer position for comments

packages/mobile/src/components/composer-input/ComposerInput.tsx

@@ -14,7 +14,7 @@ import type {
   TextInputSelectionChangeEventData
 } from 'react-native/types'
 
-import { Flex, IconSend } from '@audius/harmony-native'
+import { IconSend } from '@audius/harmony-native'
 import { Text, TextInput } from 'app/components/core'
 import { env } from 'app/env'
 import { audiusSdk } from 'app/services/sdk/audius-sdk'
@@ -93,8 +93,7 @@ export const ComposerInput = (props: ComposerInputProps) => {
     messageId,
     placeholder,
     presetMessage,
-    entityId,
-    extraOffset = 0
+    entityId
   } = props
   const [value, setValue] = useState(presetMessage ?? '')
   const [selection, setSelection] = useState<{ start: number; end: number }>()
@@ -262,26 +261,8 @@ export const ComposerInput = (props: ComposerInputProps) => {
     [getMatches, getTimestamps]
   )
 
-  // For iOS: default padding + extra padding
-  // For Android: extra padding is slightly larger than iOS, and only
-  // needed if the screen header size changes
-  const offset =
-    Platform.OS === 'ios'
-      ? spacing(1.5) + extraOffset
-      : Platform.OS === 'android'
-      ? extraOffset
-        ? spacing(1.5) + extraOffset
-        : undefined
-      : undefined
-
   return (
-    <Flex
-      style={{
-        position: 'relative',
-        // maxHeight: hasCurrentlyPlayingTrack ? spacing(70) : spacing(80),
-        paddingBottom: offset
-      }}
-    >
+    <>
       <TextInput
         placeholder={placeholder ?? messages.sendMessagePlaceholder}
         Icon={renderIcon}
@@ -313,6 +294,6 @@ export const ComposerInput = (props: ComposerInputProps) => {
       >
         <Text style={styles.overlayText}>{renderTextDisplay(value)}</Text>
       </View>
-    </Flex>
+    </>
   )
 }

packages/mobile/src/components/composer-input/types.ts

@@ -6,7 +6,6 @@ import type { TextInputProps } from '../core'
 
 export type ComposerInputProps = {
   messageId: number
-  extraOffset?: number // Additional padding needed if screen header size changes
   entityId?: ID
   entityType?: EntityType
   onChange?: (value: string, linkEntities: LinkEntity[]) => void

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

@@ -4,10 +4,12 @@ import type { ID } from '@audius/common/models'
 import { chatActions } from '@audius/common/store'
 import type { Nullable } from '@audius/common/utils'
 import { decodeHashId } from '@audius/common/utils'
+import { Platform } from 'react-native'
 import { useDispatch } from 'react-redux'
 
 import { Flex } from '@audius/harmony-native'
 import { ComposerInput } from 'app/components/composer-input'
+import { spacing } from 'app/styles/spacing'
 
 import { ComposerCollectionInfo, ComposerTrackInfo } from './ComposePreviewInfo'
 
@@ -59,21 +61,40 @@ export const ChatTextInput = ({
     }
   }, [chatId, dispatch, onMessageSent, value])
 
+  // For iOS: default padding + extra padding
+  // For Android: extra padding is slightly larger than iOS, and only
+  // needed if the screen header size changes
+  const offset =
+    Platform.OS === 'ios'
+      ? spacing(1.5) + extraOffset
+      : Platform.OS === 'android'
+      ? extraOffset
+        ? spacing(1.5) + extraOffset
+        : undefined
+      : undefined
+
   return (
     <Flex>
       {trackId ? (
         <ComposerTrackInfo trackId={trackId} />
       ) : collectionId ? (
         <ComposerCollectionInfo collectionId={collectionId} />
       ) : null}
-      <ComposerInput
-        extraOffset={extraOffset}
-        messageId={messageId}
-        presetMessage={presetMessage}
-        placeholder={messages.startNewMessage}
-        onChange={handleChange}
-        onSubmit={handleSubmit}
-      />
+
+      <Flex
+        style={{
+          position: 'relative',
+          paddingBottom: offset
+        }}
+      >
+        <ComposerInput
+          messageId={messageId}
+          presetMessage={presetMessage}
+          placeholder={messages.startNewMessage}
+          onChange={handleChange}
+          onSubmit={handleSubmit}
+        />
+      </Flex>
     </Flex>
   )
 }