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.

score 0 · Answer 1 · edited Sep 18 '22 at 11:41

0

Add MapboxGL.setWellKnownTileServer('Mapbox'); to header then set your Style URL to styleURL of MapView.

styleURL= {your Style URL}

edited Sep 18 '22 at 11:41

Peppermintology

9,343
3
27
51

answered Sep 13 '22 at 06:17

arman ghanaat

1

stever · Answer 2 · 2019-01-28T18:26:13.557

-1

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")

edited Jan 28 '19 at 18:26

answered Jan 28 '19 at 18:11

stever

1,232
3
13
21

Implement custom Mapbox map React Native

2 Answers2