/react-native-test

Exercício de teste para vaga de react-native developer

Primary LanguageJavaScript

Exercício

Para completar esse exercício você deve desenvolver um aplicativo social que contenha as seguintes páginas:


Bibliotecas

  • Axios - Para fazer as requisições http
  • React Navigation - Para fazer a navegação entre telas
  • React Native Image Picker - Para fazer a seleção das imagens
  • React Native Vector Icons - Para icons
  • Redux - Para gerenciamento de estados

Paginas

Login

Na pagina de login o usuário informa a imagem do avatar, nome, email e descrição, essa informação é salva no estado e pode ser alterada na pagina de perfil.

Página Inicial

Na pagina inicial escolhi utilizar uma flatlist por trazer uma lista pronta com várias funcionalidades necessárias, como chamar uma função quando chegar no final da lista. Sempre que a lista chega no final ela faz requisições de novas imagens.

Perfil do Amigo

Ao clicar em algum item da lista na pagina inicial o usuário é redirecionado para o perfil do usuário, que é passado por parametro, onde é mostrado os detalhes e possui uma FlatList com as imagens do usuário funcionando da mesma forma que na pagina inicial, porém em 3 fileiras.

Perfil

Utiliza o Form para alterar os dados do usuários.


Components

  • Custom Button - Recebe o texto a ser mostrado e a função para ser executada
  • Custom Input - Recebe a referencia, o valor, o placeholder, a função que altera o valor, o numero de linhas do input e o proximo input para ser focado ao pressionar Enter
  • Form - Recebe todos os valores necessários do Form, como nome, email, descrição e imagem, assim como suas funções de alteração
  • Icon Link - Recebe o nome do icone a ser mostrado e a rota a ser redirecionada
  • List Item e Grid Item - Recebem o item a ser renderizado
  • Image Choose - Recebe a imagem atual mostrada e a função para alterar a imagem

Rotas

  • Splashscreen
  • Login
  • Home
  • Settings
  • Profile
  • Chat