Crumbs

Run the application (only on real devices, viro does not work inside the emulator)

1. make sure a device is connected to your machine
2. go to crumbs/code inside your local repository and run 'react-native run-android --variant=gvrDebug'
3. a node.js-terminal should be opened, which will display your downloads when initializing the app on your mobile devive
4. the app hould open on your mobile device

App Structure

App.js combines the map- and the ar-view:

Imports

/* imported react native modules */
import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableHighlight,
} from 'react-native';

import {
  ViroARSceneNavigator
} from 'react-viro';

import Mapbox from '@mapbox/react-native-mapbox-gl';

/* viro and mapbox api keys */
var sharedProps = {
  apiKey: "2B266CD5-DAFA-462B-9FBD-5E53C107281E"
}
Mapbox.setAccessToken('pk.eyJ1IjoiYmVuam9rYSIsImEiOiJjanRtcjFmN28xNHA3M3lxanpzdnkxbTJxIn0.fYBGde3HSSTmyvpThH-0hw');

Starting Conditions

AR Scene is unset, so that Map-View gets rendered.

// Sets the default scene you want for AR and VR
var InitialARScene = require('./js/LocationBasedAR');

var UNSET = "UNSET";
var AR_NAVIGATOR_TYPE = "AR";

// This determines which type of experience to launch in, or UNSET, if the user should
// be presented with a choice of AR or VR. By default, we offer the user a choice.
var defaultNavigatorType = UNSET;

Rendering

Depending on the set mode the render function selects the correct scene to be rendered (Map or AR).

 render() {
    if (this.state.navigatorType == UNSET) {
      return this.renderMap();
    } else if (this.state.navigatorType == AR_NAVIGATOR_TYPE) {
      return this.renderAR();
    }
  }
  
  /* Map gets rendered directly to the App.js. Should be exported to an external file in the future. */
  renderMap() {
    return (
      <View style={styles.container}>
        <TouchableHighlight style={styles.buttonBlue}
          onPress={this._getExperienceButtonOnPress(AR_NAVIGATOR_TYPE)}>
          <Text style={styles.buttonText}>AR View</Text>
        </TouchableHighlight>
        <Mapbox.MapView
          zoomLevel={17}
          centerCoordinate={[this.state.longitude, this.state.latitude]}
          style={{ flex: 1 }}
          showUserLocation={true}
          onUserLocationUpdate={this.updateUserLocation()}
          logoEnabled={false}
          scrollEnabled={false} zoomEnabled={false} rotateEnabled={false} pitchEnabled={false}>
        </Mapbox.MapView>
      </View>
    );
  }
  
  /* ViroARSceneNavigator navigates to the declared AR Scene. This way the AR-Scene can embeded inside the UI. */
  renderAR() {
    return (
      <View style={styles.container}>
        <TouchableHighlight style={styles.buttonBlue}
          onPress={this._getExperienceButtonOnPress(UNSET)}>
          <Text style={styles.buttonText}>Map View</Text>
        </TouchableHighlight>
        <ViroARSceneNavigator {...this.state.sharedProps}
          initialScene={{ scene: InitialARScene }}
        />
      </View>
    );
  }

Location Based AR

For displaying an object in the direction of a location we need to calculate the AR Space coordinates of the lat/lng coordinates. To do so several steps have to be made:
1. calculate marcator coordinates from lat/lng

    var lon_rad = ((lon_deg * Math.PI) / 180.0);
    var lat_rad = ((lat_deg * Math.PI) / 180.0);
    var sm_a = 6378137.0;
    var xmeters = sm_a * lon_rad
    var ymeters = sm_a * Math.log((Math.sin(lat_rad) + 1) / Math.cos(lat_rad))
    return ({ x: xmeters, y: ymeters });

2. calculate AR Space coordinates from mercator coordinates

    var objPoint = this._latLongToMerc(lat, long);
    var devicePoint = this._latLongToMerc(this.state.latitude, this.state.longitude);
    var objFinalPosZ = objPoint.y - devicePoint.y;
    var objFinalPosX = objPoint.x - devicePoint.x;

3. rotate the object based on the devices orientation (on iOS -> viro attribute heading)

    let angle = ((this.state.heading * Math.PI) / 180);
    let newRotatedX = objFinalPosX * Math.cos(angle) - objFinalPosZ * Math.sin(angle)
    let newRotatedZ = objFinalPosZ * Math.cos(angle) + objFinalPosX * Math.sin(angle)

init a new Mapbox React Native Project

1. React Native Setup:
https://facebook.github.io/react-native/docs/getting-started
2. React Native Project Init:
react-native init
cd
npm install
3. Start React Native App:
Make sure Emulator is set up or Device is connected!
react-native run-android | react-native run-ios
4. React Native Mapbox integration (Android)
follow instructions: https://github.com/nitaliano/react-native-mapbox-gl
but use npm install --save nitaliano/react-native-mapbox-gl#master
instead of npm install @mapbox/react-native-mapbox-gl --save