Consumindo dados de uma API REST com React Native

Hoje no quinto artigo da nossa série de artigos sobre React Native, vamos realizar a chamada em nossa API para recuperar a lista de produtos em oferta. Relembrando, estamos desenvolvendo um aplicativo que lista ofertas, promoções e desconto em produtos,  pegando essas informações de uma API. No artigo anterior Como criar uma lista de produtos com React Native, nós vimos como criar a UI da lista de produtos. Neste artigo vamos ver como recuperar a lista de produtos pela API, e como inserir estes produtos na interface criada.

O primeiro passo será instalar o pacote axios, este pacote é um cliente HTTP que pode ser utilizado no Node.Js. Um HTTP client é utilitário que pode realizar requisições em endereços utilizando o protocolo HTTP. Para a instalação do axios, utilize o comando abaixo no terminal na raiz do projeto.

npm install --save axios

Agora abra seu editor de códigos e no abra o arquivo: components/PromotionsList/index.js. 

O primeiro passo é importar o axios em nossa aplicação.

import axios from 'axios'

Depois vamos modificar nosso componente PromotionsList para realizar a requisição. Na classe do componente vamos utilizar o método: componentDidMount.

O componentDidMount faz parte dos métodos do ciclo de vida de um componente React. Não vou aprofundar aqui sobre o ciclo de vida de um componente React, para maiores detalhes veja na documentação oficial. Em resumo o método componentDidMount, é executado depois que a saída do componente React, foi renderizada para o DOM.

Vamos no nosso objeto state, definir a chave data como um array vazio. Nesta chave será onde ficará nossa lista de produtos.

state = {
  data: []
}

Após isto vamos no método componentDidMount, utilizar o client HTTP axios para realizar a requisição em nossa API REST com o método GET, para recuperar a listagem de produtos que será exibida.

Para este nosso projeto,  criei uma API HTTP REST simples utilizando o PHP. Em breve vou criar uma série de artigos apresentando o passo a passo para criar esta API. A URL da API é a seguinte: https://irias.com.br/tutorials/react-native/api.php.

Depois de recuperar a lista de produtos da API, vamos utilizar a função setState para adicionar a lista a nossa chave data do objeto state.

componentDidMount() {
   axios.get('https://irias.com.br/tutorials/react-native/api.php').then(response => {
     this.setState({ data: response.data })
   }).catch(() => {
     console.log('Error retrieving data')
   })
 }

Com isso terminamos a listagem, não será necessário modificar mais nada em nosso componente. Por fim nosso componente PromotionsList ficará do seguinte modo:

import React, { Component } from 'react'
import { FlatList } from 'react-native'
import Styles from './styles'
import PromotionCard from './../PromotionCard'
import axios from 'axios'

class PromotionsList extends Component {
  state = {
    data: []
  }

  componentDidMount() {
	axios.get('https://irias.com.br/tutorials/react-native/api.php').then(response => { 
      this.setState({ data: response.data })
    }).catch(() => { 
      console.log('Error retrieving data')
    })
  }

  render() {
    return(
      <FlatList 
        style={ Styles.promotionsList }
        data={ this.state.data }
        renderItem={ ({ item }) => (
          <PromotionCard data={ item } />
        )}
        keyExtractor={ item => item.id } 
      />
    )
  }
}

export default PromotionsList

Antes de finalizar o artigo, vamos realizar uma pequena alteração na estilização do nosso componente Header. Vamos adicionar uma borda e um efeito de elevação em nosso Header, assim irá parecer que a lista de produtos passa por debaixo do cabeçalho. Nosso arquivo components/Header/styles.js ficará do seguinte modo:

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  sectionHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 15,
    paddingHorizontal: 15,
    alignItems: 'center',
    backgroundColor: '#ffffff',
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    elevation: 5,
  },
  logoIcon: {
    width: 110,
    height: 20 
  }
})

Ao finalizar nossa aplicação ficará com a seguinte aparência.

Assim concluímos mais uma etapa do nosso projeto que já está quase chegando ao fim.

O projeto está disponível em meu GitHub:  https://github.com/andersonirias/react-native-tutorial.