Vamos criar um componente de título, que será padrão em algumas telas. Onde teremos um botão de voltar, e o título centralizado.

Nós já temos dentro de “common” o “DefaultButton”, teremos agora o nosso “DefaultTitle”, para usarmos nas páginas onde será necessário.

Dentro dela, vamos criar os arquivos padrão, index e styled.

Vamos criar os estilos. Nós vamos primeiro criar o container que vai envolver tudo que temos, e o nosso fontsize será via props, para que a gente tenha algo que possamos mudar de acordo com a página onde estamos.

import styled from "styled-components/native";

type TitleProps = {
  fontSize: number;
};

export const Container = styled.View`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 20px;
  margin-top: 0;
  margin-bottom: 0;
`;

export const Title = styled.Text<TitleProps>`
  font-size: ${(props) => props.fontSize}px;
  color: ${({ theme }) => theme.colors.primaryText};
  font-weight: bold;
`;

Agora, nós vamos criar um espaço vazio do mesmo tamanho do botão de voltar, para que através do “space-between”, o título da tela fique centralizado.

import styled from "styled-components/native";

type TitleProps = {
  fontSize: number;
};

export const TitleBackContainer = styled.View`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 20px;
  margin-top: 0;
  margin-bottom: 0;
`;

export const Title = styled.Text<TitleProps>`
  font-size: ${(props) => props.fontSize}px;
  color: ${({ theme }) => theme.colors.primaryText};
  font-weight: bold;
`;

export const EmptyView = styled.View`
  width: 40px;
  height: 40px;
`;

Agora nós podemos utilizar tudo que criamos. Esse espaço vazio que criamos ficará invisível, para que a gente use ele somente para centralização.

Nós teremos vindo via props também os valores de fontSize e titulo, mas por enquanto podemos deixar normal.

import React from "react";
import { Container, EmptyView, Title } from "./styled";
import BackArrow from "../BackArrow";

const DefaultTitle = () => {
  return (
    <Container>
      <BackArrow marginLeft={0} />
      <Title fontSize={20}>{"Teste de título"}</Title>
      <EmptyView />
    </Container>
  );
};

export default DefaultTitle;

Agora, com isso feito, basta utilizarmos lá no UserProfile

const UserProfile = () => {
  return (
    <>
      <Container>
        <DefaultTitle />
      </Container>
      <NavBar />
    </>
  );
};

Nós vamos fazer o sistema de props agora para poder ter a alteração automática do título

interface TitleProps {
  fontSize: number;
  title: string;
}

const DefaultTitle = ({ fontSize, title }: TitleProps) => {
  return (
    <Container>
      <BackArrow marginLeft={0} />
      <Title fontSize={fontSize}>{title}</Title>
      <EmptyView />
    </Container>
  );
};

E por fim, isso na tela, passando para o título

const UserProfile = () => {
  return (
    <>
      <Container>
        <DefaultTitle title="MEU PERFIL" fontSize={20} />
      </Container>
      <NavBar />
    </>
  );
};

Agora nós temos o título default na nossa tela.<DefaultTitle title="MEU PERFIL" fontSize={20} />