Mapbox React Native can't access the map's methods

Question

This is probably basic, but I'm getting tripped up with the documentation between the JS Mapbox and the React Native Mapbox. I'm creating a new map instance by importing mapbox into my project via import Mapbox from '@mapbox/react-native-mapbox-gl'; and then in the render() function I'm loading the map via:

<View style={container}>
    <Mapbox.MapView
        styleURL={Mapbox.StyleURL.Light}
        zoomLevel={12}
        centerCoordinate={[lat, lng]}
        style={styles.container}
        showUserLocation
    >
    {this.renderAnnotations()}
    </Mapbox.MapView>
</View>

The renderAnnotations() function I've defined as follows:

renderAnnotations() {
        return this.state.stations.map((station, index) =>
          <TouchableHighlight onPress={this._map.flyTo.bind(this, station)} key={index}>
            <View ref={component => this._root = component}>
              <StationPoint key={station.id} station={station} />
            </View>
          </TouchableHighlight>
        );
      }

The goal is for it to render points on the map with a corresponding flyTo onPress event. The map and these points render perfectly fine, but the onpress event returns:

error "Cannot read property 'flyTo' of undefined"

On this tutorial, it suggests you can access the map using this._map. Is this correct and I'm making a different error? Or is there an alternative way for accessing the map methods? Any help is much appreciated!

abe732 abe732 · Accepted Answer · 2018-05-31T18:54:23

Figured out the answer, in case it helps someone else. I wasn't defining a ref property on the MapView. It should have had a reference defined as this._map like the following:

<View style={container}>
    <Mapbox.MapView
        ref={(c) => this._map = c}
        styleURL={Mapbox.StyleURL.Light}
        zoomLevel={12}
        centerCoordinate={[lat, lng]}
        style={styles.container}
        showUserLocation
    >
    {this.renderAnnotations()}
    </Mapbox.MapView>
</View>

Mapbox React Native can't access the map's methods

1 Answers