fix: Use scrollToIndex with viewPosition:1 for reliable bottom scroll

- scrollToIndex targets last message at bottom of viewport
- onScrollToIndexFailed fallback to scrollToEnd
- More reliable than scrollToEnd with dynamic heights

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
duffyduck 2026-04-11 12:12:24 +02:00
parent 9abde89805
commit bca925d385
1 changed files with 19 additions and 5 deletions

View File

@ -377,12 +377,21 @@ const ChatScreen: React.FC = () => {
useEffect(() => { useEffect(() => {
if (messages.length > 0 && shouldAutoScroll.current) { if (messages.length > 0 && shouldAutoScroll.current) {
const isInitial = lastMessageCount.current === 0; const isInitial = lastMessageCount.current === 0;
// Mehrfach versuchen (FlatList braucht Zeit zum Rendern) const scrollToBottom = () => {
const delays = isInitial ? [100, 300, 600, 1000] : [100, 300]; try {
for (const delay of delays) { flatListRef.current?.scrollToIndex({
setTimeout(() => { index: messages.length - 1,
animated: !isInitial,
viewPosition: 1, // 1 = Item am unteren Rand
});
} catch {
// Fallback wenn Index nicht berechnet werden kann
flatListRef.current?.scrollToEnd({ animated: !isInitial }); flatListRef.current?.scrollToEnd({ animated: !isInitial });
}, delay); }
};
const delays = isInitial ? [200, 500, 1000] : [150];
for (const delay of delays) {
setTimeout(scrollToBottom, delay);
} }
} }
lastMessageCount.current = messages.length; lastMessageCount.current = messages.length;
@ -691,6 +700,11 @@ const ChatScreen: React.FC = () => {
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
onScrollBeginDrag={handleScrollBeginDrag} onScrollBeginDrag={handleScrollBeginDrag}
onScrollEndDrag={handleScrollEndDrag} onScrollEndDrag={handleScrollEndDrag}
onScrollToIndexFailed={(info) => {
setTimeout(() => {
flatListRef.current?.scrollToEnd({ animated: false });
}, 200);
}}
ListEmptyComponent={ ListEmptyComponent={
<View style={styles.emptyContainer}> <View style={styles.emptyContainer}>
<Text style={styles.emptyIcon}>{'\uD83E\uDD16'}</Text> <Text style={styles.emptyIcon}>{'\uD83E\uDD16'}</Text>