🔔 React Native (TypeScript) – Local Notifications

Local Notification হলো এমন একটি নোটিফিকেশন যা ইন্টারনেট ছাড়াই মোবাইল ডিভাইসে কাজ করে। React Native অ্যাপে এটি ব্যবহার করা হয় reminder, alert, task notification, বা offline based event এর জন্য।

১️⃣ Local Notification কী?

Local Notification হচ্ছে এমন নোটিফিকেশন যা:

• ডিভাইসের ভিতর থেকেই trigger হয়
• Server বা API লাগে না
• App বন্ধ থাকলেও দেখানো যায়
• Alarm, Reminder, Task Alert এর জন্য ideal

২️⃣ Required Package Install

Expo ব্যবহার করলে Local Notification সেটআপ করা খুব সহজ।

npm install expo-notifications
  

৩️⃣ File Based Folder Structure

src/
 ├── notifications/
 │    └── localNotification.ts
 ├── screens/
 │    └── HomeScreen.tsx
 └── App.tsx
  

৪️⃣ Local Notification Utility File (TypeScript)

localNotification.ts ফাইলে আমরা notification logic রাখবো।

import * as Notifications from 'expo-notifications';

export const scheduleLocalNotification = async () => {
  await Notifications.scheduleNotificationAsync({
    content: {
      title: '📢 Reminder',
      body: 'আজ React Native পড়াশোনা করার সময় হয়েছে!',
    },
    trigger: {
      seconds: 5,
    },
  });
};
  

৫️⃣ Notification Permission Request

Android এবং iOS-এ নোটিফিকেশন দেখানোর আগে permission নিতে হয়।

import * as Notifications from 'expo-notifications';

export const requestPermission = async () => {
  const { status } = await Notifications.requestPermissionsAsync();
  return status === 'granted';
};
  

৬️⃣ Home Screen থেকে Notification Trigger

এবার HomeScreen.tsx থেকে notification call করবো।

import { View, Text, Pressable } from 'react-native';
import { scheduleLocalNotification } from '../notifications/localNotification';

export default function HomeScreen() {
  return (
    
      
        Local Notification Demo
      

      
        
          Send Notification
        
      
    
  );
}
  

৭️⃣ App.tsx Configuration

import * as Notifications from 'expo-notifications';

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});
  

৮️⃣ Output (Expected Result)

✅ Summary

• Local Notification offline কাজ করে
• Expo Notifications সবচেয়ে সহজ solution
• File based structure code clean রাখে
• TypeScript ব্যবহার করলে error কম হয়