Implement custom Mapbox map React Native

Question

I'm currently trying to implement a custom map I created in Mapbox Studio, into my RN app. This is how the code looks:

render() {
 const {StyleURL} = 'url';
 const {mapLight} = 'url';
 return(
   <View style={styles.container}>
   <Mapbox.MapView
       accessToken={'token'}
       styleURL= {mapLight}
       zoomLevel={16}
       centerCoordinate={[this.state.xCoord, this.state.yCoord]}
       style={{flex: 1}}
       showUserLocation={true}
       pitchEnabled={false}>

   </Mapbox.MapView>
   </View>
 )

}

I do achieve a map view when on my app, however, it is not the map I designed in Mapbox studio. Yes, I am using the right style url, yes, it's the right access token. Any help/explanation on why this is the case? Thanks, I'll truly appreciate any insight at this point.

stever stever · Accepted Answer · 2019-01-28T18:11:56

Given the information at hand, this is a pretty foolproof option: Download the style from Mapbox Studio dashboard per the picture above, and require it in your component that contains the map.

const mapboxStyle = require("./downloadedFolderName/style.json")

Implement custom Mapbox map React Native

1 Answers