search

birkir / react-native-carplay

CarPlay with React Native
https://birkir.dev/react-native-carplay/
MIT License
629 stars 104 forks source link

Does this library require the mobile app to be open and the screen unlocked at all times? #109

Closed mitchdowney closed 1 year ago

mitchdowney commented 1 year ago

We just started building a podcast player using this library, and everything seems to be working well in the CarPlay Simulator, but when testing on an actual CarPlay device, it appears that the app will load as a blank screen on the actual device, unless we first open the app on the phone, and then open the app in CarPlay.

Also, after we open the app on our phone and then open CarPlay, then CarPlay will work until we lock the mobile app screen. If we lock the mobile app screen, then the CarPlay screen goes blank.

Perhaps both of these issues are rooted in a requirement that CarPlay cannot use JavaScript unless we first open the app on the mobile device, and then keep the app in the foreground so the JavaScript can continue to run?

Most CarPlay apps do not seem to have these constraints, and can run without opening the app on the phone first. Are these known limitations of using react-native-carplay vs writing CarPlay support with 100% native Swift / Objective C? Or is there something I am missing about react-native-carplay that would allow CarPlay to work without having to first open the app on the phone, and also work while the phone screen is locked?

s-maxx commented 1 year ago

Hi ! I haven't tried much in a real environment, but I know react native apps can run in the background. You need to set it up as such though, so ios does not consider it inactive and send it to sleep, have you enabled audio playback background mode ?

mitchdowney commented 1 year ago

Thanks @s-maxx! Yes we have enabled audio playback background mode.

It seems that we have it working currently. My understanding is there were 2 major things we were missing:

1) The app delegate bridge needs to be set in both the Phone and Car delegates if it isn't already set. This seems to allow the CarPlay app in standalone mode (without the mobile app already open) to use the JavaScript / React Native bridge.

2) We also ran into an issue where our onConnect handler was not getting called when we did a) had the mobile app closed, b) plugged into CarPlay, c) tapped our app icon in CarPlay.

It seems that 2) was leading to our onConnect event listener handler never getting called, because the CarPlay connect event was fired before our React Native code finished initially loading through the bridge, so by the time our onConnect listener was ready, the event had already fired so the listener missed it. We're attempting to avoid this issue by calling CarPlay.bridge.checkForConnection() in the componentDidMount of our mobile app's home screen.

In case it is useful for anyone else, here is the PR for what we have currently that seems to work as we are expecting. Sorry, it is quite messy with the commented code.

https://github.com/podverse/podverse-rn/pull/1488/files#diff-bc9f679d8199f3a13a00326d1fcc8f3fecad50cc474a75cb0b846cd0b9e6b93fR16

I'll close this issue as resolved. If anyone has related questions I will try to answer them.

DanielKuhn commented 8 months ago

After fiddling around with this topic for quite some time now, always in doubt of what's happening under the hood and seeing ever more questions around starting on CarPlay without having the app running on phone, I took the liberty to create (and document!) an example app which runs independently of the phone app and supports launching on CarPlay directly (without having the phone app running) in this PR: https://github.com/birkir/react-native-carplay/pull/158 Patches welcome, feel free to add comments and improvements.