Sobre

Este projeto visa a criação de um template que possa ser utilizado no momento de criação de projetos utilizando React Native, visto que o processo de instalação e configuração das libs no início de um projeto podem gerar certa complexidade e muitas vezes até erros que atrasam o processo, atrapalhando assim o fluxo de desenvolvimento.

Antes do setup

Certifique-se de ter entender as Untitled que utilizamos no nosso código e de ter sua IDE ajustada conforme Untitled.

Stack

Este template foi feito utilizando as seguintes tecnologias:

- [React Native](http://facebook.github.io/react-native/) - O React Native é um framework que permite o desenvolvimento de aplicações mobile usando JavaScript e React;

- [Mobx](https://mobx.js.org/getting-started) - No lugar do Redux optamos pelo Mobx para gerenciar o state da aplicação;

- [Styled Components](https://styled-components.com/) - Para styling de components;

- [React Navigation](https://reactnavigation.org/) - Navegação de forma fácil de usar;

- [Formik](https://github.com/jaredpalmer/formik) - Formulários criados abstraindo e facilitando o uso do Formik;

- [Firebase](https://rnfirebase.io/) - Analytics e Crashlytics já habilitados por default;

- [Lottie](https://github.com/airbnb/lottie/blob/master/react-native.md) - Animações lindonas e sem crise;

- [Axios](https://github.com/axios/axios) - O Axios é um cliente HTTP baseado em Promises;

- [ESLint](https://eslint.org/) - O ESLint é uma ferramenta de lint plugável para JavaScript e JSX;

	- [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) - Este pacote fornece o .eslintrc do Airbnb como uma configuração compartilhada extensível;

	- [eslint-plugin-sonarjs](https://github.com/SonarSource/eslint-plugin-sonarjs) - Complementa as regras de boas práticas do Airbnb.

	- [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import) - Plugin do ESLint com regras para ajudar na validação de imports;

	- [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) - Verificador estático AST das regras do a11y em elementos JSX;

	- [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) - Regras de linting do ESLint específicas do React;

	- [eslint-plugin-react-native](https://github.com/Intellicode/eslint-plugin-react-native) - Regras de linting do ESLint específicas do React Native;

	- [eslint-import-resolver-babel-plugin-root-import](https://github.com/olalonde/eslint-import-resolver-babel-root-import) - Um resolver da lib _babel-root-import_ para a lib _eslint-plugin-import_;

- [Prettier](https://prettier.io/) - O Prettier atualiza seu código automaticamente seguindo os padrões que você quiser toda vez salva o arquivo;

	- [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) - Roda o Prettier como uma regra do ESLint;

	- [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) - Desativa todas as regras que são desnecessárias ou que podem dar conflito com o Prettier;

- [EditorConfig](https://editorconfig.org/) - 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;

- [Fastlane](https://fastlane.tools/) - Build de iOS e Android para ambientes de teste e prod.

- [Github Actions](https://github.com/features/actions) -  Para execução do Fastlane, testes e checks,  e atualização programada das dependências;

Install & Start

🚨 Atenção! Após clonar o template não se esqueça de:

1. Renomear projeto utilizando o react-native-rename.

2. Renomear arquivo ios/template-Bridging-Header.h para ios/{nomeProjeto}-Bridging-Header.h 🚨 OBS: Sempre usar o nome em minúsculo e sem espaçamentos. Isso é usado para definir links de pods do Xcode.

3. Substituir ios/{name}/GoogleService-Info.plist e android/app/google-services.json com configurações do Firebase específicas do projeto.

4. No arquivo proguard-rules.pro alterar a -keep class br.com.builders.template.rn.BuildConfig { *; } para o bundleID correto

5. Gere uma nova keystore de release com o seguinte comando:
   keytool -genkey -v -keystore release.keystore -alias {nomeProjeto} -keyalg RSA -keysize 2048 -validity 10000

6. Sobreponha o arquivo android/app/release.keystore com o arquivo criado

7. Modifique o arquivo android/gradle.properties com as novas credenciais

8. Você precisa editar os arquivos de SCHEME DEV, HML e PRD do iOS, na pasta: ios/{name}.xcodeproj/xcshareddata/xcschemes/{DEV/HML/PRD}.xcscheme. Neles, busque por “template” e substitua por {name}, onde for necessário.

Para instalar basta rodar na root do projeto:

yarn

Para iniciar o bundler:

yarn start

Para iniciar emuladores:

yarn ios // yarn android

Arquitetura

!!! Stores

As `stores` são responsáveis por armazenar o state da aplicação. Qualquer tipo de informação que possa ser utilizada em mais de um container ou component, deve ser armazenada em uma store. Elas também são responsáveis por fazer requests externas através de `services`, que lidam com requisições externas e erro handling. Nenhuma store deve tratar erros; isso é responsabilidade do service e do container que iniciou a requisição

Estamos utilizando o [Mobx](https://mobx.js.org/getting-started) para lidar com as stores. Basta usar os decorators `inject` e `observer` onde deseja injetar uma store e observar suas alterações (geralmente em `containers`).

!!! Components

Todos os components visuais são declarados neste folder. Buttons, Checkbox, Inputs. Também são declarados components responsáveis por “comportamento”, mesmo sem renderizar uma interface, como o caso do `FormContainer`, que encapsula comportamentos de formulário vindos `Formik` a todos os `childrens` que forem passados como props.

!! Scenes

Telas/interfaces que possuem rotas próprias. Preferencialmente divididas entre `container`  stateful e `component` stateless.  O container (index.js) faz a conexão com as `stores`, e são responsáveis por toda a lógica da Scene e de passar as informações da store para a interface. Já o `component` (nome da Scene) é responsável pela interface visual.

!! Utils

Neste folder ficam os `helpers`, `configs`, `enums`, `types` e a `modules`. Para facilitar o gerenciamento de dependências externas no projeto, é uma boa prática importá-las e exportá-las em um único ponto da arquitetura (no caso, o  arquivo `index.js` na pasta `modules`).

Splashscreen

iOS

- Abra o XCode.

- Substitua a logo `splash-screen-logo.png` localizada `Images.xcassets` com a logo do projeto (manter o nome `splash-screen-logo.png` )..

- Altere o arquivo `LaunchScreen.xib` , para mudar a cor do background.

Android

- Substitua a imagem `android/app/src/main/res/drawable/launch_screen_logo.png` com a logo do projeto (manter o nome `launch_screen_logo.png` ).

- Para alterar o bakcground do splash screen, abra o arquivo `android/app/src/main/res/values/colors.xml` e atualize a color `splash_background`.

Fastlane

O Fastlane precisa de algumas configurações adicionais. Começando pelo Appfile, adicione o bundle ID do app em app_identifier e as propriedades itc_team_id e team_id.

Triggers

Por default o único gatilho para gerar versões de produção é fazer um push na branch master.

Setup

No Fastfile altere os valores do.workspacee .scheme na config build_app da lane release e test do iOS e package_name da config upload_to_play_store na lane do Android.

No Matchfile altere o valore do git_url . Importante que a url seja HTTPS . Pois a autenticação do match será via basic authorization.

É necessário configurar nas variáveis de ambiente do projeto o FASTLANE_USER, FASTLANE_PASSWORD, MATCH_PASSWORD e MATCH_GIT_BASIC_AUTHORIZATION.

Build & Dist

iOS

[bookmark](https://docs.fastlane.tools/best-practices/continuous-integration/#environment-variables-to-set)

### **Build**

### **Distribuição**

Android

### **Build**

Para buildar corretamente precisa configurar o bundle assinado em release seguindo as instruções conforme a [documentação](https://facebook.github.io/react-native/docs/signed-apk-android) do próprio React Native. No momento as definições do bundle e a key precisam estar commitadas repositório.

### **Distribuição**

Para a distribuição é necessário ter na pasta do Fastlane o service account JSON com as permissões corretas. Talvez esse json já exista, dependendo do projeto/cliente, mas [aqui estão as instruções](https://docs.fastlane.tools/actions/upload_to_play_store/#setup) de como criá-lo. Só precisa de permissão na conta do Google Play Console.

```plain text
defaultConfig
```

Segurança

CodePush

• Instale o codepush globalmente. No terminal execute: yarn global add appcenter-cli;

• Faça login no App Center: appcenter login;

• Copie o código do App Center e cole no terminal;

• Liste os aplicativos do AppCenter: appcenter apps list;

Setup

Configurando o Android.

=> no arquivo ‘android/app/build.gradle’ procure por `SUA_CHAVE_RELEASE` e `SUA_CHAVE_STAGING` => Cole a chave obtida em `Staging` e `Production` - Muito cuidado aqui para não trocar!

Configurando o IOS.

- No seu Mac, abra a aplicação: Keychain Access

- No menu, vá em: => KeyChain Access, Certificate Assistant => Request a certificate from a certificate authority

- Digite o que foi solicitado, e clique em `save to disk`

- Vá no painel de desenvolvedor da apple, em certificates:

- Crie um novo certificado de production / App Store and Ad Hoc com esse certificado que acabou de fazer acima

- Faça o download e abra o arquivo baixado. Ele irá para sua KeyChain Access.

- Clique com o direito, export certificate como P12 (Se não estiver habilitado, de um google de como habilitar)

- Digite uma senha segura, você precisará dela no AppCenter - seria bom uma senha padrão builders para minimizar problemas

- Em Provisioning Profiles, ainda no Apple Developer, adicione um perfil Development, AdHoc e App Store

- Faça download em um lugar seguro, você vai importá-lo no xcode a seguir

- No Xcode, unselect o `Automatically manage signing`

- Nos provisioning profiles de Debug, Release, Staging coloque as chaves:

- Debug: Development

- Release: App Store

- Staging: AdHoc

=> no arquivo `ios/template.xcodeproj/project.pbxproj` procure por `SUA_CHAVE_RELEASE` e `SUA_CHAVE_STAGING` => Cole a chave obtida em `Staging` e `Release` - Muito cuidado aqui para não trocar!

Distribuindo

🚨 LEMBRE-SE: O CodePush não poderá ser utilizado caso exista uma alteração de código nativo, ou seja, se você instalou alguma dependência que precisou fazer o LINK. Caso isso ocorra, a atualização deverá ser realizada via App Store / Google Play

• No terminal, substitua pelos seus dados e execute o seguinte comando:

appcenter codepush release-react -a <usuario>/<app> -d Staging appcenter codepush release-react -a <usuario>/<app> -d Production

Ao abrir o seu aplicativo, ele deverá ser atualizado e reiniciado automaticamente!

Commits

Os commits devem seguir o seguinte padrão: <type>(scope): <description>

Sendo que os types podem ser os seguintes: feat: Uma nova feature fix: Correção de um bug chore: Uma alteração que não é nem uma nova feature, nem uma correção

Para auxiliar no processo de commit, é recomendado utilizar o seguinte pacote: yarn global add commitizen

Em seguida, deve ser iniciado uma única vez: commitizen init cz-conventional-changelog --save-dev --save-exact --yarn

A partir de agora, para commitar pode ser usado a seguinte sintaxe: git add . git cz (Ao invés de git commit -m “…”)

Basta seguir as instruções do CLI.

Detox

Rodando testes no iOS

Para rodar os testes no ios voce precisa rodar os testes do detox no iOS voce precisa ter o XCode e o Homebrew instalado na maquina e rode os seguintes comandos:

• brew tap wix/brew

• brew install applesimutils

• yarn global add detox-cli

• yarn detox:ios

Hygen

Gerador de Scenes e Components

Para facilitar a criação de novas scenes e components temos o hygen, um gerador que cria a estrutura de pasta e arquivos necessários.

Gerar Scene

`yarn generate:scene`

Gerar Component

`yarn generate:component`

Exemplo: