diff --git a/src/screens/Messages/components/MessageInput.tsx b/src/screens/Messages/components/MessageInput.tsx index 85509211b1..2cec262342 100644 --- a/src/screens/Messages/components/MessageInput.tsx +++ b/src/screens/Messages/components/MessageInput.tsx @@ -127,7 +127,7 @@ export function MessageInput({ })) return ( - + {children} ({ - marginBottom: Math.max(keyboardHeight.get(), bottomOffset), - })) + const animatedListProps = useAnimatedProps( + () => + ({ + contentInset: { + top: 0, + bottom: Math.max(keyboardHeight.get(), inputAreaHeight), + left: 0, + right: 0, + }, + } satisfies Partial), + ) const animatedStickyViewStyle = useAnimatedStyle(() => ({ transform: [ @@ -423,9 +433,10 @@ export function MessagesList({ data={convoState.items} renderItem={renderItem} keyExtractor={keyExtractor} + animatedProps={animatedListProps} disableFullWindowScroll={true} + style={{backgroundColor: 'red'}} disableVirtualization={true} - style={animatedListStyle} // The extra two items account for the header and the footer components initialNumToRender={isNative ? 32 : 62} maxToRenderPerBatch={isWeb ? 32 : 62} @@ -452,24 +463,28 @@ export function MessagesList({ setInputAreaHeight(evt.nativeEvent.layout.height)}> - {convoState.status === ConvoStatus.Disabled ? ( - - ) : blocked ? ( - footer - ) : ( - <> - {isConvoActive(convoState) && - !convoState.isFetchingHistory && - convoState.items.length === 0 && } - setEmojiPickerState({isOpen: true, pos})}> - - - - )} + + {convoState.status === ConvoStatus.Disabled ? ( + + ) : blocked ? ( + footer + ) : ( + <> + {isConvoActive(convoState) && + !convoState.isFetchingHistory && + convoState.items.length === 0 && } + + setEmojiPickerState({isOpen: true, pos}) + }> + + + + )} + {isWeb && ( @@ -484,3 +499,22 @@ export function MessagesList({ ) } + +function BlurWrapper({children}: {children: React.ReactNode}) { + const t = useTheme() + if (isIOS) { + return ( + + {children} + + ) + } else { + return {children} + } +}