Expo - Adicionando uma tela inicial e ícones

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

Configurando a tela inicial

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

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:

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.

{
  "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:

Blog