Este projeto tem o objetivo de criar um templete em React Native com TypeScript. A principal motivação é diminuir o tempo inicial de desenvolvimento de novos projetos.
O Designer foi feito no figma e pode ser acessado em: Telas
Abaixo segue o que foi utilizado na criação deste template:
- React Native - Framework React Native;
- React Navigation - React Navigation para navegação entre telas
- Axios - Axios cliente para requisições http;
- Babel - Babel compilador JavaScript gratuito;
- ESLint - ESLint para verificações de código;
- Prettier - O Prettier para formatação formatação e padronização de código;
- unform - Trabalho com formulários;
- Yup - Validação de formulários;
- styled-components - estilização em arquivos dedicados;
Segue abaixo recomendações de como usar esse projeto
Recomendo que configure seu ambiente de desenvolvimento como demostrado neste artigo da Rocketseat: https://react-native.rocketseat.dev/
A estrutura de arquivos está da seguinte maneira:
react-native-template
├── src/
│ ├── assets/
│ │ ├── colors
│ │ ├── images
│ │ └── styles
│ ├── components/
│ │ ├── Button
│ │ ├── forms
│ │ └── Modal
│ ├── config/
│ ├── hooks/
│ ├── misc/
│ ├── pages/
│ │ ├── ForgotPassword/
│ │ ├── Home
│ │ └── Login
│ ├── routes/
│ ├── services/
│ ├── index.js
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── app.json
├── babel.config.js
├── metro.config.js
├── README.md
└── tsconfig.json
-
src - Diretório contendo todos os arquivos da aplicação.
-
components - Diretório contendo todos os arquivos de components communs da aplicação.
-
config - Diretório para guardar os arquivos de configuração.
-
assets - Diretório para guardar os arquivos de imagem, cores e estilos comuns para toda aplicação
-
hooks - Diretório para guardar os arquivos de imagem, cores e estilos comuns para toda aplicação
-
pages - Diretório onde ficam as telas da aplicação
-
routes - Diretório onde serão criados os arquivos de configuração de rotas
-
services - Diretório onde serão criados os arquivos relacionados a serviços.
- Para instalar e utilizar esse template basta fazer uma copia do projeto na sua máquina e rodar na raiz do projeto
npm install
ou
yarn install
dependendo do seu gerenciador de pacotes
npx react-native start
npx react-native run-android
Distribuído sob a licença MIT. Veja LICENSE
para mais informações.
Moisés - Github - moi.ac@hotmail.com