Como alterar os ícones do aplicativo no React Native CLI


Olá pessoal. Finalizando essa parte de desenvolvimento e publicação de projetos baseados em React Native, eu gostaria de mostrar a vocês mais uma etapa importante durante o processo de desenvolvimento, que é a adição de ícones para os nossos aplicativos, e como é possível substituir os ícones que são gerados por padrão nos aplicativos desenvolvidos em React Native para Android de maneira bem simples e rápida, através de um serviço na nuvem que facilita bastante a geração desses artefatos tão importantes que representam uma parte da identidade visual do nosso app. Vamos lá?


Primeiro passo

Antes de começar, é importante que o ícone desenvolvido atenda a alguns requisitos para garantir melhor qualidade visual:

  • Ele deve ter aspecto 1:1 e possuir resolução de pelo menos 1024 por 1024 pixels;
  • Ele precisa estar no formato PNG, com fundo transparente ou não;
  • É recomendável que ele atenda as normas de design estabelecidas pela Google.


Segundo passo

Feito isso, basta acessar a página do projeto Android Asset Studio e importar o seu arquivo de imagem. Lá é possível definir uma imagem, um ícone de clipart ou mesmo um texto como ícone: 


Também é possível realizar alguns ajustes como o espaçamento interno do ícone, cor de fundo, escala, recorte de imagem e contorno, além de alguns efeitos visuais como elevação, sombra e meio tom.


Terceiro passo

Depois de realizar os ajustes necessários, basta clicar no botão de download localizado no canto superior direito:


Ele vai gerar um arquivo compactado no formato ZIP contendo duas imagens em resoluções diferentes que podem ser utilizadas na Play Store durante a publicação do app e uma pasta chamada res:


Dentro desse diretório temos todo o artefato necessário para substituir os ícones lá no projeto.


Quarto passo

Por fim, acessamos a pasta do projeto até o caminho seguinte:

"NomeDoProjeto"/android/app/src/main/res/

e arrastamos as pastas dentro de res geradas para dentro desse diretório:


* Alguns desenvolvedores não recomendam substituir todas as pastas de uma vez. Ao invés disso, eles sugerem substituir arquivo por arquivo dentro de seu respectivo diretório.

Depois de copiar, basta iniciar o projeto, executá-lo de sua preferência e será possível ver a mudança na grade de aplicativos do Android:


Espero que tenha ajudado

Até mais!


Comentários

Postagens mais visitadas deste blog

Como corrigir o problema da biometria no Samsung Galaxy A30 e derivados

iPhone 6S em 2021: ainda vale a pena?

Como instalar aplicativos incompatíveis no iPhone 4, 5, iPad 3 e similares

Como obter as imagens em destaque da tela de bloqueio do Windows 10

Como transformar o cartão SD em memória interna

Como recolocar uma película de Smartphone/Tablet sem deixar resíduos

Como obter o Packet Tracer gratuitamente

Melhores Apps para Escrita

Como instalar o Chrome OS Flex no PC

Como fazer dual boot com o Zorin OS 16