Nós vamos criar o header, o header é algo comum em algumas partes da aplicação, inclusive na home. E para coisas assim, nós iremos deixar em uma pasta específica.

Vamos criar dentro de “components” uma pasta chamada “common”, e dentro dessa pasta common iremos criar uma chamada “Header”

Agora, dentro de “Header” iremos criar os arquivos padrão (index.tsx e styled.ts)

Com isso feito, podemos começar a criação do header criando o seu container. (Dentro de styled.ts)

1. Esse “Constants” que temos é algo nativo do expo onde a gente usando ele consegue valores do aparelho, como a altura da barra de status da pessoa, dando para nós a possibilidade de dar o espaçamento adequado para todos.

import styled from "styled-components/native";
import Constants from "expo-constants";

const statusBarHeight = Constants.statusBarHeight;

export const Container = styled.View`
  flex-direction: row;
  width: 100%;
  height: 100px;
  padding: 0px 20px;
  padding-top: ${statusBarHeight}px;
  justify-content: space-between;
  align-items: center;
`;

Agora com ele criado, podemos começar a puxar ele para visualização. Vamos colocar ele dentro do “index.tsx” (Aproveitando para criar a sua estrutura)

import React from "react";
import { Text } from "react-native";

import { Container } from "./styled";

const Header = () => {
  return (
    <Container>
      <Text>Header</Text>
    </Container>
  );
};

export default Header;

Vamos então colocar o nosso header dentro de Home.

Antes de fazermos isso, nós vamos criar um container com o background que temos como padrão para a aplicação. (Dentro de styled.ts da pasta Home)

import styled from "styled-components/native";

export const Container = styled.View`
  flex: 1;
  background-color: ${({ theme }) => theme.colors.backgroundLight};
`;

Agora, vamos usar o container e o header no “index.tsx” da pasta Home

import React from "react";
import { Container } from "./styled";

import Header from "../../components/common/Header";

const Home = () => {
  return (
    <Container>
      <Header />
    </Container>
  );
};

export default Home;

Com isso feito, nós vamos usar a logo no header. Nessa imagem que iremos usar, nós vamos usar o “resizeMode”, para que ela fique certinha de acordo com os tamanhos passados.

import styled from "styled-components/native";
import Constants from "expo-constants";

const statusBarHeight = Constants.statusBarHeight;

export const Container = styled.View`
  flex-direction: row;
  width: 100%;
  height: 100px;
  padding: 0px 20px;
  padding-top: ${statusBarHeight}px;
  justify-content: space-between;
  align-items: center;
`;

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

Vamos usar essa logo agora, nós iremos usar o require como fazemos com as imagens, só que iremos usar ele fora do nosso código, para deixar organizado.

import React from "react";

import { Container, Logo } from "./styled";

const logoImage = require("../../../../assets/images/horizontal-logo.png");

const Header = () => {
  return (
    <Container>
      <Logo source={logoImage} />
    </Container>
  );
};

export default Header;

Podemos ver no celular a alteração e aparição da logo. Vamos então fazer a criação do nosso search.

import styled from "styled-components/native";
import Constants from "expo-constants";

const statusBarHeight = Constants.statusBarHeight;

export const Container = styled.View`
  flex-direction: row;
  width: 100%;
  height: 100px;
  padding: 0px 20px;
  padding-top: ${statusBarHeight}px;
  justify-content: space-between;
  align-items: center;
`;

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

export const InputContainer = styled.View`
  flex-direction: row;
  width: 65%;
  background-color: ${({ theme }) => theme.colors.background};
  border-radius: 5px;
  justify-content: flex-end;
  align-items: center;
`;

export const Input = styled.TextInput`
  flex: 1;
  padding: 2px 10px;
  color: ${({ theme }) => theme.colors.secondaryText};
`;

export const Search = styled.Image.attrs({
  resizeMode: "contain",
})`
  width: 18px;
  margin-right: 10px;
`;

Com o estilo do search criado, nós vamos agora colocar ele no nosso index.tsx

import React from "react";

import { Container, Input, InputContainer, Logo, Search } from "./styled";

const logo = require("../../../../assets/images/horizontal-logo.png");
const search = require("../../../../assets/icons/search.png");

const Header = () => {
  return (
    <Container>
      <Logo source={logoImage} />

      <InputContainer>
        <Input placeholder="Pesquisa" placeholderTextColor="#C0C0C1" />
        <Search source={search} />
      </InputContainer>
    </Container>
  );
};

export default Header;

Agora podemos ver o search no nosso header. Como nós não temos nada ainda de backend, não é necessário colocarmos coisas como o value, onchangeText, etc… Podemos colocar mais para frente com a vinda do backend.