diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx
index ba90dd14..fd8edaf2 100644
--- a/src/components/dms/MessageItem.tsx
+++ b/src/components/dms/MessageItem.tsx
@@ -32,6 +32,11 @@ export let MessageItem = ({
next.sender?.did === currentAccount?.did
const isLastInGroup = useMemo(() => {
+ // TODO this means it's a placeholder. Let's figure out the right way to do this though!
+ if (item.id.length > 13) {
+ return false
+ }
+
// if the next message is from a different sender, then it's the last in the group
if (isFromSelf ? !isNextFromSelf : isNextFromSelf) {
return true
diff --git a/src/screens/Messages/Conversation/MessageInput.tsx b/src/screens/Messages/Conversation/MessageInput.tsx
index e94a295e..d9360753 100644
--- a/src/screens/Messages/Conversation/MessageInput.tsx
+++ b/src/screens/Messages/Conversation/MessageInput.tsx
@@ -18,10 +18,10 @@ import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/ico
export function MessageInput({
onSendMessage,
- onFocus,
+ scrollToEnd,
}: {
onSendMessage: (message: string) => void
- onFocus?: () => void
+ scrollToEnd: () => void
}) {
const {_} = useLingui()
const t = useTheme()
@@ -54,8 +54,10 @@ export function MessageInput({
setMaxHeight(max)
setIsInputScrollable(availableSpace < 30)
+
+ scrollToEnd()
},
- [topInset],
+ [scrollToEnd, topInset],
)
return (
@@ -82,7 +84,7 @@ export function MessageInput({
keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
scrollEnabled={isInputScrollable}
blurOnSubmit={false}
- onFocus={onFocus}
+ onFocus={scrollToEnd}
onContentSizeChange={onInputLayout}
ref={inputRef}
/>
diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/Conversation/MessageInput.web.tsx
index fd13dd85..a2f255bd 100644
--- a/src/screens/Messages/Conversation/MessageInput.web.tsx
+++ b/src/screens/Messages/Conversation/MessageInput.web.tsx
@@ -11,7 +11,7 @@ export function MessageInput({
onSendMessage,
}: {
onSendMessage: (message: string) => void
- onFocus: () => void
+ scrollToEnd: () => void
}) {
const {_} = useLingui()
const t = useTheme()
diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx
index bc64d2b1..7a14979e 100644
--- a/src/screens/Messages/Conversation/MessagesList.tsx
+++ b/src/screens/Messages/Conversation/MessagesList.tsx
@@ -168,9 +168,11 @@ export function MessagesList() {
[contentHeight.value, hasInitiallyScrolled, isAtBottom],
)
- const onInputFocus = React.useCallback(() => {
- flatListRef.current?.scrollToEnd({animated: true})
- }, [flatListRef])
+ const scrollToEnd = React.useCallback(() => {
+ requestAnimationFrame(() =>
+ flatListRef.current?.scrollToEnd({animated: true}),
+ )
+ }, [])
const {bottom: bottomInset} = useSafeAreaInsets()
const {gtMobile} = useBreakpoints()
@@ -200,6 +202,7 @@ export function MessagesList() {
maintainVisibleContentPosition={{
minIndexForVisible: 1,
}}
+ contentContainerStyle={{paddingHorizontal: 10}}
removeClippedSubviews={false}
onContentSizeChange={onContentSizeChange}
onStartReached={onStartReached}
@@ -215,10 +218,7 @@ export function MessagesList() {
/>
-
+
)
}
diff --git a/src/state/messages/convo.ts b/src/state/messages/convo.ts
index a65e0c48..a68eddb7 100644
--- a/src/state/messages/convo.ts
+++ b/src/state/messages/convo.ts
@@ -786,7 +786,7 @@ export class Convo {
(ChatBskyConvoDefs.isMessageView(item.message) ||
ChatBskyConvoDefs.isDeletedMessageView(item.message))
) {
- const next = items[i - 1]
+ const next = items[i + 1]
if (
isConvoItemMessage(next) &&