Unable to receive push notification send via Firebase console in iOS using React-Native-Firebase - firebase-cloud-messaging

Question

I have tried to follow this guide https://rnfirebase.io/messaging/usage/ios-setup to set up push notifications for my React-Native application. In particular, I have done the following:
Adding Push Notification & Background Mode capabilities(with Remote fetch and background activities)
Register a key(with APNs enabled) in Apple developer account and upload it to firebase console settings with the correct KeyID(obtained when registering the key) and TeamID(obtained from developer's membership detail)
Register the App Identifier(with APNs capability). Since there are two bundle Identifiers for my project - org.reactjs.native.example.AppName and org.test.AppName, I have tried both but none works.
Register a Provisioning profile. I believe this wil automatically sync with my Xcode.
I note that I can further configure the APNs capability after registering the App Identifier, but this is not mentioned in the guide and I didn't do that:
To configure push notifications for this App ID, a Client SSL Certificate that allows your notification server to connect to the Apple Push Notification Service is required. Each App ID requires its own Client SSL Certificate. Manage and generate your certificates below.
In my React-Native application, I have the following code:
const App => {
useEffect(() => {
async function requestUserPermission() {
const authStatus = await messaging().requestPermission();
const enabled =
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL;
if (enabled) {
console.log('Authorization status:', authStatus);
}
}
requestPermission();
});
useEffect(() => {
async function getToken() {
await messaging().registerDeviceForRemoteMessages();
const token = await messaging().getToken();
console.log(token);
}
getToken();
});
...
}
After accepting the notification permission request when the app launch. This will output the FCMs token, which I use to send a test message in the Firebase console.
Did I miss any steps? Is it possible to send push notifications in React-Native debug built running under metro in the first place? Thank you in advance.

Answer 1

I figured out the problem. It is because I used a different bundle ID when building the product in XCode and when registering the identifier in Apple Developer Account. The steps by steps does work as of writing.