Préfixez les données à une FlatList sur React Native web, tout en maintenant le contenu visible

Question

Est-il possible d'implémenter un Flatlist avec react native web où vous ajoutez des données tout en conservant le contenu visible?

Actuellement, il saute en haut de la Flatlist lorsque vous ajoutez quelque chose au début. J'utilise onContentSizeChange pour forcer le déplacement de la position de défilement après une mise à jour, mais l'expérience est terrible car il y a parfois un énorme retard avant la mise à jour. Consultez ce slack pour voir ce que je veux dire : https://snack.expo.io/@divone/prepend-data-to-flatlist-on-web

Est-ce que quelqu'un a réussi à implémenter un Flatlist de type "Chat" avec React Native Web? Si oui, comment y parvenir?

---

ÉDITION : J'ai découvert que sur react native web, la visibilité du contenu est automatiquement maintenue lorsque vous ajoutez des données SI ET SEULEMENT SI la barre de défilement n'est pas en haut de l'écran. (snack)

Donc ma question reste... comment ajouter des données au début tout en maintenant la visibilité même si la barre de défilement est complètement en haut?

Answer 1

Vous pourriez inverser votre flatlist et également inverser votre point de vue sur les données. Je veux dire que lorsque vous inversez la direction de la flatlist, vous ajoutez des données à la fin et aucun saut ne se produit. Je modifie votre code partagé et le colle ci-dessous pour clarifier ce que j'ai dit, j'espère que cela aide :

import * as React from 'react';
import { Text, View, Button, FlatList } from 'react-native';

let lastContentHeight = 0;
let lastY = 0;

export default function App() {
const [data, setdata] = React.useState([]);

const flatlist = React.useRef();

const addData = React.useCallback(() => {
    const first =  data.length ? data[data.length-1].key : 1;
    const newArray = [];
    for (let i = first ; i  {
    addData();
}, []);

// const onContentSizeChange = (contentWidth, contentHeight) => {
//  const delta = contentHeight - lastContentHeight;
//  const newY = lastY + delta;
//  flatlist.current.scrollToOffset({ animated: false, offset: newY });
//  lastY = newY;
//  lastContentHeight = contentHeight;
// };

const onScroll = ({
    nativeEvent: {
        contentOffset: { y },
    },
}) => {
    lastY = y;
};

return (

}