Cara Membuat Activity Indicator Dalam React Native

Activity Indicator merupakan indikator yang digunakan oleh sistem kepada pengguna untuk menunjukan bahwa mereka sedang melakukan atau memproses suatu aksi yang diminta oleh pengguna tersebut. Ini biasa kamu lihat ketika kamu mengetik atau klik suatu tombol dan nantinya akan tampil sebuah icon proses memuat atau Loading.

Nah berikuat adalah cara membuat Activity Indicator di React Native, dibagi dalam 2 tahap :

1. App
Komponen App akan digunakan untuk mengimport dan menunjukan ActivityIndicator yang kamu buat nanti.

App.js

import React from 'react'
import ActivityIndicatorExample from './activity_indicator_example.js'
 
const Home = () => {
   return (
      <ActivityIndicatorExample />
   )
}
export default Home

2. Activity Indicator Example
Property Animasi adalah Boolean yang mana akan digunakan untuk menunjukan Activity Indicator. Yang terakhir menutup enam detik setelah komponen dipasang. Ini dilakukan dengan menggunakan fungsi closeActivityIndicator ().

Activity_indicator_example.js

import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 
class ActivityIndicatorExample extends Component {
   state = { animating: true }
   
   closeActivityIndicator = () => setTimeout(() => this.setState({
   animating: false }), 60000)
   
   componentDidMount = () => this.closeActivityIndicator()
   render() {
      const animating = this.state.animating
      return (
         <View style = {styles.container}>
            <ActivityIndicator
               animating = {animating}
               color = '#bc2b78'
               size = "large"
               style = {styles.activityIndicator}/>
         </View>
      )
   }
}
export default ActivityIndicatorExample
 
const styles = StyleSheet.create ({
   container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: 70
   },
   activityIndicator: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      height: 80
   }
})

Saat kamu menjalankan aplikasinya, akan tampil Loader pada bagian tengah layar dan akan hilang dalam waktu enam detik.

Nah bagaimana dengan tutorial Cara Membuat Activity Indicator dengan React Native mudah bukan, untuk tutorial lainnya mengenai React Native lain kalian bisa klik Link ini, nantikan tutorial lain dari Dari Belajar React Native dan semoga harimu menyenangkan.

Link Sumber : Klik Disini