react-native-vehicle

Android Auto and CarPlay library support for ReactNative. This library only supports Android Auto at the moment.

Android Auto

⚠️This is still a WIP, so use it at your own risk.⚠️

Installation

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-vehicle

Usage

This 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>
  );
};

Navigation

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>
  );
};

Templates

Grid Template

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>
  )
}

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>
  );
};

Pane 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>
  )
}

PlaceListMap 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>
  )
}

Navigation 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}
    />
  );
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library