MaisDennis / GoStack10.0-Desafio-06

Adicionando features ao projeto base do Modulo 06

GoStack 10.0 || Desafio 06

• 1. Conceitos abordados
• 2. Descrição do projeto
• 3. Iniciando o React Native
• 4. Enunciado do Projeto
• 5. Criando o projeto

1. Conceitos abordados

1. Loading e uso de componente ActivityIndicator (loading do React Native).
2. Scroll infinito e uso das props:
   1. onEndReachedThreshold (Carrega mais itens quando chegar em 20% do fim).
   2. nEndReached={this.loadMore} (Funçao que carrega mais itens).
3. Refresh
4. WebView: browser inegrado de pagina externa.

2. Descrição do projeto

Adicionando features ao projeto base.

Projeto base: https://github.com/MaisDennis/GoStack10.0-Modulo-06

3. Iniciando o React Native:

Esse projeto foi desenvolvido para o ambiente mobile. No desenvolvimento do projeto foi usado o emulador mobile: Genymotion. Instruções para a instalação do Genymotion: https://docs.rocketseat.dev/ambiente-react-native/android/emulador Iiniciar o GenyMotion:

./genymotion (na pasta genymotion)

Dentro da pasta do projeto, Para iniciar o bundle:

yarn react-native start
ou
yarn react-native start --reset-cache

Redirecionamento de porta para o uso do debugger: Reactotron.

adb reverse tcp:9090 tcp:9090 ( redirecionar à porta do Reactotron)

Iniciar o app:

yarn react-native run-android

obs. O aplicativo foi desenvolvido para o ambiente Android.

4. Enunciado do projeto:

Link: https://github.com/Rocketseat/bootcamp-gostack-desafio-06/blob/master/README.md

Desafio 6: Primeiro projeto com React Native

“Só deseje as coisas as quais você está disposto a lutar”!

Sobre o desafio   |    Entrega   |    Licença

🚀 Sobre o desafio

Nesse desafio você adicionará novas funcionalidades na aplicação que desenvolvemos ao longo desse módulo.

Funcionalidades

1. Loading de repositórios

Adicione um indicator de loading utilizando <ActivityIndicator /> antes de carregar a lista de repositórios favoritados na tela de detalhes do Usuário.

2. Scroll infinito

Adicione uma funcionalidade de scroll infinito na lista de repositórios favoritados. Assim que o usuário chegar nos 20% do final de lista, busque pelos items na próxima página e adicione na lista. Seu código ficará da seguinte forma:

<Stars
  onEndReachedThreshold={0.2} // Carrega mais itens quando chegar em 20% do fim
  onEndReached={this.loadMore} // Função que carrega mais itens
  // Restante das props
>

Para requisitar uma nova página no Github utilize um parâmetro page no fim da URL:

https://api.github.com/users/diego3g/starred?page=2

3. Pull to Refresh

Adicione uma funcionalidade para quando o usuário arrastar a listagem de repositórios favoritados pra baixo atualize a lista resetando o estado, ou seja, volte o estado da paginação para a página 1 exibindo apenas os 30 primeiros itens.

A funcionalidade "Pull to Refresh" existe por padrão na FlatList e pode ser implementada através do seguinte código:

<Stars
  onRefresh={this.refreshList} // Função dispara quando o usuário arrasta a lista pra baixo
  refreshing={this.state.refreshing} // Variável que armazena um estado true/false que representa se a lista está atualizando
  // Restante das props
>

4. WebView

Crie uma nova página na aplicação que vai ser acessada quando o usuário clicar em um repositório favoritado, essa página deve conter apenas o Header da aplicação. O conteúdo da página será uma WebView, ou seja, um browser integrado que exibe o atributo html_url presente no objeto do repositório que vem da API do Github.

Documentação de utilização da WebView.

Exemplo de código:

<WebView source={{ uri: repository.html_url }} style={{ flex: 1 }} />

Resultado:

📅 Entrega

Esse desafio não precisa ser entregue e não receberá correção, mas você pode ver o resultado do código do desafio aqui. Após concluir o desafio, adicionar esse código ao seu Github é uma boa forma de demonstrar seus conhecimentos para oportunidades futuras.

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

Feito com ♥ by Rocketseat 👋 Entre na nossa comunidade!

5. Criando o projeto:

1. Loading de repositórios:

   1. Adicionar loading: true, ao state.
   2. Criar a função: load e separar load de componentDidMount().
   3. User/styles.js
      1. Criar o componente Loading = styled.ActivityIndicator.
      2. color e size são atribuidos via attrs, pois a opção de cor e tamanho não está nas opções padrão do ActivityIndicator
   4. Criar uma condicional loading com o componente Loading.

2. Scroll infinito:

   1. Adicionar as props:

      <Stars
       onEndReachedThreshold={0.2} // Carrega mais itens quando chegar em 20% do fim
       onEndReached={this.loadMore} // Função que carrega mais itens
       // Restante das props
      >

   2. Adicionar page: 1, ao state.
   3. Criar a função: loadMore.
   4. Adicionar params: { page } ao api.get.

3. Pull to Refresh:

   1. Adicionar refreshing: false, ao state.
   2. Adicionar a prop:

      <Stars
       onRefresh={this.refreshList} // Função dispara quando o usuário arrasta a lista pra baixo
       refreshing={this.state.refreshing} // Variável que armazena um estado true/false que representa se a lista está atualizando
       // Restante das props
      >

   3. Criar a função refreshList
   4. Adicionar ao load: this.setState({ refreshing: false }),

4. WebView

   1. Guideline: https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md
   2. Add React Native Webview

      yarn add react-native-webview
      

   3. Criar Repository/index.js
      1. import WebView e criar o component com source.
   4. User/index.js
      1. Criar a função handleNavigate.
      2. adicionar a prop onPress={this.handleNavigate(item)}.
         1. item contem todos os params, inclusive html_url que será usado em Repository.index.js
         2. Lembrar que em User/styles.js, tem que transformar o Starred em RectButton (para usar o navigate).