React Native-এ লোডিং ইন্ডিকেটর (ActivityIndicator) দেখানোর পদ্ধতি

লোডিং ইন্ডিকেটর ব্যবহারকারীকে জানায় যে তাদের রিকোয়েস্ট প্রসেস হচ্ছে এবং কিছু সময় লাগবে। উদাহরণস্বরূপ, ফর্ম সাবমিট বা সার্চ বাটন ক্লিক করার পর।

বেসিক কম্পোনেন্ট

<ActivityIndicator animating={animating} color='#bc2b78' size="large" style={your_style} />

ইম্পোর্ট

import { ActivityIndicator } from 'react-native';

মূল প্রপস

প্রপার্টি	বিবরণ
animating	বুলিয়ান মান। `true` = এনিমেশন চলে, `false` = বন্ধ।
color	ইন্ডিকেটরের রঙ।
hidesWhenStopped	`true/false`। এনিমেশন বন্ধ হলে লুকাবে কিনা।
size	`small` বা `large`।

উদাহরণ: ১ মিনিট পর আটোমেটিকলি বন্ধ হওয়া লোডিং

import React, { Component } from 'react';
import { ActivityIndicator, View, 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;
    return (
      
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 70
  },
  activityIndicator: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: 80
  }
});

export default ActivityIndicatorExample;

ব্যাখ্যা

animating স্টেট ডিফল্ট true।
componentDidMount-এ ৬০ সেকেন্ড (৬০০০০ মিলিসেকেন্ড) পর setState দিয়ে false করে দেওয়া হয়েছে।
hidesWhenStopped ডিফল্ট true, তাই এনিমেশন বন্ধ হলে অটোমেটিক লুকিয়ে যাবে।

ব্যবহারিক টিপস

API কলের সময় animating: true রাখুন, রেসপন্স পাওয়ার পর false করুন।
বড় স্ক্রিনে size="large", ছোট জায়গায় size="small" ব্যবহার করুন।