🔍 Offline Handling কী?

Mobile App ব্যবহারকারীরা সবসময় ইন্টারনেটে থাকে না। তাই Offline Handling মানে হলো – ইন্টারনেট না থাকলেও অ্যাপ যেন কাজ করে এবং ডেটা নিরাপদভাবে সংরক্ষণ করে রাখে।

React Native-এ Offline Handling করার জন্য আমরা সাধারণত ব্যবহার করি:

• 📶 NetInfo – Internet connection detect করার জন্য
• 💾 Cache / AsyncStorage – Local data save করার জন্য

📶 NetInfo কী?

@react-native-community/netinfo একটি লাইব্রেরি, যা দিয়ে আমরা জানতে পারি – ইউজারের ইন্টারনেট কানেকশন আছে নাকি নেই।

📦 Installation

npm install @react-native-community/netinfo
    

🧠 NetInfo ব্যবহার (TypeScript)

import NetInfo from '@react-native-community/netinfo';

NetInfo.fetch().then(state => {
  console.log('Is connected?', state.isConnected);
});
    

👉 এখানে state.isConnected true হলে ইন্টারনেট আছে, false হলে ইন্টারনেট নেই।

🔄 Live Network Status দেখানো

import { useEffect, useState } from 'react';
import NetInfo from '@react-native-community/netinfo';

const NetworkStatus = () => {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(state => {
      setIsOnline(state.isConnected);
    });

    return () => unsubscribe();
  }, []);

  return (
    
      {isOnline ? '🟢 Online' : '🔴 Offline'}
    
  );
};
    

💾 Cache / Local Storage কেন দরকার?

যখন ইন্টারনেট থাকে, তখন API থেকে ডেটা আনি। কিন্তু ইন্টারনেট না থাকলে?

👉 তখন আমরা Cached data দেখাই।

React Native-এ সাধারণত AsyncStorage ব্যবহার করা হয়।

💾 AsyncStorage ব্যবহার (TypeScript)

npm install @react-native-async-storage/async-storage
    

📥 Data Save করা

import AsyncStorage from '@react-native-async-storage/async-storage';

const saveData = async (data: any) => {
  await AsyncStorage.setItem('posts', JSON.stringify(data));
};
    

📤 Cached Data পড়া

const getCachedData = async () => {
  const json = await AsyncStorage.getItem('posts');
  return json ? JSON.parse(json) : [];
};
    

🧠 Online + Offline Logic (Real Use Case)

useEffect(() => {
  NetInfo.fetch().then(async state => {
    if (state.isConnected) {
      const response = await fetch(API_URL);
      const data = await response.json();
      saveData(data);
      setPosts(data);
    } else {
      const cached = await getCachedData();
      setPosts(cached);
    }
  });
}, []);