{"id":14984827,"url":"https://github.com/rocketseat/react-native-template-rocketseat-basic","last_synced_at":"2025-04-04T08:02:40.622Z","repository":{"id":41454800,"uuid":"178928033","full_name":"Rocketseat/react-native-template-rocketseat-basic","owner":"Rocketseat","description":"Template básica para aplicações React Native com a estrutura utilizada na Rocketseat 🚀","archived":false,"fork":false,"pushed_at":"2020-07-09T02:21:15.000Z","size":149,"stargazers_count":465,"open_issues_count":4,"forks_count":145,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-04-04T07:33:19.518Z","etag":null,"topics":["react-native","react-navigation","template"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rocketseat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-01T18:59:06.000Z","updated_at":"2025-03-18T15:30:38.000Z","dependencies_parsed_at":"2022-08-10T02:27:12.766Z","dependency_job_id":null,"html_url":"https://github.com/Rocketseat/react-native-template-rocketseat-basic","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rocketseat%2Freact-native-template-rocketseat-basic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rocketseat%2Freact-native-template-rocketseat-basic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rocketseat%2Freact-native-template-rocketseat-basic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rocketseat%2Freact-native-template-rocketseat-basic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rocketseat","download_url":"https://codeload.github.com/Rocketseat/react-native-template-rocketseat-basic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247142053,"owners_count":20890652,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","react-navigation","template"],"created_at":"2024-09-24T14:09:43.544Z","updated_at":"2025-04-04T08:02:40.605Z","avatar_url":"https://github.com/Rocketseat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n*** Obrigado por estar vendo o nosso README. Se você tiver alguma sugestão\n*** que possa melhorá-lo ainda mais dê um fork no repositório e crie uma Pull\n*** Request ou abra uma Issue com a tag \"sugestão\".\n*** Obrigado novamente! Agora vamos rodar esse projeto incrível :D\n--\u003e\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\n[![npm](https://img.shields.io/npm/v/react-native-template-rocketseat-basic.svg?label=npm%20package)](https://www.npmjs.com/package/react-native-template-rocketseat-basic)\n[![npm](https://img.shields.io/npm/dt/react-native-template-rocketseat-basic.svg)](https://www.npmjs.com/package/react-native-template-rocketseat-basic)\n[![GitHub issues](https://img.shields.io/github/issues-raw/rocketseat/react-native-template-rocketseat-basic.svg)](https://github.com/Rocketseat/react-native-template-rocketseat-basic/issues)\n[![GitHub last commit](https://img.shields.io/github/last-commit/rocketseat/react-native-template-rocketseat-basic.svg)](https://github.com/Rocketseat/react-native-template-rocketseat-basic/commits/master)\n[![NPM](https://img.shields.io/npm/l/react-native-template-rocketseat-basic.svg)](https://choosealicense.com/licenses/mit)\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://rocketseat.com.br\"\u003e\n    \u003cimg src=\"https://s3-sa-east-1.amazonaws.com/rocketseat-cdn/rocketseat_logo_roxa.png\" alt=\"Logo\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eTemplate Rocketseat Basic\u003c/h3\u003e\n\u003c/p\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n## Tabela de Conteúdo\n\n- [Tabela de Conteúdo](#tabela-de-conte%C3%BAdo)\n- [Sobre o Projeto](#sobre-o-projeto)\n  - [Feito Com](#feito-com)\n- [Começando](#come%C3%A7ando)\n  - [Pré-requisitos](#pr%C3%A9-requisitos)\n  - [Estrutura de Arquivos](#estrutura-de-arquivos)\n  - [Instalação](#instala%C3%A7%C3%A3o)\n    - [Passo Adicional no Android](#passo-adicional-no-android)\n  - [Edição](#edi%C3%A7%C3%A3o)\n  - [Publicação](#publica%C3%A7%C3%A3o)\n- [Contribuição](#contribui%C3%A7%C3%A3o)\n- [Licença](#licen%C3%A7a)\n- [Contato](#contato)\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n## Sobre o Projeto\n\nEste 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.\n\n### Feito Com\n\nAbaixo segue o que foi utilizado na criação deste template:\n\n- [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;\n- [React Navigation](https://reactnavigation.org/) - O React Navigation surgiu da necessidade da comunidade do React Native de uma navegação de forma fácil de se usar e escrita toda em JavaScript;\n- [React Native Gesture Handler](https://kmagiera.github.io/react-native-gesture-handler/) - API declarativa que permite a manipulação de toques e gestos no React Native;\n- [Axios](https://github.com/axios/axios) - O Axios é um cliente HTTP baseado em Promises para Browser e NodeJS;\n- [Prop Types](https://github.com/facebook/prop-types) - Verificação de tipo em tempo de execução para propriedades (props) React e objetos semelhantes;\n- [Reactotron](https://github.com/infinitered/reactotron) - O Reactotron é um app Desktop para inspecionar projetos em React ou React Native. Está disponível para macOS, Linux e Windows;\n  - [reactotron-react-native](https://github.com/infinitered/reactotron/blob/master/docs/quick-start-react-native.md) - Plugin para configurar o Reactotron para se conectar ao projeto React Native;\n- [Babel](https://babeljs.io/) - O Babel é um compilador JavaScript gratuito e de código aberto e transpiler configurável usado no desenvolvimento de aplicações JavaScript;\n  - [babel-eslint](https://github.com/babel/babel-eslint) - Este pacote é um _wrapper_ do parser do Babel para o ESLint;\n  - [babel-plugin-root-import](https://github.com/entwicklerstube/babel-plugin-root-import) - Esse plugin do Babel permite que sejam feitos imports e requires em caminhos baseados em uma raiz(root);\n  - [babel-plugin-transform-remove-console](https://github.com/babel/minify/tree/master/packages/babel-plugin-transform-remove-console) - Esse plugin do Babel remove todos os console.\\* da sua aplicação ([Dica no site oficial do RN](https://facebook.github.io/react-native/docs/performance#using-consolelog-statements));\n- [ESLint](https://eslint.org/) - O ESLint é uma ferramenta de lint plugável para JavaScript e JSX;\n  - [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;\n  - [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import) - Plugin do ESLint com regras para ajudar na validação de imports;\n  - [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) - Verificador estático AST das regras do a11y em elementos JSX;\n  - [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) - Regras de linting do ESLint específicas do React;\n  - [eslint-plugin-react-native](https://github.com/Intellicode/eslint-plugin-react-native) - Regras de linting do ESLint específicas do React Native;\n  - [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_;\n- [Prettier](https://prettier.io/) - O Prettier atualiza seu código automaticamente seguindo os padrões que você quiser toda vez salva o arquivo;\n  - [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) - Roda o Prettier como uma regra do ESLint;\n  - [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;\n- [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;\n\n\u003c!-- GETTING STARTED --\u003e\n\n## Começando\n\nPara conseguir utilizar o template, seja através do React Native CLI ou com uma cópia local dos arquivos, siga os passos abaixo.\n\n### Pré-requisitos\n\nAntes de seguirmos para as configurações e uso do template, é ideal que você tenha o ambiente configurado para criar e testar aplicativos em React Native, para isso você pode seguir o guia do link abaixo:\n\n[Ambiente React Native (Android/iOS)](https://github.com/Rocketseat/ambiente-react-native)\n\n### Estrutura de Arquivos\n\nA estrutura de arquivos está da seguinte maneira:\n\n```bash\nrocketseat-basic\n├── src/\n│   ├── config/\n│   │   └── ReactotronConfig.js\n│   ├── images/\n│   │   ├── rocketseat_logo_roxa.png\n│   │   └── rocketseat_logo.png\n│   ├── pages/\n│   │   └── Main/\n│   │       └── index.js\n│   ├── services/\n│   │   └── api.js\n│   ├── index.js\n│   └── routes.js\n├── .editorconfig\n├── .eslintrc.json\n├── .gitignore\n├── babel.config.js\n├── dependencies.json\n├── devDependencies.json\n├── index.js\n├── jsconfig.js\n├── LICENSE\n├── package.json\n└── README.md\n```\n\nSerão explicados os arquivos e diretórios na seção de [Edição](#edição).\n\n### Instalação\n\n1. Para instalar e utilizar esse template o processo é bem simples, basta criar um projeto novo utilizando o comando:\n\n```sh\nreact-native init AwesomeExample --template rocketseat-basic\n```\n\n2. Depois do projeto criado você pode deletar o arquivo `App.js` da raiz, pois o arquivo `index.js` agora aponta para a pasta **src**.\n\nCom 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.\n\n---\n\n#### Passo Adicional no Android\n\nPara que os gestos sejam habilitados no Android é necessário um passo a mais, que é bem simples, abra o arquivo `android/app/src/main/java/\u003cpacote_do_projeto\u003e/MainActivity.java`, e comece importando os pacotes como abaixo:\n\n```java\n// ...\nimport com.facebook.react.ReactActivity;\n// Importações adicionadas\nimport com.facebook.react.ReactActivityDelegate;\nimport com.facebook.react.ReactRootView;\nimport com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;\n```\n\nFeito a importação vamos criar um método novo, logo abaixo do `getMainComponentName()`, ficando:\n\n```java\npublic class MainActivity extends ReactActivity {\n  @Override\n  protected String getMainComponentName() { ... }\n  // Método adicionado\n  @Override\n  protected ReactActivityDelegate createReactActivityDelegate() {\n    return new ReactActivityDelegate(this, getMainComponentName()) {\n      @Override\n      protected ReactRootView createRootView() {\n        return new RNGestureHandlerEnabledRootView(MainActivity.this);\n      }\n    };\n  }\n}\n```\n\n---\n\n### Edição\n\nNesta 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.\n\n- **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;\n\n  - **config** - Diretório para guardar os arquivos de configuração da aplicação, por exemplo, a configuração de uso do Reactotron e configuração de inicialização do Firebase;\n\n    - **ReactotronConfig.js** - Arquivo contendo a configuração do Reactotron para ser usado na aplicação;\n\n  - **images** - Diretório para armazenar imagens em geral que possam ser utilizadas na aplicação, esse diretório pode ser renomeado para `assets` e dentro de `assets` criar um novo diretório para guardar somente as imagens, assim é possível ter um diretório para guardar todo tipo de arquivo, e não apenas imagens;\n\n  - **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;\n\n    - **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`;\n\n      - **index.js** - Arquivo com toda a lógica da página, tal como os componentes visuais a serem renderizados;\n\n  - **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;\n\n    - **api.js** - 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;\n\n  - **index.js** - Arquivo responsável por centralizar o código do diretório `src`, nele 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`;\n\n  - **routes.js** - Arquivo com as configurações de navegação da aplicação, nele são criados os Navigators disponibilizados na biblioteca React Navigation;\n\n- **.editorconfig** - Arquivo destinado à configuração do plugin Editor Config, que padroniza algumas configurações para o editor em diferentes ambientes;\n\n- **.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__`;\n\n- **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;\n\n- **dependencies.json** - Arquivo contendo apenas um objeto com a lista de dependências que devem ser instaladas na aplicação, vale lembrar que as dependências que já vem por padrão no projeto como `react` e `react-native` não precisam estar nessa lista, a menos que você queira gerenciar a versão dessas libs;\n\n- **devDependencies.json** - Arquivo contendo apenas um objeto com a lista de dependências de desenvolvimento que devem ser instaladas na aplicação, vale lembrar que as dependências de desenvolvimento que já vem por padrão no projeto como `@babel/core`, `@babel/runtime`, entre outras, não precisam estar nessa lista, a menos que você queira gerenciar a versão dessas libs;\n\n- **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;\n\n- **jsconfig.json** - Arquivo de configuração do JavaScript no Editor, ele é o responsável por ativar o Auto Complete de códigos JavaScript na aplicação;\n\n- **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.\n\n### Publicação\n\nPara publicar um template como esse, o processo é bastante simples e rápido.\n\n1. Crie uma conta no [site do NPM](https://www.npmjs.com/);\n\n2. Com a conta criada execute o comando abaixo e insira suas credenciais;\n\n```sh\nnpm login\n```\n\n3. Basta abrir o arquivo `package.json` e modificar as informações de acordo com o seu template, mas as informações mais importantes são duas, o `name` e o `version`, que são os únicos que tem restrições, seguem abaixo as restrições:\n\n   1. O `name` sempre deve começar com o prefixo `react-native-template-` seguido do nome do seu template;\n   2. O template deve ser publicado em uma conta pessoal, pois quando publicado em uma **Organization** é acrescentado o prefixo `@\u003cnome_da_organization\u003e` no nome do pacote;\n   3. O `name` deve ser único, não podendo ser igual ao de um template já publicado;\n   4. A `version` deve ser atualizada a cada publicação, se o template está na versão **0.0.1** e é preciso publicar uma atualização no mesmo, a `version` deve ser diferente e superior a versão atual, por exemplo, **0.0.2**;\n\n4. Após configurar corretamente o `package.json` basta executar no terminal/prompt o comando `npm publish`;\n\n5. Com a publicação finalizada o template deve ficar disponível através do link `https://www.npmjs.com/package/react-native-template-\u003cnome_do_template\u003e`.\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## Contribuição\n\nContribuições são o que fazem a comunidade open source um lugar incrível para aprender, inspirar e criar. Qualquer contribuição que você fizer será **muito apreciada**.\n\n1. Faça um Fork do projeto\n2. Crie uma Branch para sua Feature (`git checkout -b feature/FeatureIncrivel`)\n3. Adicione suas mudanças (`git add .`)\n4. Comite suas mudanças (`git commit -m 'Adicionando uma Feature incrível!`)\n5. Faça o Push da Branch (`git push origin feature/FeatureIncrivel`)\n6. Abra um Pull Request\n\n\u003c!-- LICENSE --\u003e\n\n## Licença\n\nDistribuído sob a licença MIT. Veja `LICENSE` para mais informações.\n\n\u003c!-- CONTACT --\u003e\n\n## Contato\n\nRocketseat - [Github](https://github.com/rocketseat) - **oi@rocketseat.com.br**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frocketseat%2Freact-native-template-rocketseat-basic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frocketseat%2Freact-native-template-rocketseat-basic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frocketseat%2Freact-native-template-rocketseat-basic/lists"}