-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[📚] New setup guide for iOS Credentials in RN 0.77 #8248
Comments
Hi there - please just hit the edit button top right of the page and propose a change |
@mikehardy I apologize, as I’m new to React Native and am unsure how to make the change. 😁 |
Created a PR here #8251 |
Thank you for your guidance and PR. Similarly, do you have a guide to enable Multidex on Swift? Similarly, do you have a guide to configure Cloud Messaging in Swift? Or was the problem solved from a more fundamental point in RN 0.77? I couldn't find any documentation on this. I noticed that the documentation of rnfirebase.io is old. I'm currently trying to update ReactNative 0.72 to 0.77, so I need to adapt many packages back to 0.77. |
The documentation on rnfirebase.io is as new as we have it, if there is something out of date there is an edit button top right of every page and the github PR flow in their web UI for text changes is trivial. I imagine since you mention react-native 0.77 you have noticed that react-native now uses AppDelegate.swift vs .mm. Please feel free to post a PR Multidex was a workaround for old Android devices that are no longer supported, and we may all happily forget about multidex forever. And you never ever needed to think about it for iOS, it was an Android thing. You will never need it with modern Android. |
Hi,
Thanks in advance for your advice. |
Please can you guys update this and the docs as soon as possible, cause we are stuck here. |
This is the updated Doc of react native 0.77 with firebase. How can you modify appdelegate.swift to integrate the firebaseuse this to import firebase import Firebase use this to initialize firebase |
App started crashing after FirebaseApp.configure() "@react-native-firebase/app": "^21.7.2", Do I also need to change Podfile |
Please mention your podfile here |
This comment has been minimized.
This comment has been minimized.
@AnmolMalik-BWES, After some digging I achieved it and made a guide on the medium for the react-native 0.77 I hope it helps https://medium.com/@ompbarot9816/firebase-and-google-maps-for-react-native-0-77-full-guide-8fb9646b7ef5 I'm using react-native-firebase version 20.5.0. please let me know if I can help. |
@vishalksymentix and @Barot-sam, I plan to try out your solutions as soon as possible. I’ll share my experience here, letting you know whether the solution works and if I run into any issues. For now, I’ve implemented it as shown below and will continue with my work. I was facing unexpected crashes with Swift integration, so I temporarily switched back to Objective-C (.mm files) in RN 0.77. I followed these instructions to resolve the issue. This workaround is running smoothly for now, and I'll update once I get a stable Swift solution. Below is the code I used: AppDelegate.mm file:
AppDelegate.h file:
|
@tahaipek, Sorry I was busy with some issues, I'm currently using the swift in my project and it is working smoothly from last 1 week, can you show me the errors that you face? it will help me solve your issue, and also put up more details in my article which will help more developers out there. |
@tahaipek Hi, may i know if your react native project enabled new architecture for iOS? I have the same settings as yours, but notifications with ios devices in quit state do not work properly. I'm using react native v0.76.7, react-native-firebase/messaging v21.10.1 |
@aliceni81 hi, new architecture is active in my PodFile. "@react-native-firebase/messaging": "21.7.1" Podfile:
|
@aliceni81 I was testing iOS quit state messaging via a handler set in |
Thanks @tahaipek and @mikehardy for your information. |
@aliceni81 - if the problem you are having is that the isHeadless prop isn't set correctly in appProperties, I think my comment on that related issue is the actual path forward - I'm not sure exactly how to do it but the pseudo-code I typed out in the comments in there is the outline of the process. Basically you need to execute the appProperties set at a different point in the app bootstrap, which you can hook into by observing for that event. Then you get handle on the react-native objects and stuff the isHeadless in the appProperties then based on foreground or background the handler itself - setBackgroundMessageHandler - is working though |
@tahaipek May I know if you use the headlessCheck in your project react native 0.77.0?
|
Yes, I use it a little bit. How do you want me to test it? I'm writing a code example for you below. You can also check this document if it helps: https://notifee.app/react-native/docs/integrations/fcm App.js
AppHeadless.js
PushNotificationForegroundEventHook.js
|
@tahaipek I need your help to test if your app is in the quit state. When receiving a notification and you open your app, will your app display |
By the way, according to Mike, the codes should be |
Yes it works exactly as you said. It works as “<></>” when the application is in the background/passive and when the application is active. I'm also migrating from version 0.72 to 0.77.0/0.77.1. Thanks for fixing such situations that I can miss. |
With new architecture enabled, for quit, isHeadless won't be changed to false when opening the app at the first time.. |
@tahaipek Can you confirm that the value of isHeadless is not correct with the new architecture in react native v0.77.1 when opening the app after receiving a notification in quit state? |
@aliceni81 I'm encountering the problem you describe. |
@huanguolin Thank you for your confirmation. Mike has provided some ideas to address the issue, but since I'm new to React Native, I'm still struggling.. facebook/react-native#48551 (comment) |
Thank you for the information! I'll give it a try tomorrow and sync my results here. |
Hey @aliceni81 and @huanguolin I don't have time for what I consider the most valuable + most difficult part - which is thorough testing to make sure this works, using debug logs in various spots to print out easily-searched-for strings and Console.app to look for them while app is running - but I added lots of implementation notes to the comment you link, with direct links to code examples for every step of the algorithm to implement in that listener facebook/react-native#48551 (comment) Hopefully it helps as there examples now of getting the RCTRootView, determining foreground/background state, opening a main queue block, injecting something new into the appProperties and setting that |
@mikehardy I really appreciate the solution you provided. However, since I am not familiar with the obj-c/swift code, I didn't try it (I’m not confident that I can piece these together and make it work 😅 ). export const App = ({ isHeadless }: { isHeadless: boolean }) => {
const [shouldRenderUI, setShouldRenderUI] = useState(!isHeadless);
useOnAppStateChange(
useCallback(async (appState) => {
if (Platform.OS === 'ios') {
const isHeadlessValue = await messaging().getIsHeadless();
setShouldRenderUI(!isHeadlessValue);
}
}, []),
);
return shouldRenderUI ? <AppCore /> : <></>;
}; |
@huanguolin Thanks for your work! For the above codes, may I know if I need to remove the firebase settings in AppDelegate.mm? |
😄 // 'isHeadless' value come from the native
export const App = ({ isHeadless }: { isHeadless: boolean }) => { |
@huanguolin if that's the case then you may simply be winning a race condition right now. For those that lose it, the problem is that the modified app properties are not set in to the react native context if the javascript interpreter was still loading the bundle, see facebook/react-native#20115 (comment) This problem is upstream in react-native, you may win the race, you may not. And whether you win it or not may be stable depending your specific app (it may load the bundle faster or slower, depending on bundle size/complexity, and that's stable on a per-app basis). This is not fully reliable though and cannot be recommended as a general solution, since some may lose the race nearly every time. The only general solution is to set app properties in native code after the bundle loads, every time. That's accomplished with the example algorithm I posted that adds an observer to the native event triggered after the bundle loads, and setting the app property then. Guarantees that you aren't in a race, should work every time and be a general solution |
Thank you for your comment and for pointing out the concerns regarding my solution. Since I am not familiar with the startup process of React Native, I couldn’t fully understand the issue you raised. Please allow me to discuss it further with you here. First, let me explain my solution: Premise:
The problem: My solution:
Code to listen for AppStateStatus changes: import { useEffect, useRef } from 'react';
import { AppState, AppStateStatus } from 'react-native';
export function useOnAppStateChange(handleAppStateChange: (status: AppStateStatus) => void) {
const handler = useRef(handleAppStateChange);
useEffect(() => {
handler.current = handleAppStateChange;
}, [handleAppStateChange]);
useEffect(() => {
// Initial check
handler.current(AppState.currentState);
// Check when appState changes
const listener = AppState.addEventListener('change', (appState: AppStateStatus) => {
handler.current(appState);
});
return listener.remove;
}, []);
} According to my testing and understanding, the execution flow of my solution is as follows:
This is my proposed solution, and I’d appreciate it if you could point out any stage where there might be an issue or if I’ve misunderstood anything. Additionally, I’m using React Native 0.77 with the new architecture. Is the bridge still present in this version? 😃 |
Hi @huanguolin I confirm your workaround does work! Thanks. |
@aliceni81 You're welcome! I'm glad this was helpful to you. 😃 |
@huanguolin I think you may be on to something, I hadn't thought of the There is a lot of code in the iOS area here involved in keeping the isHeadless state updated, involving a listener to the "on notification launched app" iOS native event and the "application entered foreground" iOS native event Both should be making it so your basic assumption:
...is true. It really should be true. Given that, using it at the javascript level as a gate to whether you render the whole app or not should be an effective solution however you want to do it. Note that I don't think you need to be as careful about transitioning from "we are foreground" to "we are background". At that point the app is already rendered, and iOS will terminate it shortly in the background anyway (so you'll start fresh again...). Our code essentially ignores that transition since maintaining the already rendered app for slightly longer than necessary really has no cost. The only one you really need to pay attention to is when you go from headless (no app rendered / blank screen) to foreground. Getting that wrong breaks everything. I'm going to do some testing to verify this works well and if it does then I think the recommended approach should move to using javascript level check with the existing messaging.isHeadless as you are doing. |
@mikehardy I’m truly thrilled that my proposal got your approval!
Are you suggesting changing it to this? Or perhaps there's a more efficient way... export const App = ({ isHeadless }: { isHeadless: boolean }) => {
const [shouldRenderUI, setShouldRenderUI] = useState(!isHeadless);
useOnAppStateChange(
useCallback(async (appState) => {
if (Platform.OS === 'ios' && appState === 'active') { // <=== Here
const isHeadlessValue = await messaging().getIsHeadless();
setShouldRenderUI(!isHeadlessValue);
}
}, []),
);
return shouldRenderUI ? <AppCore /> : <></>;
}; Either way, we're excited to see your testing and to work toward an efficient, complete, and universal solution together. |
I think Mike means that we only need to use getIsHeadless() when the device is iOS, isHeadless is true and the app state changes from inactive to active? |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
My IOS app is crashing is also crashing on this. Anyone know why? |
import from FirebaseCore and check the .plist file. |
what to check on .plist file? |
I mean GoogleService-Info.plist file if it doesn't exist it crashes. |
import UIKit @main
} override func sourceURL(for bridge: RCTBridge) -> URL? { override func bundleURL() -> URL? { override func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) { this is the working one |
https://medium.com/@wasi.mirza/react-native-0-78-firebase-phone-authentication-step-by-step-guide-af85be0a0621 |
Starting with RN 0.77
/ios/{projectName}/AppDelegate.mm
is removed and changed toAppDelegate.swift
The text was updated successfully, but these errors were encountered: