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:
@@ -361,18 +361,25 @@ const ChatScreen: React.FC = () => {
|
|||||||
return () => { if (saveTimer.current) clearTimeout(saveTimer.current); };
|
return () => { if (saveTimer.current) clearTimeout(saveTimer.current); };
|
||||||
}, [messages]);
|
}, [messages]);
|
||||||
|
|
||||||
// Auto-Scroll wird ueber onContentSizeChange der FlatList gesteuert
|
// Auto-Scroll: immer zur letzten Nachricht springen
|
||||||
const shouldAutoScroll = useRef(true);
|
const shouldAutoScroll = useRef(true);
|
||||||
const handleContentSizeChange = useCallback(() => {
|
const lastMessageCount = useRef(0);
|
||||||
if (shouldAutoScroll.current) {
|
|
||||||
flatListRef.current?.scrollToEnd({ animated: false });
|
// 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(() => {
|
const handleScrollBeginDrag = useCallback(() => {
|
||||||
shouldAutoScroll.current = false;
|
shouldAutoScroll.current = false;
|
||||||
}, []);
|
}, []);
|
||||||
const handleScrollEndDrag = useCallback((e: any) => {
|
const handleScrollEndDrag = useCallback((e: any) => {
|
||||||
// Auto-Scroll wieder aktivieren wenn User ganz unten ist
|
|
||||||
const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
|
const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
|
||||||
const isAtBottom = contentOffset.y + layoutMeasurement.height >= contentSize.height - 50;
|
const isAtBottom = contentOffset.y + layoutMeasurement.height >= contentSize.height - 50;
|
||||||
shouldAutoScroll.current = isAtBottom;
|
shouldAutoScroll.current = isAtBottom;
|
||||||
@@ -671,7 +678,6 @@ const ChatScreen: React.FC = () => {
|
|||||||
renderItem={renderMessage}
|
renderItem={renderMessage}
|
||||||
contentContainerStyle={styles.messageList}
|
contentContainerStyle={styles.messageList}
|
||||||
showsVerticalScrollIndicator={false}
|
showsVerticalScrollIndicator={false}
|
||||||
onContentSizeChange={handleContentSizeChange}
|
|
||||||
onScrollBeginDrag={handleScrollBeginDrag}
|
onScrollBeginDrag={handleScrollBeginDrag}
|
||||||
onScrollEndDrag={handleScrollEndDrag}
|
onScrollEndDrag={handleScrollEndDrag}
|
||||||
ListEmptyComponent={
|
ListEmptyComponent={
|
||||||
|
|||||||
Reference in New Issue
Block a user