Offline Handling in React Native – NetInfo & Cache

মোবাইল অ্যাপ সবসময়ই ইন্টারনেট থাকবে—তা নয়। ব্যবহারকারী অনেক সময় low network বা completely offline অবস্থায় অ্যাপ ব্যবহার করে। তাই একটি ভালো React Native অ্যাপের জন্য Offline Handling খুবই গুরুত্বপূর্ণ।

Offline Handling মানে ইন্টারনেট না থাকলেও অ্যাপ যেন কাজ করতে পারে, ডাটা দেখাতে পারে, এবং ব্যবহারকারী যেন smooth experience পায়। React Native-এ এই কাজের জন্য দুটি গুরুত্বপূর্ণ টুল আছে:

• NetInfo → ডিভাইসের নেটওয়ার্ক স্টেট জানার জন্য
• Cache / AsyncStorage → Offline Data Store করার জন্য

---

🔍 Offline Handling কেন দরকার?

• ব্যবহারকারী ইন্টারনেট ছাড়াই পুরনো ডাটা দেখতে পারবে।
• অ্যাপ Crash করবে না বা Blank Screen দেখাবে না।
• Better User Experience (UX)।
• লোড কম লাগে সার্ভারে।
• ফোনের নেটওয়ার্ক কম থাকলেও অ্যাপ run করবে ঠিকমতো।

---

📡 NetInfo – ডিভাইস online বা offline কিনা দেখার সিস্টেম

@react-native-community/netinfo প্যাকেজ ব্যবহার করে আপনি জানতে পারবেন:

• ডিভাইস online নাকি offline
• কোন নেটওয়ার্কে আছে (WiFi / Mobile Data)
• Internet reachable কিনা

👉 Install NetInfo

npm install @react-native-community/netinfo
    

📌 Online / Offline Status Check

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

export default function App() {
  const [isConnected, setIsConnected] = useState(true);

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

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

  return (
    
      
        {isConnected ? "🟢 Online" : "🔴 Offline"}
      
    
  );
}
    

উপরের কোডটি অ্যাপ চালু থাকা অবস্থায় নেটওয়ার্ক স্টেট চেক করতে থাকবে।

---

⚠ Offline UI দেখানোর উদাহরণ

{!isConnected && (
  <View style={{ backgroundColor: '#f87171', padding: 10 }}>
      <Text style={{ color: '#fff' }}>আপনি এখন Offline!</Text>
  </View>
)}
    

ইন্টারনেট না থাকলে স্ক্রিনে লাল ব্যানার show হবে।

---

📦 Cache / AsyncStorage – Offline Data Store

ইন্টারনেট না থাকলে অ্যাপ যেন ডাটা দেখাতে পারে, এজন্য ডাটাকে local storage-এ cache করে রাখা হয়।

👉 Install AsyncStorage

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

📌 API Data Cache করার উদাহরণ

import AsyncStorage from "@react-native-async-storage/async-storage";
import NetInfo from "@react-native-community/netinfo";

export async function fetchUserData() {
  const net = await NetInfo.fetch();

  if (!net.isConnected) {
    // Offline → Cached data load
    const cachedData = await AsyncStorage.getItem("users");
    return JSON.parse(cachedData);
  }

  // Online → API call
  const response = await fetch("https://api.example.com/users");
  const data = await response.json();

  // Cache store
  await AsyncStorage.setItem("users", JSON.stringify(data));

  return data;
}
    

✔ প্রথমে NetInfo দিয়ে ইন্টারনেট আছে কিনা চেক করা হচ্ছে ✔ Offline থাকলে cached data return ✔ Online থাকলে API hit → তারপর ডাটা cache করে রাখা হচ্ছে

---

🔁 Auto Retry When Online

নেটওয়ার্ক ফিরে আসলে API আবার কল করার ফিচার add করতে পারেন:

NetInfo.addEventListener(state => {
  if (state.isConnected) {
    fetchUserData(); // Auto retry
  }
});
    

---

💡 Offline Handling Best Practices

• সব important API response cache করুন
• Offline UI message দিন
• নেটওয়ার্ক ফিরে আসলে Auto Sync/Retry দিন
• Cache storage limit maintain করুন
• Redux Persist ব্যবহার করতে পারেন (better caching)

🎉 Conclusion

Offline Handling একটি professional App-এর জন্য অত্যন্ত জরুরি ফিচার। NetInfo ব্যবহার করে user-এর connectivity track করা যায় এবং AsyncStorage / Cache ব্যবহার করে Offline-State-এও ডাটা দেখানো যায়। আপনার অ্যাপ যদি real users ব্যবহার করে — তাহলে Offline Experience অবশ্যই Add করা উচিত।