Как я могу показывать дни по группам, такие как экран чата WhatsApp?

Question

Как я могу сделать такую ​​же систему дат, как на экране чата Whatsapp?

Как видно, сообщения находятся в группе по дате, я имею в виду, что они разделены датой.

Вот скриншот, который я нашел для лучшего объяснения:

Я делаю это в FlatList, отображая сообщения одно за другим .

Вот что я сделал

        let previousDate = "";
    if (index > 0) {
        previousDate = moment(this.state.messages[index - 1].created_at).format(
            "L"
        );
    } else {
        previousDate = moment(this.state.messages.created_at).format("L");
    }

    let currentDate = moment(item.created_at).format("L");

Итак, я создал функциональный компонент для renderItem реквизита FlatList, поэтому item и index получены из фактических данных. из FlatList.

То, что я пытаюсь сделать здесь, это в основном захват текущего элемента рендеринга created_at и сравнение его с created_at предыдущего элемента, и для этого я использую исходные данные, которые хранятся в состоянии. Но, к сожалению, когда FlatList отображает самый первый элемент с индексом 0, в исходных данных в состоянии нет предыдущего элемента для сравнения, поэтому я проверяю, больше ли 0 go, и беру дату из предыдущего проиндексированного элемента , А в случае Else, что означает, что при рендеринге первого элемента не ищите предыдущий элемент, а просто получите created_at.

И ниже я проверяю, не совпадают ли currentDate и previousDate s, рендеринг пользовательского компонента, иначе ничего не рендерится.

    {previousDate && !moment(currentDate).isSame(previousDate, "day") ? ( // custom component) : null}

Это должно работать так, но главная проблема в том, что я использовал inverted FlatList для того, чтобы получать сообщения go от нижней части экрана до верхней. Но теперь, потому что это перевернутый плоский список элементов, которые рендерится снизу вверх, и это дает мне такой результат:

ПРИМЕЧАНИЕ. начало сообщения приходили также в обратном порядке, но я исправил это, отправив их в обратном порядке из БД.

Итак, я не знаю, как мне достичь своей цели, и делаю это, как на первом снимке.

Спасибо!