Basic React Native Part 25 - React Native Flatlist

Pada  Part 24 kita telah belajar dan mengenal StatusBar jadi jika anda belum mengikuti tutorial Part 24 diharapkan anda mengikuti tutorial Part 24 terlebih dahulu. Pada Tutorial Part 25 ini kita mengenal terlebih dahulu Basic React Native Flatlist.

React Native Flatlist merupakan komponen-komponen sederhana untuk menampilkan list dafatar data namun banyak digunakan, contoh flatlist yang akan membantu anda untuk memahami bagaimana menggunakannya.

List View digunakan untuk menampilkan data dengan mode scrolling, biasanya data ini mengalami perubahan namun yang terpenting adalah harus terstruktur dengan baik. List View akan memperhitungkan dan me-render ke elemen screen agar ditampilkan sebagaimana mestinya. Jika anda memiliki list data yang panjang, maka data berikutnya akan ditampilkan setelah layar di-scroll kebawah.

Mengimplementasikan Pada Project React Native

Buat Project React Native

Pada Tutorial Part 2 kita telah menginstall react-native-cli kemudian kita telah belajar cara membuat project baru react native. Berikut perintah cara untuk membuat project baru react native.

react-native init namafolderproject

Buat Project Baru

Install Aplikasi Debug Ke Handphone Android

Pada Tutorial Part 4 kita telah belajar cara menginstall Aplikasi Debug ke Handphone Android, untuk tata cara yang lebih jelas bisa langsung pelajari lagi pada Tutorial Part 4 terlebih dahulu. Secara singkat perintahnya seperti berikut.

react-native run-android

Install Aplikasi Debug Ke Handphone Android

Buka File App.js Dengan Visual Studio Code

Secara default pada file App.js memiliki code yang cukup dan menghasilkan tampilkan seperti berikut ini

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

Code Default App.js

Tampilan Default File App.js

Menghapus Code Default App.js

Untuk memudahkan memahami component Flatlist kita hapus semua code dafault App.js. Setelah semua code default App.js dihapus maka ikuti langkah - langkah berikut ini.

• Import React

import React, { Component } from 'react'

import react

• Import Component React Native Untuk Project React Native dari React Native

import { StyleSheet, FlatList, Text, View, Alert } from 'react-native';

Import Component

• Membuat Class Componet

class App extends Component {
  render() { 
    return (  );
  }
}
 

Membuat Class

• Kemudian tambahkan code berikut ini diatas render

//Tambahkan code ini diatas render
constructor(props) {
    super(props);
    this.state = {
      FlatListItems: [
         { id: '1', value: 'A' },{ id: '2', value: 'B' },{ id: '3', value: 'C' },
         { id: '4', value: 'D' },{ id: '5', value: 'E' },{ id: '6', value: 'F' },
         { id: '7', value: 'G' },{ id: '8', value: 'H' },{ id: '9', value: 'I' },
         { id: '10', value: 'J' },{ id: '11', value: 'K' },{ id: '12', value: 'L' },
         { id: '13', value: 'M' },{ id: '14', value: 'N' },{ id: '15', value: 'O' },
         { id: '16', value: 'P' },{ id: '17', value: 'Q' },{ id: '18', value: 'R' },
         { id: '19', value: 'S' },{ id: '20', value: 'T' },{ id: '21', value: 'U' },
         { id: '22', value: 'V' },{ id: '23', value: 'W' },{ id: '24', value: 'X' },
         { id: '25', value: 'Y' },{ id: '26', value: 'Z' }],
    };
  }
  FlatListItemSeparator = () => {
    return (
      <View style={{height: 0.5, width: '100%', backgroundColor: '#C8C8C8'}}/>
    );
  };
  GetItem(item) {
    Alert.alert(item);
  }

• Kemudian tambahan code berikut ini didalam return.

return (
    //Code return
       <View style={styles.MainContainer}>
        <FlatList
          data={this.state.FlatListItems}
          ItemSeparatorComponent={this.FlatListItemSeparator}
          renderItem={({ item }) => (
            <View>
              <Text
                style={styles.item}
                onPress={this.GetItem.bind(this, 'Id : '+item.id+' Value : '+item.value)}>
                {item.value}
              </Text>
            </View>
          )}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );

Tambahkan code pada return

• Tambahkan Style sebelum export default

//Buat Style
const styles = StyleSheet.create({
  MainContainer :{
    justifyContent: 'center',
    alignItems:'center',
    flex:1,
  }
});

• Setelah itu export class App.

export default App

export class

• Berikut Code lengkap nya

import React, { Component } from 'react';
import { StyleSheet, FlatList, Text, View, Alert } from 'react-native';
 
 class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      FlatListItems: [
         { id: '1', value: 'A' },{ id: '2', value: 'B' },{ id: '3', value: 'C' },
         { id: '4', value: 'D' },{ id: '5', value: 'E' },{ id: '6', value: 'F' },
         { id: '7', value: 'G' },{ id: '8', value: 'H' },{ id: '9', value: 'I' },
         { id: '10', value: 'J' },{ id: '11', value: 'K' },{ id: '12', value: 'L' },
         { id: '13', value: 'M' },{ id: '14', value: 'N' },{ id: '15', value: 'O' },
         { id: '16', value: 'P' },{ id: '17', value: 'Q' },{ id: '18', value: 'R' },
         { id: '19', value: 'S' },{ id: '20', value: 'T' },{ id: '21', value: 'U' },
         { id: '22', value: 'V' },{ id: '23', value: 'W' },{ id: '24', value: 'X' },
         { id: '25', value: 'Y' },{ id: '26', value: 'Z' }],
    };
  }
  FlatListItemSeparator = () => {
    return (
      <View style={{height: 0.5, width: '100%', backgroundColor: '#C8C8C8'}}/>
    );
  };
  GetItem(item) {
    Alert.alert(item);
  }
  render() {
    return (
      <View style={styles.MainContainer}>
        <FlatList
          data={this.state.FlatListItems}
          ItemSeparatorComponent={this.FlatListItemSeparator}
          renderItem={({ item }) => (
            <View>
              <Text
                style={styles.item}
                onPress={this.GetItem.bind(this, 'Id : '+item.id+' Value : '+item.value)}>
                {item.value}
              </Text>
            </View>
          )}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  MainContainer :{
    justifyContent: 'center',
    alignItems:'center',
    flex:1,
  }
});
export default App

Code Lengkap

• Tampilan Flatlist

Tampilan Flatlist

Demikianlah pembahasan Tutorial Part 25 ini akan kita lanjutkan pada Tutorial Part 26.

Catatan: tulisan ini dipindahkan dari cloudborneo.com, terbit pertama 20 Januari 2020.