Loading style failed. Missing public access token?

[rapomon]

I followed all instructions of the readme document.

It was neccesary to change the import of the example from:
import MapboxNavigation from 'react-native-mapbox-navigation';
To:
import MapboxNavigation from '@homee/react-native-mapbox-navigation';

After that, the app runs correctly without errors or warnings, but I only see an empty layout of the navigation:

[rossmartin]

Hey thank you for pointing out the typo in the readme. That has been updated and published.

Do you have the ACCESS_FINE_LOCATION set in your manifest? (see "Configure permissions" here - https://docs.mapbox.com/android/navigation/guides/install/)

Also what are you using for the origin and destination prop? If you can provide a snippet of your jsx that might help.

[rapomon]

Hi!

Yes, I have the ACCESS_FINE_LOCATION permission, and I have been tuning some tweaks from the installation guide (minSdkVersion 21 instead of 19), I have changed the mapbox token with more permissions, I have used this module https://github.com/zoontek/react-native-permissions for request permission before draw the mapbox navigation component, etc.

This is my code:

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import MapboxNavigation from '@homee/react-native-mapbox-navigation';

const App: () => React$Node = () => {
  return (
    <View style={styles.flexIt}>
      <MapboxNavigation
        origin={[-97.760288, 30.273566]}
        destination={[-97.918842, 30.494466]}
        shouldSimulateRoute={true}
        onProgressChange={(event) => {
          const { latitude, longitude } = event.nativeEvent;
        }}
        onError={(event) => {
          const { message } = event.nativeEvent;
        }}
        style={styles.flexIt}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  flexIt: {
    flex: 1,
  },
});

export default App;

Thank you for your attention.

[rossmartin]

Hmm that looks correct and thank you for the details.

I'm able to run the latest version of the library with very similar code (screenshots below). Have you tried running this on ios? There was a quirk with android due to react native that was resolve in this commit 4fceba3 (see here and here if you want details on the react native quirk for android). This sounds weird but you might try changing the orientation on your android simulator while it is running. If everything shows up and renders then it is definitely due to this issue with react native that I linked.

Also I wonder if your mapbox access token has the right permissions or something is missing?

Android

iOS

[rapomon]

Hi again!

I only can testing in Android :(
After changing the orientation nothing happens, I don't think that's the problem, I'm using an unique View container with flex: 1.
I have changed the mapbox token by one with all permissions, and don't work.

I can send you the project in a zip file if you have curiosity about this issue :)

Thank you anyway, I don't want to disturb you anymore.

If you have any other idea that is welcome.

Best regards.

[andersonfaria-hotmart]

@rapomon maybe it's the RN version. I have some problem (not that you mentioned) with an older version.

[rapomon]

Thank you for the tip, I'm using the latest versions, this is my package.json

{
  "name": "mapboxnavigation",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@homee/react-native-mapbox-navigation": "^0.1.6",
    "react": "16.13.1",
    "react-native": "0.63.4"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

I'll try a previous version, what module versions are you using?

Thanks.

[rossmartin]

I have been testing using RN 0.63.3. I don't think it would make a difference between this and 0.63.4 though.

[rossmartin]

One thing worth checking is logcat in android studio. I think that could provide some clues for what is going on.

[rapomon]

I think this is the problem, but I don't know how to solve it.

I have the download token and public access token configured properly in the application, but the logs shows the access token is null

12-12 18:37:27.595 25450 25568 E Mbgl : {apboxnavigation}[Setup]: loading style failed: A valid access token parameter is required when using a Mapbox service.
12-12 18:37:27.595 25450 25568 E Mbgl : Please see https://www.mapbox.com/help/create-api-access-token/ to learn how to create one.
12-12 18:37:27.595 25450 25568 E Mbgl : More information in this guide https://www.mapbox.com/help/first-steps-android-sdk/#access-tokens.Currently provided token is: null

Am I missing something?

[rapomon]

Problem solved!!!

In AndroidManifest.xml the <meta-data android:name="MAPBOX_ACCESS_TOKEN" android:value="..." /> must be a child of the <application> tag and not a child of the root tag.

Thank you for all!

[rossmartin]

Awesome glad you got it figured out. I discovered a lifecycle issue with the android side of this wrapper and I'm working on fixing it. I'll publish a new version once I'm done.

[rapomon]

Thank you! Maybe specify in the readme where the meta-data should be added, for people who use react native without knowledge of android as me :)

[rossmartin]

Thank you! Maybe specify in the readme where the meta-data should be added, for people who use react native without knowledge of android as me :)

Yeah I'll update that before this next publish.