Agora nós vamos criar o messagesCard dentro de messagesList, com o index e styled.

Nós vamos ter dois tipos de mensagens, a de quem envia e de quem recebe, nós sempre seremos o enviador, e quem está do outro lado do chat será o recebedor.

import styled from "styled-components/native";

export const ChatContainer = styled.ScrollView``;

export const SenderMsgContainer = styled.View`
  width: 200px;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: ${({ theme }) => theme.colors.background};
  margin-left: 40%;
  margin-top: 10px;
`;

export const SenderMsg = styled.Text`
  font-size: 18px;
  color: ${({ theme }) => theme.colors.primaryText};
  font-weight: bold;
`;

export const ReciverMsgContainer = styled.View`
  width: 200px;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #3a3a3a;
  margin-left: 30px;
  margin-top: 10px;
`;

export const ReciverMsg = styled.Text`
  font-size: 18px;
  color: ${({ theme }) => theme.colors.primaryText};
  font-weight: bold;
`;

Agora que criamos essa estrutura, nós vamos receber o item lá no renderItem

const MessageCard = ({ item }: any) => {

Vamos já usar aqui no renderItem esses cards.

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

Se o destinatário for o vendedor, a mensagem é exibida com estilo de remetente; caso contrário, é exibida com estilo de destinatário. Na hora de usarmos o backend, faremos essa verificação via ID.

const MessageCard = ({ item }: any) => {
  return (
    <>
      {item.reciver === "seller" ? (
        <SenderMsgContainer>
          <SenderMsg>{item.content}</SenderMsg>
        </SenderMsgContainer>
      ) : (
        <ReciverMsgContainer>
          <ReciverMsg>{item.content}</ReciverMsg>
        </ReciverMsgContainer>
      )}
    </>
  );
};

Agora, verificando que está tudo certo, precisamos criar o input, para que as mensagens fiquem certinhas de fato, pois agora estão meio erradas aqui na lista.

Iremos no styled de Chat criar o estilo do input.

export const InputContainer = styled.View`
  width: 85%;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  border-radius: 5px;
  background-color: ${({ theme }) => theme.colors.background};
  margin: 0 auto;
  margin-bottom: 20%;
  padding: 5px 10px;
  flex-direction: row;
  align-items: center;
`;

export const SendButton = styled.TouchableOpacity``;

export const SendIcon = styled.Image.attrs({
  resizeMode: "contain",
})`
  width: 30px;
  height: 30px;
`;

export const Input = styled.TextInput`
  flex: 1;
  max-height: 80px;
  color: ${({ theme }) => theme.colors.primaryText};
  padding-right: 10px;
  font-size: 16px;
`;

Com o estilo criado, podemos usar ele e ver tudo aqui funcionando perfeitamente.

const chatImage = require("../../../assets/icons/send.png");

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

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

      <InputContainer>
        <Input
          placeholder="Digite sua mensagem"
          placeholderTextColor="white"
          multiline
        />
        <SendButton onPress={() => {}}>
          <SendIcon source={chatImage} />
        </SendButton>
      </InputContainer>

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