📦 React Native AsyncStorage ব্যবহার

React Native অ্যাপে যখন আমাদের ছোট ডাটা লোকালি সংরক্ষণ করার দরকার হয় (যেমন: Login Token, User Info, Theme, Settings ইত্যাদি), তখন আমরা ব্যবহার করি AsyncStorage।

🔹 AsyncStorage কী?

AsyncStorage হলো একটি key-value based local storage system, যা ডিভাইসের ভিতরে ডাটা সেভ করে রাখে।

• Local Database ছাড়াই ডাটা সেভ করা যায়
• Persistent Storage (App বন্ধ হলেও ডাটা থাকে)
• Asynchronous (Promise ভিত্তিক)
• Small data সংরক্ষণের জন্য উপযুক্ত

🔹 AsyncStorage ইনস্টল করা

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

Expo ব্যবহার করলে সাধারণত auto-link হয়ে যায়। React Native CLI হলে একবার build চালান।

📁 File Based AsyncStorage Structure

src/
 ├── storage/
 │    └── asyncStorage.ts
 ├── screens/
 │    └── HomeScreen.tsx
 └── App.tsx
  

আমরা আলাদা একটি storage ফাইল বানাবো, যাতে পুরো অ্যাপে reuse করা যায়।

📄 asyncStorage.ts (TypeScript)

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

export const saveData = async (key: string, value: string) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
    console.log('Save Error:', error);
  }
};

export const getData = async (key: string) => {
  try {
    return await AsyncStorage.getItem(key);
  } catch (error) {
    console.log('Get Error:', error);
    return null;
  }
};

export const removeData = async (key: string) => {
  try {
    await AsyncStorage.removeItem(key);
  } catch (error) {
    console.log('Remove Error:', error);
  }
};
  

📄 HomeScreen.tsx এ ব্যবহার

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import { saveData, getData, removeData } from '../storage/asyncStorage';

const HomeScreen: React.FC = () => {
  const [name, setName] = useState(null);

  useEffect(() => {
    loadName();
  }, []);

  const loadName = async () => {
    const storedName = await getData('username');
    setName(storedName);
  };

  return (
    
      
        👤 Username: {name ?? 'No Data'}
      

       saveData('username', 'Prabir')}
      />

      

       {
          removeData('username');
          setName(null);
        }}
      />
    
  );
};

export default HomeScreen;
  

📱 Output Explanation

• Save Name → AsyncStorage এ "Prabir" সেভ হবে
• Load Name → সেভ করা নাম দেখাবে
• Remove Name → ডাটা মুছে যাবে
• App Restart করলেও ডাটা থাকবে

💡 AsyncStorage ব্যবহার হয় কোথায়?

• Login Token সংরক্ষণ
• User Preference (Theme / Language)
• Onboarding Complete কিনা
• Offline Cache Data

⚠️ AsyncStorage এর সীমাবদ্ধতা

• Large data এর জন্য উপযুক্ত নয়
• Encrypted না (Sensitive data এর জন্য SecureStore ভালো)
• Query বা relation সাপোর্ট নেই