React-native-template-expo-darknlight NPM

:rocket: Tecnologias usadas

Esse projeto contém as seguintes tecnologias:

React Native
Expo
React Navigation
- Native Navigation
- Stack Navigation
Styled Components
ESLint
Prettier
EditorConfig
Para mais detalhes, veja o package.json

💻 Projeto

Este projeto visa a criação de um template que possa ser utilizado no momento de criação de projetos utilizando React Native e o Expo, já com a implementação do Dark Mode e Light Mode nativo do aparelho.

⚙ Como rodar este projeto

Pré-requisitos

Para conseguir utilizar o template, seja através do Expo CLI ou com uma cópia local dos arquivos, siga os passos abaixo.

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:

Expo

E também será preciso um editor, eu indico o VSCode

🧭 Instalando

Para instalar e utilizar esse template o processo é bem simples, basta criar um projeto novo utilizando o comando:

$ expo init --template react-native-template-expo-darknlight

Com isso o projeto será criado com todas as dependências do template devidamente instaladas e linkadas, tal como os arquivos de configuração que são copiados para o projeto.

📁 Estrtura de Arquivos

expo-darknlight
├── assets/
├── src/
│   ├── @types/
│   │   └── styled.d.ts
│   ├── pages/
│   │   └── Home/
│   │       └── index.tsx
│   │       └── styles.ts
│   ├── themes/
│   │   └── index.ts
│   │   └── dark.ts
│   │   └── light.ts
│   ├── index.tsx
│   ├── routes.js
├── .gitignore
├── babel.config.js
├── App.tsx
├── app.json
├── tsconfig.json
├── package.json

🗂 Edição

Nesta seção haverão instruções caso você queira editar o template, explicando para que os diretórios são utilizados e também os arquivos de configuração.

src - Diretório contendo todos os arquivos da aplicação, é criado um diretório src para que o código da aplicação possa ser isolado em um diretório e facilmente portado para outros projetos, se necessário;

@types - Diretório para armazenar types que o compilador não reconhece nas bibliotecas.
pages - Diretório onde ficam as páginas (telas) da aplicação, como forma de padronização e boas práticas toda página fica dentro de um diretório com seu nome;
- Home - Diretório exemplo de uma página cujo nome é Home, por padrão foi adotado usar sempre como nome do diretório o nome da página em camelCase, dentro desse diretório é necessária a criação ao menos do arquivo index.tsx;
  - index.tsx - Arquivo com toda a lógica da página, tal como os componentes visuais a serem renderizados;
  - styles.ts - Arquivo com toda a estilização da página a serem renderizados;
routes.tsx - Arquivo com as configurações de navegação da aplicação, nele são criados os Navigators disponibilizados na biblioteca React Navigation;
App.tsx - Arquivo raiz da aplicação, também chamado de Entry Point, é o primeiro arquivo chamado no momento do build e execução da aplicação, nele é chamado o arquivo src/routes.tsx que por sua vez chama as rotas da aplicação;
tsconfig.json - Arquivo de configuração do TypeScript no Editor, ele é o responsável por ativar o Auto Complete de códigos TypeScript na aplicação;
package.json - Diferente dos projetos comuns, esse arquivo tem as configurações necessárias para a publicação do Template no NPM, para saber mais sobre isso veja a seção abaixo.