• React Native - O React Native é um framework que permite o desenvolvimento de aplicações mobile usando JavaScript e React;
• Redux - O Redux é um contêiner de estado previsível para aplicativos JavaScript. Ele ajuda você a escrever aplicativos que se comportam consistentemente, executados em diferentes ambientes (cliente, servidor e nativo) e são fáceis de testar;
  • Redux Saga - O redux-saga é uma biblioteca que tem como objetivo tornar os efeitos colaterais dos aplicativos mais fáceis de gerenciar, mais eficientes de executar, fáceis de testar e melhores em lidar com falhas;
• React Navigation - O React Navigation surgiu da necessidade comunidade do React Native de uma navegação de forma fácil de se usar, e escrita toda em JavaScript;
• React Native Gesture Handler - API declarativa que permite a manipulação de toques e gestos no React Native;
• Axios - O Axios é um cliente HTTP baseado em Promises para Browser e NodeJS;
• i18n - O i18n é uma biblioteca auxiliar para criação de aplicativos multi-idiomas;
• Prop Types - Verificação de tipo em tempo de execução para propriedades (props) React e objetos semelhantes;
• Babel - O Babel é um compilador JavaScript gratuito e de código aberto e transpiler configurável usado no desenvolvimento de aplicações JavaScript;
  • babel-eslint - Este pacote é um wrapper do parser do Babel para o ESLint;
  • babel-plugin-root-import - Esse plugin do Babel permite que sejam feitos imports e requires em caminhos baseados em uma raiz(root);
  • babel-plugin-transform-remove-console - Esse plugin do Babel remove todos os console.* da sua aplicação (Dica no site oficial do RN);
• ESLint - O ESLint é uma ferramenta de lint plugável para JavaScript e JSX;
  • eslint-config-airbnb - Este pacote fornece o .eslintrc do Airbnb como uma configuração compartilhada extensível;
  • eslint-plugin-import - Plugin do ESLint com regras para ajudar na validação de imports;
  • eslint-plugin-jsx-a11y - Verificador estático AST das regras do a11y em elementos JSX;
  • eslint-plugin-react - Regras de linting do ESLint específicas do React;
  • eslint-plugin-react-native - Regras de linting do ESLint específicas do React Native;
  • eslint-import-resolver-babel-plugin-root-import - Um resolver da lib babel-root-import para a lib eslint-plugin-import;
• Prettier - O Prettier atualiza seu código automaticamente seguindo os padrões que você quiser toda vez salva o arquivo;
  • eslint-plugin-prettier - Roda o Prettier como uma regra do ESLint;
  • eslint-config-prettier - Desativa todas as regras que são desnecessárias ou que podem dar conflito com o Prettier;
• EditorConfig - O EditorConfig é um formatador de arquivos e coleções em forma de Plugin para Editores de código/texto com o objetivo de manter um padrão de código consistente entre diferentes editores, IDE's ou ambientes;

1YourApp
2├── src/
3│   ├── @types/
4│   │   └── env.d.ts
5│   ├── assets/
6│   │   ├── fonts/
7│   │   │    ├── Product Sans Bold Italic.ttf
8│   │   │    ├── Product Sans Bold.ttf
9│   │   │    ├── Product Sans Italic.ttf
10│   │   │    └── Product Sans Regular.ttf
11│   │   ├── img/
12│   │   │    ├── .gitkeep
13│   │   │    ├── axios.png
14│   │   │    ├── constate.png
15│   │   │    ├── i18n.png
16│   │   │    ├── navigation.png
17│   │   │    ├── redux-sagas.png
18│   │   │    ├── redux.png
19│   │   │    └── typescript.png
20│   │   └── svg/
21│   │       └── .gitkeep
22│   ├── config/
23│   │   └── i18n.tsx
24│   ├── fonts/
25│   │   ├── en-us.json
26│   │   ├── es-es.json
27│   │   └── pt-br.json
28│   ├── pages/
29│   │   └── Main/
30│   │       └── index.js
31│   ├── routes/
32│   │   ├── index.tsx
33│   │   └── stack.tsx
34│   ├── services/
35│   │   └── api.js
36│   ├── store/
37│   │   ├── ducks/
38│   │   │   ├── technologies/
39│   │   │   │   └── index.tsx
40│   │   │   └── user/
41│   │   │       └── rootReducer.tsx
42│   │   │       └── rootSaga.tsx
43│   │   └── index.js
44│   ├── theme/
45│   │   ├── index.ts
46│   │   └── light.ts
47│   ├── utils/
48│   │   ├── formatters.ts
49│   │   └── validators.ts
50│   │   └── types.ts
51│   ├── index.js
52│   └── routes.js
53├── .buckconfig
54├── .editorconfig
55├── .env
56├── .eslintrc.js
57├── .flowconfig
58├── .gitattributes
59├── .gitignore
60├── .prettierrc.js
61├── .watchmanconfig
62├── app.json
63├── babel.config.js
64├── index.js
65├── metro.config.js
66├── package.json
67├── react-native-config.js
68└── tsconfig.json

• 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;

  • config - Diretório para guardar os arquivos de configuração da aplicação, por exemplo, a configuração de uso do i18n;

    • i18n.tsx - Arquivo contendo a configuração do i18n, com os Plugins i18next, para ser usado na aplicação;

  • assets - Diretório para armazenar arquivos de mídia em geral que possam ser utilizadas na aplicação;

  • 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;

    • Main - Diretório exemplo de uma página cujo nome é Main, 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.js ;

      • index.ts - Arquivo com toda a lógica da página, com os componentes visuais a serem renderizados e também o código para conectar o componente ao Redux para acessar o State global e as Actions criadas nos Ducks;

  • services - Diretório onde serão criados os arquivos relacionados a serviços utilizados na aplicação, por exemplo, requisições HTTP, autenticação com Firebase ou qualquer outro serviço que for utilizado;

    • api.ts - Arquivo com a configuração da biblioteca Axios para envio de requisições HTTP, o endereço que vem configurado por padrão é para a API do Github;

  • utils - Diretório onde serão criados os métodos que deixam o desenvolvimento mais prático e menos repetitivo;

    • formatters.ts - Arquivo com vários métodos que formatam as string para que sejam melhor interpretadas pelos usuários;

    • uuidValidator.ts - Arquivo com um método capaz de validar um uuid;

  • hooks - Diretório onde serão criados os hooks personalizados do projeto;

    • useInput.ts - Método que abrevia a forma que os inputs agregam valor as variáveis;

  • lang - Diretório onde serão criados os arquivos de linguagem;

  • themes - Diretório onde serão criados os arquivos de temas para a aplicação;

  • store - Diretório onde será criada toda a estrutura do Redux para a aplicação, como os Ducks (Reducers + Action Types + Action Creators), os Sagas e um arquivo para centralizar toda essa configuração e disponibilizar para o restante da aplicação;

    • ducks - Diretório destinado a centralizar os Ducks da aplicação para padronização na estrutura relacionada ao Redux;

      • index.ts - Arquivo responsável por importar cada Duck criado e combiná-los em um só para serem usados no Redux através da função combineReducers() ;

    • sagas - Diretório destinado a centralizar os Sagas da aplicação para padronização na estrutura relacionada ao Redux;

      • index.ts - Arquivo responsável por relacionar as Actions disparadas pela aplicação às funções do Saga, que são Funções Generator, nele é definido os Action Types a serem "escutados" e qual função executar quando um Action Creator for executado;

    • index.ts - Arquivo responsável por executar a configuração para o funcinamento do Redux + Redux Saga, dentre suas funções estão: criar um Middleware para monitorar as Actions disparadas na aplicação, aplicar o middleware criado juntamente com um Enhancer que monitora o fluxo de uma função do Saga, criar o store global da aplicação combinando os reducers existentes e exportar o state criado;

  • index.tsx - Arquivo responsável por centralizar o código do diretório src , nele é inserido o HOC Provider do react-redux que é o responsável por disponilizar o state global para a aplicação, e dentro do Provider são chamadas as rotas tal como qualquer outra configuração que precise ser executada na inicialização da aplicação, ele é como um Entry Point do diretório src ;

  • routes - Diretório onde fica os arquivos com as configurações de navegação da aplicação, nele são criados os Navigators disponibilizados na biblioteca React Navigation;

• .editorconfig - Arquivo destinado à configuração do plugin Editor Config, que padroniza algumas configurações para o editor em diferentes ambientes;

• .eslintrc.json - Arquivo de configuração do ESLint, é nele que são inseridas as regras e configurações de Linting do projeto, tal como a configuração do Resolver para o Babel Plugin Root Import e configuração da variável global __DEV__ ;

• babel.config.js - Arquivo de configuração do Babel, é nele que é configurado o Babel Plugin Root Import para aceitar imports absolutos na aplicação usando o diretório src como raiz;

• index.js - 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/index.js 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.