📢 React Native (File-base) এ Firebase Notification - FCM (TypeScript)

React Native অ্যাপে Push Notification অত্যন্ত গুরুত্বপূর্ণ ফিচার। এখানে আমরা দেখব কিভাবে Firebase Cloud Messaging (FCM) ব্যবহার করে TypeScript + File-based React Native প্রজেক্টে Notification implement করা যায়।

📌 ১. Firebase Project Setup

প্রথমে Firebase Console এ নতুন প্রজেক্ট তৈরি করুন। Android ও iOS অ্যাপ Register করুন। Google-services.json এবং GoogleService-Info.plist ডাউনলোড করুন।

android/app/google-services.json
ios/Runner/GoogleService-Info.plist

📌 ২. React Native Environment Setup (TypeScript + File-base)

React Native CLI দিয়ে Project তৈরি করুন: npx react-native init MyFCMApp --template react-native-template-typescript
প্রয়োজনীয় Firebase প্যাকেজ ইন্সটল করুন:

yarn add @react-native-firebase/app @react-native-firebase/messaging
cd ios && pod install

📌 ৩. Firebase Messaging Configuration

Messaging ব্যবহার করার জন্য Android ও iOS এ Permissions এবং Configuration করতে হবে।

AndroidManifest.xml এ Permission যোগ করুন:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

iOS এ AppDelegate.m এ Firebase import এবং configuration যোগ করুন।
Info.plist এ Push Notification permission enable করুন।

📌 ৪. FCM Service তৈরি করা (File-base)

আমরা একটি আলাদা ফাইল তৈরি করব: services/FCMService.ts যাতে notification handle করা সহজ হয়।

import messaging from '@react-native-firebase/messaging';
import { Alert, Platform } from 'react-native';

class FCMService {
  register = async () => {
    await this.requestUserPermission();
    this.createNotificationListeners();
  };

  requestUserPermission = async () => {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;

    if (enabled) {
      console.log('FCM Authorization status:', authStatus);
    }
  };

  createNotificationListeners = () => {
    // Foreground message
    messaging().onMessage(async remoteMessage => {
      Alert.alert('নতুন Notification!', remoteMessage.notification?.title ?? '');
    });

    // Background message
    messaging().setBackgroundMessageHandler(async remoteMessage => {
      console.log('Background Message:', remoteMessage);
    });
  };
}

export const fcmService = new FCMService();

📌 ৫. App.tsx এ Notification ব্যবহার করা

App component এ আমরা FCMService import করে register করব।

import React, { useEffect } from 'react';
import { SafeAreaView, Text } from 'react-native';
import { fcmService } from './services/FCMService';

const App = () => {
  useEffect(() => {
    fcmService.register();
  }, []);

  return (
    <SafeAreaView className="flex-1 justify-center items-center bg-teal-50">
      <Text className="text-teal-700 text-xl font-semibold">
        Firebase Notification Test App
      </Text>
    </SafeAreaView>
  );
};

export default App;

📌 ৬. Notification দেখানোর Output

অ্যাপ Foreground এ থাকলে notification Alert এর মাধ্যমে দেখাবে:

Foreground: পপআপ Alert দেখাবে।
Background: Console log এ দেখাবে।

// Example Notification Output
Alert: "নতুন Notification! - আপনার অর্ডার Ship হয়েছে!"
Console: Background Message: { data: {...}, notification: {...} }

✨ Summary

Firebase Project তৈরি করুন এবং App register করুন।
React Native TypeScript project setup করুন।
Firebase Messaging install ও configure করুন।
Notification handler File (services/FCMService.ts) বানান।
App.tsx এ register করুন।
Foreground ও Background Notification test করুন।

✔ এইভাবে আপনি File-base React Native + TypeScript অ্যাপে Firebase Notification (FCM) integrate করতে পারবেন। এটি অ্যাপকে আরও প্রফেশনাল এবং ইউজার-ফ্রেন্ডলি বানায়।

Firebase Cloud Messaging (FCM)