React-native-mapbox-gl: mapStyles are not defined

[HuiguangChu]

Error details:
Cannot read property 'mapStyles' of undefined.
Debugging with Expo

[nolan-m]

Can you share some code? Hard to tell whats wrong here.

[zaguiini]

+1

My code:

import React, { Component } from 'react'
import { StyleSheet, View } from 'react-native'

import Mapbox, { MapView } from 'react-native-mapbox-gl'
Mapbox.setAccessToken('MY_ACCESS_TOKEN') // hidden for security purposes

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

class App extends Component {
  state = {
    initialCoords: {
      latitude: -26.8261117,
      longitude: -49.2783317
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView
          ref={map => { this._map = map }}
          initialCenterCoordinate={this.state.initialCoords}
          styleURL={Mapbox.mapStyles.light}
          style={styles.container}
        />
      </View>
    )
  }
}

export default App

Without running react-native link react-native-mapbox-gl it shows that error, but with linking it suddently stops. What's going on?

I tried to comment mapStyles destructuring on index.js:19, but it looks NativeModules is undefined.

[HuiguangChu]

The same as @zaguini @nolan-m

[zaguiini]

Finally find a way! You must link the package, but react-native link is not working properly.

Also, in the documentation, I couldn't find a link to Android-particular instructions. But with a little Googling I found this: https://github.com/mapbox/react-native-mapbox-gl/blob/master/android/install.md

I had to link it manually and it worked! :)

EDIT: yes, the link to Android installation is there, but it's not that intuitive... Would make it more clear.

[nolan-m]

Yes react-native link does not work. I was able to install manually for both platforms though.

I think another problem is the Android docs say to use :reactnativemapboxgl but its actually :react-native-mapbox-gl.

[HuiguangChu]

I think another problem is the Android docs say to use :reactnativemapboxgl but its actually :react-native-mapbox-gl. fixed

[rudra0713]

Hi, I am suffering from almost the same issue but for IOS. While described android installation procedure in git docs works fine for me, in IOS, I am receiving errors like Mapboxgl.usertracking mode and Mapboxgl.styleURL are evaluated undefined. It seems like
const Mapboxgl = NativeModules.MGLModule is evaluated as undefined in the first place.

[omargera96]

@rudra0713 did u solved that problem?, idk what to do

[rudra0713]

Sorry for the delayed reply. Yes, I managed to solve it. First of all, I used cocoapad installation method. Then I added two more things in my Podfile,

1. To remove yoga error
   post_install do |installer| installer.pods_project.targets.each do |target| if target.name == 'yoga' target.build_configurations.each do |config| config.build_settings['GCC_TREAT_WARNINGS_AS_ERRORS'] = 'NO' config.build_settings['GCC_WARN_64_TO_32_BIT_CONVERSION'] = 'NO' end end end end

1. added 'tvos'
   pod 'React', path: '../node_modules/react-native', subspecs: [ # Comment out any unneeded subspecs to reduce bundle size. 'Core', 'tvOS', 'DevSupport', 'RCTActionSheet', 'RCTAnimation', 'RCTBlob', 'RCTCameraRoll', 'RCTGeolocation', 'RCTImage', 'RCTNetwork', 'RCTPushNotification', 'RCTSettings', 'RCTTest', 'RCTText', 'RCTVibration', 'RCTWebSocket', 'RCTLinkingIOS' ]