[RN] FCM 연결하기. 리액트네이티브 버전 : 0.71.7

까다로운 방법이라 문제였다.

무엇보다 레퍼런스 문서가 개판... ㅠㅠ

RN 관련 문서는 믿지 못하겠다...

구버전이거나 없거나...

 

안드로이드측 문제인가 했었다.

 

개발 쟁점은 두가지이다.

1. 토큰 생성(초기화 관련 문제)

2. 메시지 수신.

 

1번을 위해 세팅은 2가지이다.

1번은 리액트 네이티브를 설치.

2번은 https://console.firebase.google.com/ 에 접속하여, 프로젝트 생성.

 

프로젝트 생성 후

필요없어도, 웹버전과 안드로이드 버전을 생성한다.

 

웹버전 생성시 RN내부에서 초기화 할 부분을 작성해준다.

import messaging from '@react-native-firebase/messaging';
import firebase from '@react-native-firebase/app';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
	databaseURL: "YOUR_PROJECT_ID.firebaseio.com", // 웹버전으로 제공될때 누락된 부분. 어디서 받아야할 지 몰라서 그냥 디폴트값 넣음.
};


if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

// Register background handler
messaging().setBackgroundMessageHandler(async remoteMessage => {
  console.log('Message handled in the background!', remoteMessage);
});


const App = () => {
async function getToken() {
    try {
      // 기기 등록이 안되어있다면, 기기 토큰을 먼저 등록해야 한다.
      if (!messaging().isDeviceRegisteredForRemoteMessages) {
        await messaging().registerDeviceForRemoteMessages();
      }
      
      // 디바이스 권한 가져오기 안드로이드 13부터 생겨서 해당 부분 없으면 못 받는다.
      PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);

      // 토큰 가져오기
      const token = await messaging().getToken();
      console.log("phone token: ", token);

      // 유저 토큰 저장하기
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() => {
    getToken();

    const unsubscribe = messaging().onMessage(async remoteMessage => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
    });

    return unsubscribe;
  }, []);
  
  return (
  	....
  );
 }

해당 코드를 통해 가져올 수 있었다.

파이어베이스컨피그 상수 값을 설정하지 않으면, 해당 fcm이 초기화가 되지 않다보니 버그가 출력된다.

 

android/build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        googlePlayServicesVersion = "+"
        firebaseMessagingVersion = "21.1.0"


        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.google.gms:google-services:4.3.15' // 이부분 추가

        classpath("com.android.tools.build:gradle:7.3.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

android/app/build.gradle

apply plugin: "com.android.application"
apply plugin: "com.facebook.react"

import com.android.build.OutputFile

/**
 * This is the configuration block to customize your React Native Android app.
 * By default you don't need to apply any configuration, just uncomment the lines you need.
 */
react {
    /* Folders */
    //   The root of your project, i.e. where "package.json" lives. Default is '..'
    // root = file("../")
    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
    // reactNativeDir = file("../node_modules/react-native")
    //   The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen
    // codegenDir = file("../node_modules/react-native-codegen")
    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
    // cliFile = file("../node_modules/react-native/cli.js")

    /* Variants */
    //   The list of variants to that are debuggable. For those we're going to
    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
    // debuggableVariants = ["liteDebug", "prodDebug"]

    /* Bundling */
    //   A list containing the node command and its flags. Default is just 'node'.
    // nodeExecutableAndArgs = ["node"]
    //
    //   The command to run when bundling. By default is 'bundle'
    // bundleCommand = "ram-bundle"
    //
    //   The path to the CLI configuration file. Default is empty.
    // bundleConfig = file(../rn-cli.config.js)
    //
    //   The name of the generated asset file containing your JS bundle
    // bundleAssetName = "MyApplication.android.bundle"
    //
    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
    // entryFile = file("../js/MyApplication.android.js")
    //
    //   A list of extra flags to pass to the 'bundle' commands.
    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
    // extraPackagerArgs = []

    /* Hermes Commands */
    //   The hermes compiler command to run. By default it is 'hermesc'
    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
    //
    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
    // hermesFlags = ["-O", "-output-source-map"]
}

/**
 * Set this to true to create four separate APKs instead of one,
 * one for each native architecture. This is useful if you don't
 * use App Bundles (https://developer.android.com/guide/app-bundle/)
 * and want to have separate APKs to upload to the Play Store.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
 */
def enableProguardInReleaseBuilds = false

/**
 * The preferred build flavor of JavaScriptCore (JSC)
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US. Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

/**
 * Private function to get the list of Native Architectures you want to build.
 * This reads the value from reactNativeArchitectures in your gradle.properties
 * file and works together with the --active-arch-only flag of react-native run-android.
 */
def reactNativeArchitectures() {
    def value = project.getProperties().get("reactNativeArchitectures")
    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
}

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    namespace "com.fcmtest2"
    defaultConfig {
        applicationId "com.fcmtest2"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }

    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include (*reactNativeArchitectures())
        }
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // https://developer.android.com/studio/build/configure-apk-splits.html
            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
            }

        }
    }
}

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")

    implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

 

android/app/src/main/AndroidManifest.xml을 건드리라고 하는 것도 있던데, 그냥 안건드려도 된다.

위 내용을 첨부한 이유는 firebase가 근본적으로 문제 있어서 이상한 native 또는 web용 코드가 혼재되어 있어,

RN설정과 다르기에 해당 내용을 작성하였다.

 

 

해당 설정 다했는데, 안된다? 그러면 그냥 안드로이드 에뮬을 끄고, 안드로이드 에뮬 설정 중 wipe data로 데이터 삭제 후 재빌드해보면 정상적으로 수신되더라.

 

 

---

참고 문서

https://rnfirebase.io/

React Native Firebase | React Native Firebase

https://rnfirebase.io/messaging/usage

메시지 관련하여, 권한 설정을 요청하는 등의 코드가 적힌 레퍼런스 문서

Cloud Messaging | React Native Firebase

 

 

GET 토큰에 관련해서 봤던 문서.

https://jake-seo-dev.tistory.com/295

리액트 네이티브 푸시 알람 보내는 방법

 

흐름에 관련한 내용 참조

https://falsy.me/react-native%EC%97%90%EC%84%9C-fcm%EC%9D%84-%ED%86%B5%ED%95%9C-%EC%95%8C%EB%A6%BC-%EC%88%98%EC%8B%A0%ED%95%98%EA%B8%B0android/

폴시랩

https://velog.io/@kwonh/ReactNative-%ED%91%B8%EC%89%AC%EC%95%8C%EB%A6%BC-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-Firebase-Cloud-Messaging-react-native-firebase-notification-%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C

[ReactNative] 푸쉬알림 공식문서 따라하기 - (Firebase Cloud Messaging, @react-native-firebase, notification) 안드

 

해당 내용을 바탕으로 추가된 로직을 고려할만한 코드

https://yangeok.github.io/reactnative/2020/06/07/fcm-push-notification.html

Yangeok