Android Auto and CarPlay library support for ReactNative. This library only supports Android Auto at the moment.
This library is not published to NPM yet. So, you will have to add it like this.
yarn add https://github.com/susonthapa/react-native-vehicleThis library uses a custom reconciler to expose declarative API to the JS side. Here is how you would create a List Template.
const ListTemplate = () => {
const navigation = useCarNavigation()
return (
<list-template title={'List Template'} headerAction={{ actionType: ActionType.BACK }}>
<sectioned-item-list header='Sectioned Item List'>
<item-list>
<row key={1} title='Row One' onPress={navigation.pop} />
</item-list>
<item-list>
<row key={2} title='Row Two' onPress={navigation.pop} />
</item-list>
<item-list>
<row key={3} title='Row Three' onPress={navigation.pop} />
</item-list>
</sectioned-item-list>
</list-template>
);
};This library exposes ScreenManager and Screen components to handle the navigation. If you're familiar with react-navigation then you should feel right at home.
This is how you define your navigation stack. Note the main component should use the name root.
const Vehicle = () => {
return (
<ScreenManager>
<Screen name="root" render={GridTemplate} />
<Screen name="navigation-template" render={NavigationTemplate} />
<Screen name="list-template" render={ListTemplate} />
<Screen name="pane-template" render={PaneTemplate} />
<Screen name="place-list-map-template" render={PlaceListMapTemplate} />
</ScreenManager>
);
};
const GridTemplate = () => {
const navigation = useCarNavigation()
return (
<grid-template title="Home" headerAction={{ actionType: ActionType.APP_ICON }}>
<item-list>
<grid-item
title="List Template"
image={Image.resolveAssetSource(require('./../images/gear.png'))}
onPress={() => navigation.push('list-template')} />
<grid-item
title="Place List Map Template"
image={Image.resolveAssetSource(require('./../images/gear.png'))}
onPress={() => navigation.push('place-list-map-template')}
/>
<grid-item
title="Pane Template"
image={Image.resolveAssetSource(require('./../images/gear.png'))}
onPress={() => navigation.push('pane-template')}
/>
<grid-item
title="Navigation Template"
image={Image.resolveAssetSource(require('./../images/gear.png'))}
onPress={() => navigation.push('navigation-template')}
/>
</item-list>
</grid-template>
)
}
const ListTemplate = () => {
const navigation = useCarNavigation()
return (
<list-template title={'List Template'} headerAction={{ actionType: ActionType.BACK }}>
<sectioned-item-list header='Sectioned Item List'>
<item-list>
<row key={1} title='Row One' onPress={navigation.pop} />
</item-list>
<item-list>
<row key={2} title='Row Two' onPress={navigation.pop} />
</item-list>
<item-list>
<row key={3} title='Row Three' onPress={navigation.pop} />
</item-list>
</sectioned-item-list>
</list-template>
);
};
const PaneTemplate = () => {
return (
<pane-template title="Pane Template" headerAction={{ actionType: ActionType.BACK }}>
<pane>
<row title="Pane Item One" />
<row title="Pane Item Two" />
<row title="Pane Item Three" />
<row title="Pane Item Four" />
</pane>
</pane-template>
)
}
const PlaceListMapTemplate = () => {
return (
<place-list-map-template title='Hello World' headerAction={{ actionType: ActionType.BACK }}>
<item-list>
<row title='This is row One %d' metadata={{
place: {
location: {
lat: 39.3266,
lng: -110.9646
},
marker: {
icon: Image.resolveAssetSource(require('./../images/click.png')),
iconType: MarkerIconType.IMAGE,
}
},
distance: {
displayDistance: 100,
displayUnit: DistanceUnit.UNIT_KILOMETERS,
},
}} onPress={() => { }} />
<row title='This is row Two %d' metadata={{
place: {
location: {
lat: 29.3266,
lng: -110.9646
},
marker: {
icon: Image.resolveAssetSource(require('./../images/click.png')),
iconType: MarkerIconType.IMAGE,
}
},
distance: {
displayDistance: 100,
displayUnit: DistanceUnit.UNIT_KILOMETERS,
},
}} onPress={() => { }} />
</item-list>
</place-list-map-template>
)
}
Please make sure the template has a proper ID set.
const TestMap = () => {
const [count, setCount] = useState(0)
useEffect(() => {
const interval = setInterval(() => {
setCount((count) => count + 1)
}, 1000)
return () => {
clearInterval(interval)
}
}, [])
return (
<View style={{ width: 100, height: 100, backgroundColor: 'red' }}>
<Text>This is a TestMap {count}</Text>
</View>
)
}
const NavigationTemplate = () => {
const navigation = useCarNavigation()
return (
<navigation-template actionStrip={{
actions: [
{
actionType: ActionType.BACK,
},
{
title: 'Action One',
onPress: () => navigation.push('grid-menu'),
},
{
icon: Image.resolveAssetSource(require('./../images/click.png')),
},
{
icon: Image.resolveAssetSource(require('./../images/click.png')),
},
]
}}
mapActionStrip={{
actions: [
{
icon: Image.resolveAssetSource(require('./../images/click.png')),
},
{
icon: Image.resolveAssetSource(require('./../images/click.png')),
},
{
icon: Image.resolveAssetSource(require('./../images/click.png')),
},
{
icon: Image.resolveAssetSource(require('./../images/click.png')),
},
]
}}
destinationTravelEstimate={{
remainingDistance: {
displayDistance: 10,
displayUnit: 3,
},
destinationTime: {
timeSinceEpochMillis: 1666056013736,
id: 'America/Cayman',
},
remainingTimeSeconds: 60000,
}}
id='test-vehicle'
component={TestMap}
/>
);
};See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library