React Native Fetch Data

Salah satu fitur yang hampir ada di setiap aplikasi daring sekarang ini adalah bagaimana berkomunikasi dengan program lain menggunakan Application Programming Interface (API). Aplikasi mobile terkadang membutuhkan fitur untuk memuat data dari tempat lain menggunakan API, seperti API media sosial, API data-data aplikasi, currency dan lain sebagainya. React Native menggunakan FETCH API dari vanilla Javascript yang dapat digunakan dalam proses ini.

Aplikasi kali ini adalah contoh penerapan penggunaan FETCH pada react native. Aplikasi yang dibangun adalah menampilkan data orang-orang secara acak (fiktif) yang diambil dari penyedia layanan api http:// https://randomuser.me/. Data tersebut ditampilkan dalam komponen flatlist yang juga ditambahkan fitur pull to refresh sehingga ketika di drag akan menampilkan data baru

Langkah pertama tentunya membuat kelas komponen, dengan script sebagai berikut

import React, { Component } from 'react';
import { View, Text,FlatList,ActivityIndicator,Image,StatusBar } from 'react-native';

export default class PeoplePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
        isLoading:true,
        dataSource:[]
    };
  }
    
  render() {

  }
}

Selanjutnya buat fungsi untuk fetch data dari API randomuser.me seperti ini

_fetchItem = async ()=>{
        this.setState({ isLoading: true });
        try {
            let response = await fetch('https://randomuser.me/api/?results=20');
            let responseJson = await response.json();
            await this.setState({
                    isLoading: false,
                    dataSource: responseJson.results,
            });
        } catch (error) {
            console.error(error);
        }
    }

Selanjutnya buat fungsi untuk menampilkan hasil fetch (nantinya di render di flatlist, sekalian untuk componen separatornya

_separatorComponent=()=>{
        return(
            <View style={{backgroundColor:'grey',height:0.5}} />
        )
    }

    _itemComponent = ({ item })=>{
        return(
            <View style={{ flex: 1, flexDirection: 'row', marginLeft: 10, height: 50}}>
                <View style={{ justifyContent:'center'}} >
                    <Image source={{ uri: item.picture.thumbnail }} style={{ width: 40, height: 40,borderRadius: 25 }} />
                </View>

                <View>
                    <Text style={{ padding: 3, }}>{item.name.first}, {item.name.last}</Text>
                    <Text style={{padding: 3,}}>{item.email}</Text>
                </View>
            </View>
        )
    }

Gunakan componentDidMount untuk memanggil fungsi fetchItem

componentDidMount() {
       this._fetchItem()
    }

Ubah pada fungsi render dengan menambahkan komponen FlatList

render() {
        if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, padding: 20 }}>
                    <ActivityIndicator />
                    <StatusBar barStyle="dark-content" />
                    <View>
                        <Text style={{ fontSize: 20, fontWeight: 'bold', }}>User List</Text>
                    </View>
                </View>
            )
        }
        return (
            <View style={{ flex: 1, paddingTop: 20 }}>
                <StatusBar barStyle="dark-content"  />
                <View>
                    <Text style={{ fontSize: 20, fontWeight: 'bold', }}>User List</Text>
                </View>
                <FlatList
                    data={this.state.dataSource}
                    renderItem={this._itemComponent}
                    keyExtractor={(item, index) => index.toString()}
                    onRefresh={this._fetchItem}
                    refreshing={this.state.isLoading}
                    ItemSeparatorComponent={this._separatorComponent}
                />
            </View>
        );
    }

Panggil kelas ini pada App.js

import React from 'react';
import PeoplePage from './src/PeoplePage'; //sesuaikan pathnya
export default class App extends React.Component {
  render() {
    return (
      <PeoplePage/>
    );
  }
}

Full source code ada di sini https://gist.github.com/dwijonarko/398e70d80bc537ae63afe9c80afc25c3