React-native-mapbox-gl: sample.js is not runnable

[YanzhuVAS]

running sample.js from ios folder get me this error:

2015-12-22 16:50:34.364 [error][tid:com.facebook.React.RCTExceptionsManagerQueue] Unhandled JS Exception: undefined is not an object (evaluating 'NativeModules.MapboxGLManager.mapStyles')

Any idea?

My setting is [email protected] react-native-mapbox-gl-2.2.0

[YanzhuVAS]

[YanzhuVAS]

'use strict';

var React = require('react-native');
var Mapbox = require('react-native-mapbox-gl');
var mapRef = 'mapRef';
var {
AppRegistry,
StyleSheet,
Text,
StatusBarIOS,
View
} = React;

var MapExample = React.createClass({
mixins: [Mapbox.Mixin],
getInitialState() {
return {
center: {
latitude: 40.72052634,
longitude: -73.97686958312988
},
zoom: 11,
annotations: [{
coordinates: [40.72052634, -73.97686958312988],
'type': 'point',
title: 'This is marker 1',
subtitle: 'It has a rightCalloutAccessory too',
rightCalloutAccessory: {
url: 'https://cldup.com/9Lp0EaBw5s.png',
height: 25,
width: 25
},
annotationImage: {
url: 'https://cldup.com/CnRLZem9k9.png',
height: 25,
width: 25
},
id: 'marker1'
}, {
coordinates: [40.714541341726175,-74.00579452514648],
'type': 'point',
title: 'Important!',
subtitle: 'Neat, this is a custom annotation image',
annotationImage: {
url: 'https://cldup.com/7NLZklp8zS.png',
height: 25,
width: 25
},
id: 'marker2'
}, {
'coordinates': [[40.76572150042782,-73.99429321289062],[40.743485405490695, -74.00218963623047],[40.728266950429735,-74.00218963623047],[40.728266950429735,-73.99154663085938],[40.73633186448861,-73.98983001708984],[40.74465591168391,-73.98914337158203],[40.749337730454826,-73.9870834350586]],
'type': 'polyline',
'strokeColor': '#00FB00',
'strokeWidth': 4,
'strokeAlpha': .5,
'id': 'foobar'
}, {
'coordinates': [[40.749857912194386, -73.96820068359375], [40.741924698522055,-73.9735221862793], [40.735681504432264,-73.97523880004883], [40.7315190495212,-73.97438049316406], [40.729177554196376,-73.97180557250975], [40.72345355209305,-73.97438049316406], [40.719290332250544,-73.97455215454102], [40.71369559554873,-73.97729873657227], [40.71200407096382,-73.97850036621094], [40.71031250340588,-73.98691177368163], [40.71031250340588,-73.99154663085938]],
'type': 'polygon',
'fillAlpha':1,
'strokeColor': '#fffff',
'fillColor': 'blue',
'id': 'zap'
}]
};
},
onRegionChange(location) {
this.setState({ currentZoom: location.zoom });
},
onRegionWillChange(location) {
console.log(location);
},
onUpdateUserLocation(location) {
console.log(location);
},
onOpenAnnotation(annotation) {
console.log(annotation);
},
onRightAnnotationTapped(e) {
console.log(e);
},
onLongPress(location) {
console.log('long pressed', location);
},
render: function() {
StatusBarIOS.setHidden(true);
return (
Set direction to 0

Zoom out to zoom level 6

Go to Paris at current zoom level {parseInt(this.state.currentZoom)}

Go to Tokyo at fixed zoom level 14

coordinates: [40.73312,-73.989],
type: 'point',
title: 'This is a new marker',
id: 'foo'
}, {
'coordinates': [[40.749857912194386, -73.96820068359375], [40.741924698522055,-73.9735221862793], [40.735681504432264,-73.97523880004883], [40.7315190495212,-73.97438049316406], [40.729177554196376,-73.97180557250975], [40.72345355209305,-73.97438049316406], [40.719290332250544,-73.97455215454102], [40.71369559554873,-73.97729873657227], [40.71200407096382,-73.97850036621094], [40.71031250340588,-73.98691177368163], [40.71031250340588,-73.99154663085938]],
'type': 'polygon',
'fillAlpha': 1,
'fillColor': '#000',
'strokeAlpha': 1,
'id': 'new-black-polygon'
}])}>
Add new marker

Open first popup

Remove first annotation

Set visible bounds to 40.7, -74.2, 40.7, -74.1

Set userTrackingMode to follow

style={styles.map}
direction={0}
rotateEnabled={true}
scrollEnabled={true}
zoomEnabled={true}
showsUserLocation={true}
ref={mapRef}
accessToken={'your-mapbox.com-access-token'}
styleURL={this.mapStyles.emerald}
userTrackingMode={this.userTrackingMode.none}
centerCoordinate={this.state.center}
zoomLevel={this.state.zoom}
onRegionChange={this.onRegionChange}
onRegionWillChange={this.onRegionWillChange}
annotations={this.state.annotations}
onOpenAnnotation={this.onOpenAnnotation}
onRightAnnotationTapped={this.onRightAnnotationTapped}
onUpdateUserLocation={this.onUpdateUserLocation}
onLongPress={this.onLongPress} />

);
}
});

var styles = StyleSheet.create({
container: {
flex: 1
},
map: {
flex: 1
},
text: {
padding: 3
}
});

React.AppRegistry.registerComponent('nmbproto', function() {
return MapExample
});

[YanzhuVAS]

fixed it, my bad, forgot to include this step at building setting of xcode.

Select your project in the Project navigator. Click Build Phases then Link Binary With Libraries. Add node_modules/react-native-mapbox-gl/ios/RCTMapboxGL/libRCTMapboxGL.a

[tharrington]

This file isn't included in my install... Is it still required?

[smartcris]

Clean install:

"dependencies": {
"react": "15.3.1",
"react-native": "0.33.0",
"react-native-mapbox-gl": "^5.0.0"
}