Eojin Han

https://rnfirebase.io/messaging/notifications#handling-interaction

유저가 푸시알림을 눌렀을 때 어떤 행위를 할 것인지 처리해 보자.

기본 행위는 단순히 앱을 여는 것이다.

여기서 알림에 따라 첫 화면을 다르게 한다던 지 등 작업을 가하려면 아래 함수를 이용하여 작업을 지정하면 된다.

getInitialNotification: 앱이 완전 종료된 상태에서 푸시알림을 눌렀을 때

onNotificationOpenedApp: 앱이 백그라운드에 있는 상태에서 푸시알림을 눌렀을 때

예시


import React, { useState, useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  const navigation = useNavigation();
  const [loading, setLoading] = useState(true);
  const [initialRoute, setInitialRoute] = useState('Home');

  useEffect(() => {
    // Assume a message-notification contains a "type" property in the data payload of the screen to open

    messaging().onNotificationOpenedApp(remoteMessage => {
      console.log(
        'Notification caused app to open from background state:',
        remoteMessage.notification,
      );
      navigation.navigate(remoteMessage.data.type);
    });

    // Check whether an initial notification is available
    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        if (remoteMessage) {
          console.log(
            'Notification caused app to open from quit state:',
            remoteMessage.notification,
          );
          setInitialRoute(remoteMessage.data.type); // e.g. "Settings"
        }
        setLoading(false);
      });
  }, []);

  if (loading) {
    return null;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={initialRoute}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

푸시알림 클릭 시 행위 연동

예시