TypeError: null is not an object (evaluating 'MapboxGL.StyleURL') | (Not Expo)

[MendelBak]

Describe the bug

I'm getting this error when displaying a in a bare Android React Native application running on my physical Android device. I know that this error usually means someone is trying to run the map in an Expo application, but my solution was not ejected from Expo, as it was created as a bare project from the beginning.

Steps to reproduce the behavior.

I'm not really sure how to provide a replicable code sample without uploading my specific app configuration? I'm pretty new to app dev, so would appreciate some advice here.

Please include a single standalone React Native component.

import * as React from 'react';
import { StyleSheet } from 'react-native';
import { observer } from 'mobx-react-lite';
import { Layout } from '@ui-kitten/components';
import { useEffect, useState } from 'react';
import MapboxGL, { Logger } from '@react-native-mapbox-gl/maps';

MapboxGL.setAccessToken(
  'pk.eyJ1IjoibWVuZGVsYmFrIiwiYSI6ImNrdXd4N2hlcDBram0ydW1yYW5vaHl1ODMifQ.hGWbJhRi_1lHFrpbTZp54w',
);

const Map = observer(() => {
  const [coordinates, setCoordinates] = useState([
    35.23447631127978, 31.776887613261948,
  ]);
  useEffect(() => {
    MapboxGL.setTelemetryEnabled(false);
  }, []);

  // Hide expected warnings - see https://github.com/mapbox/mapbox-gl-native/issues/15341#issuecomment-522889062
  Logger.setLogCallback(log => {
    const { message } = log;

    if (
      message.match('Request failed due to a permanent error: Canceled') ||
      message.match('Request failed due to a permanent error: Socket Closed')
    ) {
      return true;
    }
    return false;
  });

  return (
    <Layout>
      <MapboxGL.MapView style={styles.map} styleURL={MapboxGL.StyleURL.Street}>
        <MapboxGL.Camera
          zoomLevel={16}
          followUserLocation
          centerCoordinate={coordinates}
        />
      </MapboxGL.MapView>
    </Layout>
  );
});

export default Map;

const styles = StyleSheet.create({
  map: {
    height: '100%',
  },
});

Expected behavior
Should not show an error

Actual behavior
Shows error

Versions (please complete the following information):

• Platform: Android
• Device: OnePlus 7
• Emulator/ Simulator: No
• Dev OS: Win10
  • @react-native-mapbox-gl/maps: "^8.3.0",
• "react-native": "0.64.1",

[ferdicus]

Please try to reproduce this within our /example app

Also, please be aware, that you're sharing your accessToken within your code example

Thanks

[MendelBak]

Thanks for pointing out the API key issue. Am I supposed to secure it? I did some research when trying out react-native-maps where they require you to put your API key in your AndroidManifest, and they said keeping it secret is not necessary. I assumed the same for this.

How do I go about reproducing this in the /example app? I can download it, reproduce it locally, but how do I share that with this thread without creating a new git repo every time I want to ask about a bug?

[mfazekas]

@MendelBak have you rebuilt the project with gradle/android st after npm install?!

[MendelBak]

Yep. More than once.

[mfazekas]

Please try to reproduce from an empty project and post steps here.

react-native init sample --version 0.64.1
cd sample
npm install react-native-mapbox-gl/maps@8.3.0 --save
react-native run-android

[dorthwein]

So we've run into this in production and it seems to be do to changing/loading styles and some race condition and the user location component and possibly the camera component. We've seen it pretty much go away by wrapping both components in several checks. 2 for initial load, 1 for when ever the style changes.

Finished loading and finished rendering get set to true once on initial start, then when ever we change the style, we set finishedLoadingStyle to false, then change the style, then when its done loading, it remounts the components.

hope that helps.

There is also another ticket about this here: https://github.com/react-native-mapbox-gl/maps/issues/344

          {finishedLoading && finishedLoadingStyle && finishedRendering ? (
            <Map.Camera key="mapCameraComponent" />
          ) : (
            <View />
          )}

          {finishedLoading && finishedLoadingStyle && finishedRendering ? (
            <MapboxGL.UserLocation
              animated={true}
              renderMode="native"
              androidRenderMode={"gps"}
              key="mapUserLocationComponent"
            />
          ) : (
            <View />
          )}

[cgibsonmm]

Same here getting the same error built the project directly from the guide with no errors along the way.

[mfazekas]

We'd need more info to reproduce fix the issue

[meagher43]

I am also experiencing this issue, followed the guides with no issues and am experiencing this error, using expo and react native.

[mtibaaomar]

I am also experiencing this issue, followed the guides with no issues and am experiencing this error, using expo and react native.

Same here any solution yet ?

[22419914ksa]

NO update ?