Drive com as imagens: https://drive.google.com/drive/folders/12JfdLDkV3RUX1bmBmkmif8UHjAhUviD_?usp=share_link

Github do projeto: https://github.com/OneBitCodeBlog/onebitshop-marketplace-front

1. Nós vamos nessa aula configurar o projeto, criando as pastas e alguns arquivos.

2. Nós vamos começar criando o nosso projeto expo

   npx create-expo-app onebitshop-front-main --template
   

3. Vamos selecionar o blank com typescript, pois não é necessário sempre termos o projeto como Black (Bare), e caso seja necessário, podemos depois fazer a mudança.

4. Agora, nós temos a nossa base, vamos instalar tudo que é necessário para podermos já ter tudo pronto. Importante que você lembre de checar a versão do expo e do react native, para saber se está igual a minha e ter certeza que vai conseguir fazer igual.

   1. Expo: Versão 48
   2. React Native: 0.71

5. Agora vamos instalar tudo que é necessário, vamos em certo momento instalar de forma individual coisas mais “nativas” do expo

   npm install [email protected] [email protected] [email protected] [email protected] [email protected] @types/[email protected] @types/[email protected] @react-navigation/[email protected] @react-navigation/[email protected]
   

   npx expo install [email protected] [email protected]
   

6. Agora que temos tudo instalado, você pode dar uma olhada e entender melhor cada uma que instalamos. Pelo nome delas você já vai conseguir entender o que elas são.

7. Vamos primeiro excluir todos os arquivos de “assets” e colaremos as imagens que vamos usar, você pode baixar elas na descrição do vídeo desse jeito que temos aqui (Tudo organizado em pastas)

8. Agora, podemos criar a pasta src, com as pastas que iremos usar dentro dela

   1. components
   2. routes
   3. screens
   4. services
   5. styles

9. Agora podemos criar o nosso estilo. Dentro de “styles” vamos criar o “index.ts”, e dentro dele vamos criar o nosso tema de cores padrão do app.

   import { DefaultTheme } from "styled-components/native";
   
   const myTheme: DefaultTheme = {
     colors: {
       primaryText: "#FFFFFF",
       secondaryText: "#C0C0C1",
       background: "#171717",
       backgroundLight: "#222323",
       borderColor: "#848484",
       primaryButton: "#5F96ED",
       secondaryButton: "#4C4C4C",
       denounceButton: "#F64348",
     },
   };
   
   export { myTheme };
   

10. Agora, nós vamos tipar as cores. Nós vamos criar na raiz do projeto um arquivo chamado “styled.d.ts”, e nele vamos colocar o que temos no nosso objeto “myTheme”

    import "styled-components";
    
    declare module "styled-components" {
      export interface DefaultTheme {
        colors: {
          primaryText: string;
          secondaryText: string;
          background: string;
          backgroundLight: string;
          borderColor: string;
          primaryButton: string;
          secondaryButton: string;
          denounceButton: string;
        };
      }
    }