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:
parent
6363da97b1
commit
ffcfa44eef
|
|
@ -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={
|
||||
|
|
|
|||
Loading…
Reference in New Issue