Criando template de React Native para novos projetos

Uma feature pouco explorada no React Native é a criação de template com dependências pré-configuradas a fim de reduzir o trabalho na configuração de novos projetos com a ferramenta.

Os boilerplates que podemos criar são muito úteis para quando precisamos compartilhar uma estrutura com um time ou criar um ponto de partida para projetos futuros com pacotes já instalados.

Nós podemos simplesmente criar um repositório no Github e clonar nos próximos projetos porém, dessa forma, não teremos a versão do React Native atualizada.

Vale lembrar que pra utilizar o recurso de templates no React Native precisamos estar utilizando o React Native CLI, ou seja, não funcionará caso você esteja iniciando seus projetos com Expo.

Se você ainda não conhece o React Native, recomendo nosso minicurso gratuito.

Criando uma template

Para criar uma template precisamos primeiro configurar um projeto com React Native da mesma forma que faríamos sem template (esse servirá de ponto de partida para os próximos):

react-native init template

Agora nesse projeto instale todas dependências que você gostaria de ter na sua template. No meu caso vou instalar o react-navigation.

yarn add react-navigation

// Use NPM se preferir

Agora, crie um arquivo na raiz do projeto chamado dependencies.json e repasse apenas as dependências que você instalou do package.json para esse novo arquivo, dessa forma:

{
  "react-navigation":"^2.0.0-rc.9"
}

Agora, em seu projeto, você pode configurar quantas pastas/arquivos quiser, eu criei uma estrutura simples com uma página e um arquivo de rotas que coloquei nesse projeto no Github.

E no seu arquivo package.json remova todo o código deixando apenas as propriedades name e version. Veja que alterei o name do meu projeto para react-native-template-* , onde o * significa o nome da minha template (no meu caso rocketseat-example). É necessário que nosso projeto sempre inicie com react-native-template.

{
  "name":"react-native-template-rocketseat-example",
  "version":"0.0.1"
}

Agora, para publicar nossa template vamos utilizar o NPM, para isso, comece criando uma conta no site https://www.npmjs.com/signup. Agora em seu terminal digite npm login e entre com as credenciais cadastradas no site do NPM (é necessário confirmar a conta no e-mail antes).Agora, com o login feito, vamos adicionar a pasta iOS/Android no arquivo .gitignore abrindo-o e no final digitando:

ios/
android/

Agora, com isso configurado, podemos publicar nossa template com o comando npm publish. Depois de carregar você poderá acessar seu pacote pelo site do NPM como no exemplo a seguir: https://www.npmjs.com/package/react-native-template-rocketseat-example

Pronto, nossa template está configurada e para criarmos novas versões precisamos apenas mudar o número da versão no package.json e rodar npm publish novamente.

Utilizando uma template

Agora com nossa template criada podemos criar um novo projeto com ela utilizando o seguinte comando:

react-native init NomeDoProjeto --template rocketseat-example

Altere rocketseat-example pelo nome da sua template.

Um novo projeto será criado com todas dependências, arquivos e pastas que você configurou porém sempre utilizando a última versão estável do React Native e das outras dependências pré-instaladas com o React Native CLI.

Concluindo

A funcionalidade de templates do React Native, mesmo pouco explorada é de extrema ajuda quando precisamos criar vários projetos com uma estrutura já pré-definida.

Ajuda principalmente quando temos muitas libs configuradas como Redux, Redux Saga, Redux Persist, Redux Logger, React Navigation, React Native Vector Icons e por aí vai, é uma infinidade.

Se você gostou do post não esquece de deixar um comentário aí em baixo 🙂