For newest version of firebase 15.1.1 with react-native 0.69.1 no need to enable use_frameworks because it will lead to errors in deploying in real devices
So you just need to add the firebase modulars and set headers to true.
pod 'Firebase', :modular_headers => true
pod 'FirebaseCore', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true
$RNFirebaseAsStaticFramework = true
And keep using flipper
use_flipper!()
I tested it on both Android and IOS on real devices and it works great!
Here is what my Podfile looks like
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '12.4'
install! 'cocoapods', :deterministic_uuids => false
target 'myApp' do
config = use_native_modules!
flags = get_default_flags()
pod 'Firebase', :modular_headers => true
pod 'FirebaseCore', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true
$RNFirebaseAsStaticFramework = true
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => flags[:hermes_enabled],
:fabric_enabled => flags[:fabric_enabled],
# An absolute path to your application root.
:app_path => "#{Pod::Config.instance.installation_root}/.."
)
target 'myAppTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
end
end
-
UPDATED 20/Jul
If you wanted to use rich content notifications like notifications with images. Following this article by firebase will ask you to enable use_frameworks as well so my solution for that is to use modular_headers => true for the following packages
target 'richNotification' do
pod 'FirebaseCoreInternal', :modular_headers => true
pod 'Firebase/Messaging', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true
end
NOTE: Make sure richNotification target is at the bottom of the podfile. see below how my final podfile looks like
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '12.4'
install! 'cocoapods', :deterministic_uuids => false
target 'MyApp' do
config = use_native_modules!
flags = get_default_flags()
# use_frameworks! :linkage => :static
pod 'Firebase', :modular_headers => true
pod 'FirebaseCore', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true
$RNFirebaseAsStaticFramework = true
# Flags change depending on the env values.
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => flags[:hermes_enabled],
:fabric_enabled => flags[:fabric_enabled],
# An absolute path to your application root.
:app_path => "#{Pod::Config.instance.installation_root}/.."
)
target 'MyAppTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
end
end
target 'richNotification' do
pod 'FirebaseCoreInternal', :modular_headers => true
pod 'Firebase/Messaging', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true
end
I tested it on both Android and IOS, it works great!!
For Testing
Send the following JSON data to https://fcm.googleapis.com/fcm/send as a"POST", and make sure to put in the headers "mutable-content": "1", See the screenshot below
{
"to": " Put here your mobile fcm token ",
"notification": {
"title": "You have received a new request",
"body": "Radiohead - Street Spirit (Fade Out)",
"content_available" : "true",
"priority" : "high",
"sound":"defualt",
"image": "https://i.ytimg.com/vi/LCJblaUkkfc/hq720.jpg"
},
"android": {
"priority": "high",
"notification": {
"imageUrl": "https://www.youtube.com/watch?v=o3mP3mJDL2k"
}
},
"apns": {
"payload": {
"aps": {
"mutable-content": "1",
"content-available": "true",
},
"imageUrl": "https://i.ytimg.com/vi/panR4xwt0wM/hqdefault.jpg",
"fcm_options": {
"imageUrl": "https://i.ytimg.com/vi/panR4xwt0wM/hqdefault.jpg"
}
},
"headers": {
"mutable-content": "1",
"apns-push-type": "background",
"apns-priority": "5",
"apns-topic": "com.paidtabs"
}
},
"webpush": {
"headers": {
"image": "https://koenig-media.raywenderlich.com/uploads/2021/01/good_news_petsicon.png"
}
},
"data":{
"passingDataToApp" : "Mario",
"body" : "great match!",
"Room" : "PortugalVSDenmark"
}
}
Headers look like
