Explorando um pouco do expo

 

Oque é o expo?

O Expo é uma ferramenta utilizada no desenvolvimento mobile com React Native que permite o fácil acesso às API’s nativas do dispositivo sem precisar instalar qualquer dependência ou alterar código nativo.

Apesar de cumprir esse papel muito bem, o Expo possui algumas desvantagens, principalmente para programadores que estão migrando de um estágio iniciante para intermediário com React Native.

Para que serve?

Quando iniciamos no desenvolvimento mobile percebemos que o número de API’s e recursos nativos que podemos controlar através da nossa aplicação é gigante, e muitas vezes não nos recordamos de todas opções que temos disponíveis.

O Expo, por sua vez, oferece grande parte desses recursos de forma nativa e integrada e, por exemplo, você tem acesso à recursos como câmera, microfone, player de música, entre outros, de forma muito simples utilizando essa ferramenta.

Apesar de todos esses benefícios, o grande ponto do Expo para quem está iniciando é que para começar a desenvolver suas aplicações mobile com React Native você não precisará instalar a SDK do Android ou o XCode para Mac, isso porque o Expo possui um aplicativo móvel instalável pelas lojas do Android/iOS que contém todo código nativo necessário pelo React Native para iniciar sua aplicação e, dessa forma, a única alteração em código que você faz é em Javascript.

O ponto destacado acima tem dois lados. A vantagem é que nesse formato o desenvolvedor inicia muito rápido e em poucos minutos está criando sua aplicação, toda parte complicada foi abstraída. A desvantagem está em exatamente pular essas etapas pois desconhecendo todo processo de instalação da SDK do Android ou XCode para iOS vai te limitar MUITO futuramente para lidar com processos de atualização e build das aplicações.

Quando utilizar?

Minha recomendação é que você utilize o Expo apenas em duas situações:

1. Você está testando o React Native e quer entender como ele funciona;
2. Você não tem interesse em publicar e manter aplicações mobile complexas (apenas criar apps simples).

“Ah, mas por que você não gosta do Expo?” Não é uma questão de não gostar, eu acredito que essa ferramenta tem seu espaço, mas, por experiência, ter todo conhecimento por volta do ecossistema Android e iOS para publicação e manutenção dos apps vai te dar muita flexibilidade enquanto que com o Expo você ficará totalmente restrito a utilizar as features conforme são lançadas.

Como instalar o expo em sua máquina?

Tendo já instalado em sua máquina o nodejs e o npm, abra um terminal e execute o comando abaixo:

$ npm install expo-cli — global

E para conferir se deu tudo certo na instalação rode o comando abaixo:

$ expo --version

Dando tudo certo irá aparecer a versão do expo que foi instalado em sua máquina. E qualquer dúvida acesse a documentação do expo.

Como iniciar um projeto no expo?

Para iniciar a criação do seu app execute o comando abaixo para criar o projeto:

expo init nomedoprojeto

Ao executar o comando irá aparecer 5 opções que são:

blank : é um projeto totalmente em branco.

blank(typescritp): é um projeto totalmente em branco porem já estruturado para usar o typescript.

tabs: é um projeto ja estruturados com um menu inferior no formato de tabs e com algumas telas para exemplo.

minimal: é um projeto com o minimo de configuração.

minimal(typescript): é um projeto com o minimo de configuração estruturado para usar o typescript.

Dessas opções iremos escolher blank(typescript)

Quando a configuração inicial do projeto terminar sua tela ficará igual a imagem abaixo, Caso não confira se retorno algum erro:

E assim como é mensionado no retorno do seu terminal para iniciar o projeto é so entrar na pasta e executar:

yarn start

ou

npm start

Irá abrir em seu navegador uma tela igual a essa da imagem abaixo:

Essa tela nos permite executar o projeto em um emulador ou no sue proprio celular, para o celular devemos ter instalado o expo, ele ta disponivel na google play e applestore:

após instalar é so abrir o app e escanear o qrcode que aparece.

Mas tambem temos a opção de rodar um emulador como o do android studio ou qualquer outro que voce tenha familiaridade, e para executar e so clicar em run on Android device/emulador ou run on ios simulador, no caso do android studio ele vai executar de forma automatica o emulador.

Num caso onde sua maquina não comporte um emulador e você não tenha um celular para rodar, existe a opção de rodar o seu projeto no navegador ou usar o snack expo que é um editor online com emulador embutido.

Com seu projeto criado vou mostrar como preparar o projeto para fazer build.Primeiramente temos que criar um icone com tamanho 192x192, e um spashscream com tanho 1242x2436 eles devem ficar salvos na pasta assets do seu projeto.

Agora abra o app.json de seu projeto e insira o bloco de código:

"android": {  "package": "com.dakmark.Uzion"}

O seu app.json deve ficar parecido com o abaixo:

{  "expo": {    "name": "Uzion",    "slug": "mobile",    "version": "1.0.0",    "orientation": "portrait",    "icon": "./assets/icon.png",    "splash": {      "image": "./assets/splash.png",      "resizeMode": "contain",      "backgroundColor": "#00997c"    },    "updates": {    "fallbackToCacheTimeout": 0  },  "assetBundlePatterns": [    "**/*"  ],  "ios": {    "supportsTablet": true  },  "android": {    "package": "com.dakmark.Uzion"  } }}

altere também o name para o nome do seu projeto, e o backgroundColor com a cor de fundo da sua spash pois pode ocorrer da imagem não empreencher toda a tela do aparelho, e basicamente são essas as configurações minímas para gerar um apk caso queira realizar outras configurações veja aqui.

Por fim no terminal é so executar o comando dentro da pasta do projeto:

expo build:android

Refências:

Parte desse artigo vem dos seguintes links:

Expo: o que é, para que serve e quando utilizar?

O Expo é uma ferramenta utilizada no desenvolvimento mobile com React Native que permite o fácil acesso às API's…

blog.rocketseat.com.br

https://www.youtube.com/watch?v=wYMvzbfBdYI&t=759s