Как правильно и эффективно отображать ответы на комментарии в FlatList ⇐ Android

[Anonymous]

Я создаю новостную страницу, где вы сможете оставлять комментарии и отвечать на них. У меня вся логика сделана, но не знаю как сделать правильное отображение комментариев и ответов. У меня есть комментарии, отображаемые на странице ViewLayout с помощью FlatList, где я отображаю комментарии CommentCard, а внутри CommentCard я отображаю ответы, когда нажимаю кнопку «Просмотреть комментарии».
Вся проблема в том, что когда открывается список ответов, экран мигает (экран на секунду становится белым). Я пытался это исправить с помощью анимаций, Аккордеона, Складного, но выглядело всё супер ужасно (приложу пару примеров). Я не отрицаю, что, возможно, я это неправильно реализовал, но я просто не знаю, как это сделать правильно: логику отображения ответов перенести во ViewLayout или оставить в CommentCard? Помогите, пожалуйста, примером, как это лучше сделать?
Если получится, то хочу сделать без реанимации.
Вот `это мой код (я его немного сократил, но вся логика отображения комментариев осталась):

Код: Выделить всё

const ViewLayout = () => {
const route = useRoute();
const navigation = useNavigation();
const { newsId} = route.params;
const {user} = useGlobalContext();
const { showAlert, alertData, showCustomAlert, hideCustomAlert } =useCustomAlert()
const { newsData, comments, isLiked,  isLoading, setIsLiked} = useNewsData(newsId,user.uid)

....

if(isLoading && !refreshing){
return ()
}
return (

 item.$id}
renderItem={({ item }) => (
handleDeleteComment(item.$id)}
/>
)}
ListHeaderComponent={() =>(

{/*Шапка*/}

router.back()}
className=""
black
/>

{(user.role=='ADMIN' || user.login==newsData.creatorLogin) &&

}
{newsData.link ? (
  openLink(newsData.link)}
>


) : null}



{/*Новость*/}









{newsData.theme}
•
{newsData.date}






{newsData.likes}





{newsData.numComments?newsData.numComments:'0'}






{newsData.title}


Автор


{newsData.creatorName}



Опис
{newsData.subtitle}


{newsData.text}



{/* Коментарі */}




)}
refreshControl={

}
ListEmptyComponent={() => (



)}
showsVerticalScrollIndicator={false}
/>

{showAlert && (

)}

)
}

export default ViewLayout

Карточка комментариев, где я создал логику для отображения ответов:

Код: Выделить всё

import { View, Text,Image, TouchableOpacity, TextInput, LayoutAnimation, UIManager, Platform, Animated, ActivityIndicator} from 'react-native'
import React, { useState,useEffect,useRef } from 'react'
import { icons, images } from '../../constants'
import Icon from 'react-native-vector-icons/FontAwesome';
import CustomAlert from '../Custom Alerts/CustomAlert';
import * as Animatable from "react-native-animatable";
import Accordion from 'react-native-collapsible/Accordion';

if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);
}

const CommentCard = ({
commentId,
newsId,
image,
username,
creatorLogin,
date,
text,
likes,
comments,
commentsArray,
user,
handleDelete,
handleEdit,
isLiked
}) => {
const { showAlert, alertData, showCustomAlert, hideCustomAlert } =useCustomAlert()
const {replies,isLoading}=useCommentData(newsId,commentId,user.uid)
const dateText = useDateDiffString(date);
const [likedState, setLikedState]=useState(isLiked)

const [updateNumComments, setNumComments]=useState(comments||0)
const [isEditing, setIsEditing] = useState(false);

...
const toggleReplies=async()=>{
//LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
setIsRepliesVisible(!isRepliesVisible)
}
const handleAnswering=()=>{
//LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
setIsAnswering(!isAnswering)
}

....

// ---- Rendering replies
const renderReplies=()=>{
//LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
return (

{replies.map((reply) => (
 {deleteReply(reply.$id)}}
isLiked={reply.isLiked}
handleAnswering={()=>handleAnswering()}
onReplyAdded={() => {}}
/>
))}

);
}
const renderCommentField=()=>{
return(

setReplyText(e)}
onSend={sendReply}
/>

)
}
return (






{username}
{dateText}







{likes}
{(user.login===creatorLogin || user.role==='ADMIN')&&(



)}



{isEditing ? (



  {
setIsEditing(false);
setEditedText(text);
}}
/>



) : (

{text}



{updateNumComments > 0 && (

)}

{updateNumComments === 0 && }




)}

{/* Выпадающее меню */}
{isOpen && (

)}


{isAnswering && renderCommentField()}

{isRepliesVisible && renderReplies()} // ---- Rendering replies

{showAlert && (

)}

);
};

export { CommentCard };

Теперь это выглядит так:
Теперь gif
Когда я использовал LayoutAnimation gif

Подробнее здесь: https://stackoverflow.com/questions/790 ... n-flatlist