Nós vamos criar agora dentro de componente de chat a nossa pasta chamada “MessageList”, e vamos criar o index

Agora nós iremos receber via props as mensagens, que nem recebemos os produtos lá no header

const MessagesList = ({ messages }: any) => {

Agora podemos criar o flatlist com o renderItem temporário. O flatlist será invertido, então a gente vai ver as mensagens de cima para baixo, diferente de um flatlist normal.

const MessagesList = ({ messages }: any) => {
  const renderItem: ListRenderItem<any> = ({ item }) => (
    <>
			<View></View>
		</>
  );

  return (
    <FlatList
      data={messages}
      inverted
      keyExtractor={(item) => item._id}
      renderItem={renderItem}
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{ paddingTop: 20 }}
    />
  );
};

Vamos colocar no console.log esse nosso “messages”

const MessagesList = ({ messages }: any) => {
  const renderItem: ListRenderItem<any> = ({ item }) => (
    <MessageCard item={item} />
  );

  console.log(messages);

E agora que podemos ver por console o que estamos recebemos, vamos chamar ele dentro de Chat.

const Chat = ({ route }: Props) => {
  return (
    <Container>
      <ChatHeader
        sellerName={route.params.chatInfo.seller}
        product={route.params.chatInfo.product}
      />

      <MessagesList messages={route.params.chatInfo.messages} />

      <NavBar />
    </Container>
  );
};

Agora basta remover o console.log