Nós iremos começar criando uma pasta dentro de “components” chamada de “Chat” e dentro dela iremos criar uma pasta chamada “ChatHeader”, vamos nessa pasta criar o index e styled.

Agora nós vamos criar toda a estrutura visual do header

import styled from "styled-components/native";

export const Container = styled.View`
  margin: 0px 30px;
  border-bottom-width: 1px;
  border-bottom-color: #2e2f2f;
  padding-bottom: 20px;
`;

export const Row = styled.View`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`;

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

export const ModalButton = styled.TouchableOpacity`
  width: 30px;
  align-items: center;
`;

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

Com essa estrutura visual criada, vamos utilizar ela no nosso index.

return (
  <Container>
    <Row>
      <BackArrow marginLeft={0} />
      <SellerName>{sellerName}</SellerName>
      <ModalButton onPress={handleToggleModal}>
        <ModalImage source={modalImg} />
      </ModalButton>
    </Row>
  </Container>
);

Agora que criamos a base visual, vamos visualizar como está colocando ela dentro de Chat

return (
  <Container>
    <ChatHeader />

    <NavBar />
  </Container>
);

Podemos ver que está tudo OK, vamos agora receber via header o sellerName e também o produto, pois iremos exibir eles aqui no header.

const ChatHeader = ({ sellerName, product }: any) => {

Vamos então já usar o sellerName aqui para exibir o seller de acordo com o card.

return (
  <Container>
    <ChatHeader
      sellerName={route.params.chatInfo.seller}
      product={route.params.chatInfo.product}
    />

    <NavBar />
  </Container>
);

Agora só precisamos criar o visual do modal que iremos ativar ao clicar nos 3 pontos

export const ModalOverlay = styled.TouchableOpacity`
  flex: 1;
`;

export const ModalContainer = styled.View`
  width: 160px;
  height: 160px;
  background-color: white;
  border-radius: 5px;
  justify-content: center;
  position: absolute;
  top: 10%;
  right: 7%;
`;

export const ModalText = styled.Text`
  font-size: 18px;
  font-weight: bold;
  margin: 5px;
  margin-left: 8px;
`;

E com o visual criado, podemos usar e criar o modal, começando pelo state

const ChatHeader = ({ sellerName, product }: any) => {
  const [modalVisible, setModalVisible] = useState(false);

Agora vamos usar no index de fato

return (
  <Container>
    <Row>
      <BackArrow marginLeft={0} />
      <SellerName>{sellerName}</SellerName>
      <ModalButton onPress={handleToggleModal}>
        <ModalImage source={modalImg} />
      </ModalButton>
      <Modal animationType="fade" transparent={true} visible={modalVisible}>
        <ModalOverlay onPress={handleToggleModal} activeOpacity={1}>
          <ModalContainer>
            <ModalText>Testando</ModalText>
            <ModalText>Testando</ModalText>
            <ModalText>Testando</ModalText>
          </ModalContainer>
        </ModalOverlay>
      </Modal>
    </Row>
  </Container>
);

E criaremos também o handle, que será usado para mudar o state

const ChatHeader = ({ sellerName, product }: any) => {
  const [modalVisible, setModalVisible] = useState(false);

  const handleToggleModal = () => {
    setModalVisible(!modalVisible);
  };

Agora, ao clicar nos 3 pontos, iremos conseguir visualizar o modal, e caso a gente queira, clicar no texto também.

Vamos criar um handle para ir para feedback, outro para denúncia e um pro perfil do vendedor.

const ChatHeader = ({ sellerName, product }: any) => {
  const navigation = useNavigation<PropsStack>();
  const [modalVisible, setModalVisible] = useState(false);

  const handleToggleModal = () => {
    setModalVisible(!modalVisible);
  };

  const handleSellerProfile = () => {
    navigation.navigate("SellerProfile");
  };

  const handleFeedback = () => {
    navigation.navigate("Feedback");
  };

  const handleDenounce = () => {
    navigation.navigate("Denounce");
  };

  return (
    <Container>
      <Row>
        <BackArrow marginLeft={0} />
        <SellerName>{sellerName}</SellerName>
        <ModalButton onPress={handleToggleModal}>
          <ModalImage source={modalImg} />
        </ModalButton>
        <Modal animationType="fade" transparent={true} visible={modalVisible}>
          <ModalOverlay onPress={handleToggleModal} activeOpacity={1}>
            <ModalContainer>
              <ModalText onPress={handleSellerProfile}>Ver Perfil</ModalText>
              <ModalText>Deletar Conversa</ModalText>
              <ModalText onPress={handleFeedback}>Avaliar</ModalText>
              <ModalText onPress={handleDenounce}>Denunciar</ModalText>
            </ModalContainer>
          </ModalOverlay>
        </Modal>
      </Row>
    </Container>
  );
};