fix: Auto-scroll to last message on app start + new messages

- useEffect on messages array instead of onContentSizeChange
- Instant jump (no animation) when loading history
- Animated scroll for single new messages
- Scroll pauses when user scrolls up, resumes at bottom

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
duffyduck 2026-04-11 11:37:30 +02:00
parent 6363da97b1
commit ffcfa44eef
1 changed files with 13 additions and 7 deletions

View File

@ -361,18 +361,25 @@ const ChatScreen: React.FC = () => {
return () => { if (saveTimer.current) clearTimeout(saveTimer.current); };
}, [messages]);
// Auto-Scroll wird ueber onContentSizeChange der FlatList gesteuert
// Auto-Scroll: immer zur letzten Nachricht springen
const shouldAutoScroll = useRef(true);
const handleContentSizeChange = useCallback(() => {
if (shouldAutoScroll.current) {
flatListRef.current?.scrollToEnd({ animated: false });
const lastMessageCount = useRef(0);
// Bei neuen Nachrichten: sofort nach unten
useEffect(() => {
if (messages.length > lastMessageCount.current && shouldAutoScroll.current) {
// Kurzer Delay damit FlatList rendern kann
setTimeout(() => {
flatListRef.current?.scrollToEnd({ animated: messages.length > lastMessageCount.current + 1 ? false : true });
}, 150);
}
}, []);
lastMessageCount.current = messages.length;
}, [messages]);
const handleScrollBeginDrag = useCallback(() => {
shouldAutoScroll.current = false;
}, []);
const handleScrollEndDrag = useCallback((e: any) => {
// Auto-Scroll wieder aktivieren wenn User ganz unten ist
const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
const isAtBottom = contentOffset.y + layoutMeasurement.height >= contentSize.height - 50;
shouldAutoScroll.current = isAtBottom;
@ -671,7 +678,6 @@ const ChatScreen: React.FC = () => {
renderItem={renderMessage}
contentContainerStyle={styles.messageList}
showsVerticalScrollIndicator={false}
onContentSizeChange={handleContentSizeChange}
onScrollBeginDrag={handleScrollBeginDrag}
onScrollEndDrag={handleScrollEndDrag}
ListEmptyComponent={