Basic React Native Part 17 - React Native ActivitiIndicator

Pada  Part 16 kita telah belajar dan mengenal Switch jadi jika anda belum mengikuti tutorial Part 16 diharapkan anda mengikuti tutorial  Part 16 terlebih dahulu. Pada Tutorial Part 17 ini kita mengenal terlebih dahulu Basic React Native ActivitiIndicator.

Component ActivitiIndicator React Native adalah untuk menampilkan indikator loading melingkar. itu adalah sama dengan melingkar loader / progress bar. Component ActivitiIndicator biasa digunakan untuk menunjukkan kemajuan lama berjalan suatu tugas proses sehingga pengguna dapat memahami sesuatu sedang berlangsung.

ActivitiIndicator digunakan untuk menunjukkan loading indikator putaran saat memuat data json dari latar belakang. ActivitiIndicator dapat dimodifikasi dalam ukuran dan warna, kini pengembang dapat memodifikasi style activityindicator dan mengubah ukuran dan warna.

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 ActivitiIndocator 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 Yang Dibutuhkan Untuk Project React Native

import {
  Text,
  View,
  ActivityIndicator
} from 'react-native';

Import Component

• Membuat Class Componet

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

Membuat Class

• Buat state dan Function

class App extends Component {

//1. Buat State
  state = { showIndicator: false }
  
//2. Buat Function
  onButtonPress = () => {
    this.setState({
      showIndicator: true
    });
  }
  
  render() {
      return ();
    }
  }
}

Buat State dan Function

• Menambahkan Code Berikut diantara render dan return

class App extends Component {
 
//1. Buat State
  state = { showIndicator: false }
  
//2. Buat Function
  onButtonPress = () => {
    this.setState({
      showIndicator: true
    });
  }
  
  render() {
  //3. Tambahkan Codee Berikut ini
    if (this.state.showIndicator) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      );
    } else {
    
      return ();
    }
  }
}

Code Diantara Render dan Return

• Tambahkan Code Component Di retrun dalam class App

class App extends Component {
 
//1. Buat State
  state = { showIndicator: false }
  
//2. Buat Function
  onButtonPress = () => {
    this.setState({
      showIndicator: true
    });
  }
  
  render() {
  //3. Tambahkan Codee Berikut ini
    if (this.state.showIndicator) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      );
    } else {
    
      return (
      //4. Tambahkan Code Berikut Ini 
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', margin: 20 }}>
          <Text>ActivityIndicator Ukuran large</Text>
          <ActivityIndicator size="large" color="#0000ff" />
          <Text>ActivityIndicator Ukuran small</Text>
          <ActivityIndicator size="small" color="#829123" />
          <Button onPress={this.onButtonPress} title='Click to see Indicator' />
        </View>
      );
    }
  }
} //5. Tambahkan kurung kurawal ini

Code Component di return dalam class App

• Tambahkan code style  setelah kurang kurawal terakhir

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'column'
  }
});

Code Style

• Kemudian jangan export class App.

export default App

Export Class App

• Code Lengkap Penggunaan Component ActivitiIndicator dari React Native

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

class App extends Component {
 
//1. Buat State
  state = { showIndicator: false }
  
//2. Buat Function
  onButtonPress = () => {
    this.setState({
      showIndicator: true
    });
  }
  
  render() {
  //3. Tambahkan Codee Berikut ini
    if (this.state.showIndicator) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      );
    } else {
    
      return (
      //4. Tambahkan Code Berikut Ini 
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', margin: 20 }}>
          <Text>ActivityIndicator Ukuran large</Text>
          <ActivityIndicator size="large" color="#0000ff" />
          <Text>ActivityIndicator Ukuran small</Text>
          <ActivityIndicator size="small" color="#829123" />
          <Button onPress={this.onButtonPress} title='Click to see Indicator' />
        </View>
      );
    }
  }
} //5. Tambahkan kurung kurawal ini

//6. Tambahkan Code Style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'column'
  }
});
export default App;

Code Lengkap

• Tampilan ActivitiIndicator

Tampilan ActivitiIndicator

Demikianlah pembahasan Tutorial Part 17 ini akan kita lanjutkan pada Tutorial Part 18

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