Add CarPlay to your React Native App | SitePen

What is CarPlay?

As CarPlay advances with each iOS release, more and more app categories are added, opening the door for more third-party apps to be created and accessed on your car head unit. Recently added categories include fast-food ordering apps and EV charging discovery apps which means that CarPlay is becoming more accessible than ever and is being added to an increasing number of apps.

How does CarPlay work?

CarPlay and React Native

Getting setup with this package requires a little bit of native code, but once this is done, everything should be done in the React Native side from then on. You can find full instructions for these steps in the package’s readme. For this reason, react-native-carplay is not supported in a managed expo environment at this time as this setup does not allow you to edit any of the native code yourself without first ejecting from the managed workflow.

When wishing to publish a CarPlay application to the app store, you must have requested the appropriate entitlements from Apple. However, during development, you can use the built-in CarPlay simulator. The latest iOS 14 simulator appears to be fully featured and acts almost identically to a physical CarPlay unit.

Integrate CarPlay into your React Native Application

Adding a template

Here you can see that we have created a new GridTemplate and called CarPlay.setRootTemplate within a useEffect. This ensures that this code is called only once and does not recreate the CarPlay template on every re-render of the react component because there are no dependencies passed to the useEffect.

Handling connect / disconnect

In the above example we’ve used both the connected state of the CarPlay class and the registerOnConnect function to ensure our grid template is created and torn down when connected and subsequently disconnected from a CarPlay display. Adding carPlayConnected as a dependency of the second useEffect ensures that the function runs whenever the value changes. In more complicated examples, you may need to store a reference to the template you have created between renders using the hook. In this case, the return statement of your useEffect is even more important as this is where you would remove your references and perform any necessary clean up operations.

Updating templates

As you can see in the above example, the onResults callback is calling the updateSections function on the listTemplate which is in turn displaying those new list items on the CarPlay screen. Creating a ref to the List Template and calling the update function in this way means that it will not have to recreate an entirely new template on each change and will provide the user with a better experience. More information about what is possible with each template can be found in the Apple CarPlay documentation. At this point, not all functionality is fully implemented in the react-native-carplay package but it is getting better over time and we at SitePen are actively contributing to its development.


Until recently, adding CarPlay support to a react native application would have meant writing a great deal of native code yourself but the react-native-carplay package solves this problem for you and provides you with a type-safe library to use in your React Native application. A more complete application example can be found in the /example directory of the react-native-carplay GitHub repository.

Originally published at on April 8, 2021.



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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store