Colocando Ícone do App e Splash Screen | Expo

Neste tutorial, vamos aprender a customizar dois elementos visuais essenciais de qualquer aplicativo: o ícone e a tela de splash (tela inicial de carregamento).

Preparação dos Assets

Para começar, precisamos criar ou editar os arquivos de imagem:

1. Ícone padrão (icon.png)
2. Ícone adaptativo para Android (adaptive-icon.png)
3. Tela de splash (splash.png)

No Figma, podemos usar templates prontos da comunidade Expo que já vem com as dimensões corretas:

• Ícone padrão: 1024x1024 pixels
• Ícone adaptativo: Deve incluir camadas foreground/background
• Splash screen: Geralmente 1242x2436 pixels para cobrir diversos dispositivos

Passo a Passo no Figma

1. Abra o template no Figma (link na descrição)

2. Para o ícone:

• Selecione um ícone (pode usar plugins como Feather Icons)
• Ajuste o tamanho e espessura das linhas
• Defina a cor de fundo (no exemplo usamos verde #00FF00)

3. Para a splash screen:

• Use o mesmo ícone, mas em tamanho menor
• Mantenha o mesmo esquema de cores do ícone

4. Exporte as imagens em PNG:

Configuração no Projeto Expo

1. Substitua os arquivos na pasta assets/ do seu projeto

2. Edite o app.json para configurar as cores:

1{
2 'expo': { 'icon': './assets/icon.png',
3 'splash': { 'image': './assets/splash.png', 'backgroundColor': '#00FF00' },
4 'android': { 'adaptiveIcon': { 'foregroundImage': './assets/adaptive-icon.png', 'backgroundColor': '#00FF00' } } } 
5 }

Importante: A cor de fundo (backgroundColor) deve combinar com a cor principal da sua splash screen para evitar bordas brancas.

Testando as Alterações

Para ver as mudanças:

1. Execute expo start
2. No emulador/device, pressione 'a' para buildar no Android
3. Observe o novo ícone e splash screen

Dica: Se as imagens não atualizarem, tente limpar o cache do Expo Go com expo start -c

Considerações Finais

Personalizar o ícone e splash screen é essencial para:

• Identidade visual: Seu app se destaca na loja de aplicativos
• Experiência profissional: Primeira impressão do usuário
• Consistência multiplataforma: Mesma identidade em Android/iOS

Para implementações mais avançadas, você pode explorar:

• Splash screens animadas
• Ícones dinâmicos que mudam com temas claro/escuro
• Ícones adaptativos mais complexos para Android

Lembre-se sempre de testar em diversos dispositivos e tamanhos de tela para garantir que sua splash screen e ícones apareçam corretamente em todos os cenários.