@kode-stack/notification-react-native

Official React Native SDK for the TL Notification Service (supports Android & iOS with OneSignal-like simplicity).

🚀 Key Features

• Cross-Platform: Works identically on Android and iOS in React Native CLI.
• OneSignal-Like API: initialize(), login(), logout(), setTags().
• Auto Device Upsert: Captures OS, device model, timezone, and language.
• Auto Token Refresh: Listens to FCM/APNs token rotation and syncs to backend.
• Analytics & Tracking: Automatically reports DELIVERED and CLICKED events.

📦 Installation in React Native CLI

In your React Native CLI project:

# Required peer dependencies
npm install @react-native-firebase/app @react-native-firebase/messaging @react-native-async-storage/async-storage

# If using as local package:
npm install ../path/to/tl-notification-service/sdks/react-native
# OR just copy `TLNotification.ts` directly into your `src/services/` folder!

For iOS:

cd ios && pod install && cd ..

🛠️ Setup in React Native

1. In index.js or App.tsx (App Launch)

import React, { useEffect } from 'react';
import TLNotification from '@tl/notification-react-native';

const App = () => {
  useEffect(() => {
    // 1. Initialize SDK
    TLNotification.initialize({
      baseUrl: 'http://YOUR_SERVER_IP:8080/v1',
      appKey: 'tl_app_live_xxxxxxxxxxxxxxxx',
    });

    // 2. Listen for notification clicks (navigation routing)
    const unsubscribe = TLNotification.onNotificationOpened((notification) => {
      console.log('User tapped push notification:', notification.title);
      // e.g., navigation.navigate('OrderDetail', { id: notification.customData?.orderId });
    });

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

  return <YourNavigationRoot />;
};

export default App;

2. When the User Logs In:

// Links this device to their user account ID in your database:
await TLNotification.login('user_12345');

3. When the User Logs Out:

// Unlinks the device so they don't receive personal notifications after logout:
await TLNotification.logout();

4. Updating User Tags (for Segments):

await TLNotification.setTags({
  vip: true,
  country: 'KH',
  tier: 'Gold',
});

📱 Background Push Handling (Android & iOS)

In your React Native index.js:

import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import TLNotification from '@tl/notification-react-native';
import App from './App';
import { name as appName } from './app.json';

// Handle background notifications
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  const notificationId = remoteMessage.data?.notificationId;
  if (notificationId) {
    await TLNotification.trackEvent(notificationId, 'DELIVERED');
  }
});

AppRegistry.registerComponent(appName, () => App);