Android Auto and Carplay

[sean-pearson]

I am currently working on getting Android Auto to work with React Native and am planning on adding Carplay. I have a demo working for Android Auto but was thinking it would be more useful if I got it in an open-source project. The thing is I've never worked with an open-source project before. When I am working on cleaning it up. What should I keep in mind if I wanted to add it to this project? I love your current work! Any suggestions or advice would be greatly appreciated.

[jspizziri]

@sean-pearson , thanks for reaching out! I don't think any of us noticed this discussion so sorry for leaving you unread for 2 weeks.

All in all, Android Auto is something that we'd love to have in this library. There's been a feature request for it for a while now.

Regarding your first crack at open-source: don't sweat it! It's not too different from normal dev work and you can do it any way you like. In general, the typical flow is to fork the project you want to contribute to, implement your changes there, and then submit a PR back to the main repository from the branch containing your changes. However, you could even send us the link to your repo and we could take a cursory look at the code if that's easier for you. In general, I would encourage you not to worry about cleaning stuff up too much, there won't be any judgments from the maintainers or community for anything anyone is willing to contribute.

I think the primary thing to keep in mind for this project is that we currently support both Android & iOS. In an ideal world, we'd want a consistent react-native/js interface with both Android Auto & Carplay to simplify development for the library's users. However, sometimes that's not possible so it takes a bit of judgment. However, interface design is something that the maintainers could likely help you with/provide feedback on at an early stage. You could even simply propose your concept of how the features would work with the existing interface and get some feedback.

All in all, I'm excited to hear about your interest and looking forward to seeing what you've cooked up!

[gavrichards]

I'm not sure what you mean, a release of what?

[sean-pearson]

You integrated with Carplay. I haven't seen any mention of that in the readme or in the current code base. So I was wondering when that feature is currently being planned for release to stable?

[gavrichards]

I integrated it in our app. It's not part of the RNTP codebase.

[sean-pearson]

@gavrichards Ohhh. Sorry for my confusion.

@jspizziri I got some time to work on merging what I have for AA with RNTP.

[sean-pearson]

@jspizziri https://github.com/sean-pearson/React-Native-Car-Audio
Here is the initial repo with just the Android Auto setup. I am taking a look at merging it right now but it might take me longer than someone who is familiar with RNTP. I'll keep you updated. I also have a starting code base for CarPlay that I will be merging into that in a few weeks. Moving cross country next week so bit busy right now. lol.

[jspizziri]

CC @puckey @dcvz

[sean-pearson]

@jspizziri I'm not sure if you saw but react-native-carplay seems to have added the now-playing template. I was wondering if you had some time to get on a google meet with me so I can go over what I have done with Android Auto and get your input on how we could integrate it with react native track player. I sent an invite on LinkedIn to connect to chat if you are free.

[lovegaoshi]

Hi yall again, it seems that I'm somewhat successful at this approach. What I did was:

1. I added a function in KotlinAudio that returns the mediaSession's token.
2. I copied HeadlessJsTaskService from react-native's repository and extended MediaBrowserServiceCompat, instead of Service.
3. I changed MusicService from extending HeadlessJsTaskService to my modified, I called it HeadlessJsMediaService. From it, I specified onGetRoot() that returns just the root ("/"); onLoadChildren() that returns an empty list; and sessionToken = player.getMediaSessionToken() immediately after player is defined in setupPlayer(). Lastly and most importantly I added an if condition in onBind() that if the intent is null, I return binder; if not (which is android.media.browse.MediaBrowserService used by other services), I return super.onBind(), which is the nice service binder/interface from MediaBrowserServiceCompat.
4. Lastly all the necessary declarations in AndroidManifest.xml and other places.

This allowed me to achieve media control from both the app and android auto. I still have no idea how to build media tabs in AA with my very limited native knowledge, but it doesnt seem too hard as I just have to fiddle with onGetRoot() and onLoadChildren() to achieve the right hierarchy and navigation I wanted, plus Sean has a repository set up already to modify hierarchy. Album art also doesnt seem to show but it sure can be fixed.

I just read that the dev team decided copying over HeadlessJsTaskService is a terrible idea. Honestly it wasnt bad at all as I just inserted a few lines of import, but what about creating a MediaBrowserServiceCompat inside MusicService, passing the sessionToken as arg, declare MusicService as MediaBrowserServiceCompat as usual, but in onBind() return the MediaBrowserServiceCompat's onBind instead?

Hope someone can reproduce this! My fork is here.

[jspizziri]

@lovegaoshi We have a weekly meeting (on discord) every Tuesday at 9:30 AM ET. Would you be available during that timeslot one of these upcoming weeks to hop on? If so send me your discord handle.

[lovegaoshi]

Would love to, I'm shengus#9253 @jspizziri

[jspizziri]

@lovegaoshi just sent you a request on discord.

[lovegaoshi]

hello yall! I figured out the album art part. KotlinAudio needs to either set the IconBitmap or the IconUri of MediaDescriptionCompat as in lovegaoshi/KotlinAudio@7a3d90b.
Over this week i've been using my app left to right with android auto and it seems fine to me so far. Anyone else could reproduce this? I tried to put MediaBrowserServiceCompat inside MusicService but its throwing some errors.

[aliferov]

hello yall! I figured out the album art part. KotlinAudio needs to either set the IconBitmap or the IconUri of MediaDescriptionCompat as in lovegaoshi/KotlinAudio@7a3d90b. Over this week i've been using my app left to right with android auto and it seems fine to me so far. Anyone else could reproduce this? I tried to put MediaBrowserServiceCompat inside MusicService but its throwing some errors.

here
Hello
I implemented your fork and works very nice,

[DanielKuhn]

Hi all,
I'm currently working on integrating Android Auto and CarPlay with our react native app, which uses RNTP for audio playback:

For CarPlay, the current master of react-native-carplay by @birkir features a NowPlaying-template which integrates smoothly with RNTP, since RNTP syncs with the native iOS audio player and the NowPlaying view is accessible throughout the whole Apple ecosystem (iOS/iPadOS, watchOS, and of course CarPlay), so displaying the currently running track is as simple as playing it in RNTP and then pushing the NowPlaying template onto the CarPlay view stack.

For Android Auto there's active development in this RNTP-PR by @lovegaoshi which features the NowPlaying-template seen above.

[hallss93]

I am currently working on getting Android Auto to work with React Native and am planning on adding Carplay. I have a demo working for Android Auto but was thinking it would be more useful if I got it in an open-source project. The thing is I've never worked with an open-source project before. When I am working on cleaning it up. What should I keep in mind if I wanted to add it to this project? I love your current work! Any suggestions or advice would be greatly appreciated.

Did you do the app to Android auto? I'm trying to developer but I'm can't. I need some example to start my app.