Projeto de interface gráfica para uma rede social usando Expo com Tab Navigation personalizado e Clean Architecture.
Projeto para prática e aprendizado das libs do Expo mais recentes (2023 e 2024), customização do Layout padrão da Tab Bar do Expo Router e principalmente explorar padrões de projeto com Clean Architecture (Arquitetura limpa) no React Native / EXPO.
📌 Pré requisitos:
- Tenha o repositório clonado em sua máquina.
- Tenha o NodeJS instalado em sua máquina.
- É importante configurar o seu próprio
.env
e.env.local
baseando-se no.env.exemple
presente no projeto (Caso tenha).
🌐 Como executar a API:
Antes de executar o app, é importante configurar o json-server do projeto para rodar na sua máquina. Isso será necessário já que endereço de localhost não é compatível entre o emulador e a máquina que está executando.
- Para descobrir um ip válido na sua máquina, no windows, execute o comando:
$ ipconfig
- O Windows irá exibir uma lista de ip's válidos na sua máquina. Você deve copiar o Endereço
IPv4
.
-
Crie o arquivo config.json na pasta server:
./server/config.json
. (Link) -
No arquivo, coloque o seguinte conteúdo:
{
"host": "",
"port": 3333,
"routes": "./server/routes.json"
}
-
No valor de
host
do json coloque o ip copiado anteriormente e salve o arquivo. -
Por fim, devemos informar ao App o novo endereço do servidor.
-
Crie o arquivo
.env
na raiz do projeto e adicione a variávelEXPO_PUBLIC_API_URL
conforme o .env.exemple. Obs: É importante ser nesse padrão:http://SEU_IP_LOCAL:3333
, por exemplo::http://0.0.0.0:3333
. -
Para executar o servidor da API use o comando
npm run server
.
🚩 Como executar o App:
-
Com o terminal aberto no diretório do projeto, execute o comando
npm i --force
para instalar as dependências. -
Após a instalação, você deve rodar o projeto localmente usando o comando
npm start
e escolher as opções para execução a depender do ambiente. (Esse projeto também é compatível com o Expo Go.) -
Caso queira executar o expo e limpar o cache, use
expo start -c
para executar e limpar o cache.
Em algumas situações, vai ser necessário limpar o cache do EXPO, para isso, execute os seguintes passos ou confira a documentação oficial:
rm -rf node_modules // Ou apague a pasta manualmente
npm cache clean --force
npm install
watchman watch-del-all
del %localappdata%Temphaste-map-*
del %localappdata%Tempmetro-cache
npx expo start --clear