react native notifee

react native cli에서 notifee로 알림 기능 구현

1. 설치

npm install --save @notifee/react-native

//For iOS
cd ios/ && pod install --repo-update
npx react-native run-ios

//For Android
npx react-native run-android

2.권한

1. AndroidMenifest.xml에 코드 작성

<!-- Androidmenifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <uses-permission android:name="android.permission.VIBRATE" />
  <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
  <uses-permission android:name="android.permission.WAKE_LOCK" />
  <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
  <uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM" />
...
  <!-- Notifee 서비스 추가 -->
      <service
        android:name="io.invertase.notifee.NotifeeService"
        android:exported="false">
        <intent-filter>
          <action android:name="android.intent.action.BOOT_COMPLETED" />
        </intent-filter>
      </service>
     
    </application>
</manifest>

VIBRATE: 진동 사용
RECEIVE_BOOT_COMPLETED: 부팅 후 자동 동작 감지
WAKE_LOCK: 기기 깨우기/유지
POST_NOTIFICATIONS: 알림 표시 권한(Android 13+)
SCHEDULE_EXACT_ALARM: 정확한 알람 예약(Android 12+)

2. MainApplication.kt 에 코드 추가

//MainApplication.kt
import io.invertase.notifee.NotifeePackage

3. Info.plist 에 코드 추가

<!--info.plist-->
<key>NSUserNotificationUsageDescription</key>
<string>알림 권한이 필요합니다.</string>

4. Podfile 에 코드 추가

    setup_permissions([
     ...
     'Notification',
    ])
   ...
      installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
          config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)']
          config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] << 'RCT_NEW_ARCH_ENABLED=1'
        end
      end
     end
    end

3. 구현

src/libs/utils/nofifee폴더를 만들어서
index.ts permission.ts schedule.ts service.ts를 만들었다.

//index.ts
import notifee from '@notifee/react-native';

// Notifee 모듈이 사용 가능한지 확인하는 함수
export async function isNotifeeAvailable(): Promise<boolean> {
  try {
    // 간단한 API 호출로 모듈이 로드되었는지 확인
    await notifee.getInitialNotification();
    return true;
  } catch (error) {
    console.error('Notifee 모듈을 사용할 수 없습니다:', error);
    return false;
  }
}

// Notifee 초기화 함수
export async function initializeNotifee(): Promise<void> {
  try {
    await isNotifeeAvailable();
  } catch (error) {
    console.error('Notifee 초기화 실패:', error);
  }
} 

//permission.ts
import notifee from '@notifee/react-native';

// 알림 권한 요청 함수
export async function requestNotificationPermission() {
  try {
    const settings = await notifee.requestPermission();
    // 권한 상태 확인 가능 (settings.authorizationStatus 등)
    return settings;
  } catch (error) {
    console.error('Notifee 권한 요청 실패:', error);
    // Notifee 모듈이 없는 경우 기본 권한 상태 반환
    return { authorizationStatus: 0 }; // 0 = NOT_DETERMINED
  }
}

//shedule.ts
import notifee, { TriggerType, RepeatFrequency } from '@notifee/react-native';

// 예약(트리거) 알림 함수: 매일 같은 시간에 알림
export async function scheduleDailyNotification(title: string, body: string, hour = 12, minute = 0) {
  try {
    const channelId = await notifee.createChannel({
      id: 'default',
      name: 'Default Channel',
    });

    const now = new Date();
    const triggerDate = new Date(
      now.getFullYear(),
      now.getMonth(),
      now.getDate(),
      hour,
      minute,
      0
    );
    // 이미 지난 시간이라면 내일로 예약
    if (triggerDate < now) {
      triggerDate.setDate(triggerDate.getDate() + 1);
    }

    await notifee.createTriggerNotification(
      {
        title,
        body,
        android: { channelId },
        ios: { sound: 'default' },
      },
      {
        type: TriggerType.TIMESTAMP,
        timestamp: triggerDate.getTime(),
        repeatFrequency: RepeatFrequency.DAILY,
      }
    );
  } catch (error) {
    console.error('알림 스케줄링 실패:', error);
  }
}

//service.ts
import notifee from '@notifee/react-native';

// Android 채널 생성 함수
export async function createAndroidChannel() {
  try {
    const channelId = await notifee.createChannel({
      id: 'default',
      name: 'Default Channel',
      importance: 4, // HIGH
    });
    return channelId;
  } catch (error) {
    console.error('Android 채널 생성 실패:', error);
    return 'default';
  }
}

// 즉시 알림 표시 함수
export async function displayNotification(title: string, body: string) {
  try {
    const channelId = await createAndroidChannel();
    await notifee.displayNotification({
      title,
      body,
      android: {
        channelId,
        pressAction: { id: 'default' },
      },
      ios: {
        sound: 'default',
      },
    });
  } catch (error) {
    console.error('알림 표시 실패:', error);
  }
}

4. 사용

그리고 사용할 곳에서 아래와 같이 테스트 코드를 써봤다. 버튼을 누르면 정상적으로 알림이 오는 것을 확인 할 수 있었다.

//아무파일.tsx
import { requestNotificationPermission } from '@notifee/permission';
import { displayNotification } from '@notifee/service';
import { scheduleDailyNotification } from '@notifee/schedule';
import { initializeNotifee, isNotifeeAvailable } from '@notifee';
...
  const [notifeeAvailable, setNotifeeAvailable] = useState(false);

 useEffect(() => {
    const initializeNotifications = async () => {
      try {
        await initializeNotifee();
        const available = await isNotifeeAvailable();
        setNotifeeAvailable(available);
        
        if (available) {
          await requestNotificationPermission();
        }
      } catch (error) {
        console.error('알림 초기화 실패:', error);
        setNotifeeAvailable(false);
      }
    };
    initializeNotifications();
  }, []);

  useEffect(() => {
    const checkNotifee = async () => {
      const available = await isNotifeeAvailable();
      setNotifeeAvailable(available);
    };
    checkNotifee();
  }, []);

      {/* Notifee가 사용 가능한 경우에만 알림 테스트 버튼 표시 */}
        {notifeeAvailable && (
          <View style={{ marginTop: 50 }}>
            <Button
              title="즉시 알림 보내기"
              onPress={() => displayNotification('즉시 알림', '이것은 즉시 알림입니다')}
            />
            <Button
              title="매일 오전 9시 알림 예약"
              onPress={() => scheduleDailyNotification('매일 알림', '매일 오전 9시에 알림이 도착합니다', 9, 0)}
            />
          </View>
        )}