Expo - Adicionando uma tela inicial e ícones
Tags: javascript, beginners, expo, mobile
Published: 2022-02-27 17:27:46

![Expo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hx3e4yufoode31j1if2p.png)
 
Nós fizemos excelente aplicativo e, claro, por que não publicá-lo certo? Mas se ao abrirmos o aplicativo desenvolvido utilizando Expo, ele simplesmente irá direcionar para a tela inicial padrão fornecida por ele.

Basicamente, quando iniciamos um aplicativo, leva algum tempo para executar ou carregar as fontes/ativos e o aplicativo não fica disponível imediatamente. Portanto, a tela inicial é basicamente a tela que o usuário vê enquanto o aplicativo está em estado de carregamento.

### E os tamanhos dos dispositivos?

O Expo resolve pra gente! No caso de dispositivos IOS, podemos usar `1242` pixels de largura e `2436` pixels de altura – essa é a largura do iPhone 8 Plus (o iPhone mais largo) e a altura do iPhone X (o iPhone mais alto). Mas no caso do Android, os tamanhos de tela variam muito com a enorme variedade de dispositivos no mercado. Uma estratégia para lidar com isso é olhar para as resoluções mais comuns e projetar em torno disso — [você pode ver uma lista de dispositivos e suas resoluções aqui](https://material.io/blog/device-metrics)

### Configurando a tela inicial

Vamos configurar nossa tela inicial no `app.json` arquivo é importante ler sobre todas as propriedades do guia do Expo abaixo:

- [splash.image](https://docs.expo.dev/guides/splash-screens/#splashimage)
- [splash.backgroundColor](https://docs.expo.dev/guides/splash-screens/#splashbackgroundcolor)
- [splash.resizeMode](https://docs.expo.dev/guides/splash-screens/#splashresizemode)

### Tamanho do ícone

Conforme sugerido pelo Expo, podemos usar a resolução 1024x1024 em dispositivos Android e IOS, precisamos certificarmos de que o ícone deve ser exatamente um quadrado perfeito, ou seja, um ícone de 1023x1024 não vai funcionar.

### Configurando os ícones para android

No Android, temos que fazer alguma configuração extra, em vez de apenas especificar o ícone em `app.json`. Você pode ver todas essas configurações aqui e por que precisamos delas. Basicamente, você precisa fornecer as 2 propriedades:

```json
android: {
  "adaptiveIcon": {
    "foregroundImage": "./assets/adaptive-icon.png",
    "backgroundColor": "#FFFFF"
    },
}
```

Irei explicar como funciona navegando dentro do array:

- Use o `android.adaptiveIcon.foregroundImage` no arquivo `app.json` para especificar sua imagem de primeiro plano.

- A cor de fundo padrão é branca, para especificar uma cor de fundo diferente, use o `android.adaptiveIcon.backgroundColor`. Podemos especificar uma imagem de fundo usando o `android.adaptiveIcon.backgroundImage` mas certifique-se de que ela tenha as mesmas dimensões da sua imagem de primeiro plano.

### Criando ícones e tela inicial

Não entrarei em muitos detalhes nessa parte, pois a melhor opção para nos criarmos um ícone ou uma splash screen é utilizando o Figma que é um software sensacional que exporta para diversos formatos e ainda podemos utilizar para prototipação de telas para apps e websites, tem outras opções a serem utilizadas porém gosto muito do Figma.

### Substituindo os arquivos e revisando todo o arquivo App.json

Então, depois de criar os arquivos que você precisa (o ícone e a splash screen) agora basta ir para a pasta onde estão seus novos arquivos que criou (no meu caso está assim):

```
src/assets/images
```

Exclua os arquivos antigos, se desejar e você também pode excluir `assets/fsvicon.png` o arquivo porque é usado para a web e nosso aplicativo não é para a web.

```json
{
  "expo": {
    "name": "Nome do App",
    "slug": "Nosso app com Expo pro DEV",
    "platforms": ["ios", "android"], 
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    }
  }
}
```
Então, fácil npe? Essa é a facilidade com que você pode adicionar ícones e uma tela inicial ao seu aplicativo de forma customizada e não esqueça o Figma é seu amigo rsrs

Fontes onde pesquisei esse conteúdo:

- https://docs.expo.dev/guides/app-icons/#android
- https://docs.expo.dev/guides/splash-screens/
- https://material.io/blog/device-metrics