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:
parent
9abde89805
commit
bca925d385
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue