Add CarPlay to your React Native App | SitePen

What is CarPlay?

CarPlay is an Apple car integration standard that allows you to display content from your iPhone onto your compatible car head unit and control your phone. Common uses for this include casting music from services such as Spotify or Apple Music or for trip navigation using a map application.

How does CarPlay work?

CarPlay provides a series of templates the developer can use to display application data. These are highly opinionated and ensure that the provider user interface is safe for use within a car. The availability of these templates varies depending on the type of application you are developing. For example, a navigation app can utilize a large array of templates including map controls, lists, and grids. In contrast, a fast-food ordering application is restricted to using a smaller subset of templates. For highly specialized application types such as EV Charging providers, a special Point of Interest template is provided, which displays multiple points on both a map and a list simultaneously for you.

CarPlay and React Native

Using CarPlay with React Native is a pretty new concept but there is a package available on npm called react-native-carplay which is making great progress in this area. The React Native part of this library is written in Typescript, which provides appropriate typings for use within your application. The package allows you to create most of the supported templates and control the CarPlay display stack via pushing and popping templates to and from the display. Further to this, it provides hooks for CarPlay connection/disconnection, allowing you to react accordingly within your application.

Integrate CarPlay into your React Native Application

When adding CarPlay to an existing React Native application, you really want to keep the phone and CarPlay screens in sync. This will allow you to hand off between the two when connecting/disconnecting from the CarPlay system. For example, if you’ve searched for a song on your phone and then connected to CarPlay, you would want CarPlay to start with your selected song on the screen. For this reason, it is best to create the appropriate CarPlay Template for your screen in the same location as the paired phone screen code within a or similar.

Adding a template

Let’s start by adding a simple CarPlay menu to a React Native application. When working with the CarPlay display stack, you must always have a root template. This is the base template that sits at the bottom of the display stack and usually takes the form of a GridTemplate or a MapTemplate depending on the type of application. A Grid can display up to 8 buttons along with bar buttons at the top of the screen for quick links to settings / volume / voice control etc.

Handling connect / disconnect

When working with CarPlay, we only want to render templates when we’re connected, otherwise we could easily cause an error. react-native-carplay allows us to register a connection callback on the CarPlay class to signal a connection and render our Template at that time. We can add the connection state as a dependency to the useEffect in order to ensure it runs when the connection state changes.

Updating templates

Some templates such as ListTemplate allow you to update them via an api once they have been created. For example, a list template can have its items updated via an updateSections function where sections are grouped arrays of items. The below example shows how you could update list items when new search results become available. It makes use of the useRef hook to ensure that the same List Template is used in every render.

Conclusion

Adding CarPlay to your application will help it to stand out against other applications without CarPlay support. It is being fitted by more and more car manufacturers and has been quicker to market with third-party API access than its main rival for android based phones Android Auto. Apple is adding more functionality and application types to CarPlay with each release making it a better time than ever to consider adding support to your application.

Modernizing Apps, Tools & Teams | sitepen.com | Twitter: @sitepen

Modernizing Apps, Tools & Teams | sitepen.com | Twitter: @sitepen