Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
  • Jan 31 2019 23:05
  • Jan 31 2019 19:48
    mwebdev1 edited #1496
  • Jan 31 2019 19:43
    mwebdev1 edited #1496
  • Jan 31 2019 19:42
    misaku opened #1497
  • Jan 31 2019 19:41
    mwebdev1 edited #1496
  • Jan 31 2019 19:41
    mwebdev1 opened #1496
  • Jan 31 2019 19:37
  • Jan 31 2019 19:29
    JGeraldoLima commented #1409
  • Jan 31 2019 19:27
    JGeraldoLima commented #1409
  • Jan 31 2019 19:27
    JGeraldoLima commented #1409
  • Jan 31 2019 16:14
    klase edited #1495
  • Jan 31 2019 16:14
    klase edited #1495
  • Jan 31 2019 16:12
    klase opened #1495
  • Jan 31 2019 13:58
    vedovato commented #1375
  • Jan 31 2019 13:52
    vedovato commented #1375
  • Jan 31 2019 13:08
    xuopled opened #1494
  • Jan 31 2019 11:14
    xuopled opened #1493
  • Jan 31 2019 06:04
    DennisMuchiri commented #771
  • Jan 31 2019 02:09
    christianbermejo starred mapbox/react-native-mapbox-gl
  • Jan 31 2019 02:04
    RobertStuff commented #971
How can I customize the style of the map?
Can you provide me a sample code, please?
4 replies
Leonam de Paula
Hello everyone! Does anybody know how to apply stretchable properties for images in SymbolLayer like this tutorial for web: https://docs.mapbox.com/mapbox-gl-js/example/add-image-stretchable ?
Joey Fenny
1 reply
Looks like this repo's been abandoned? https://github.com/mapbox/react-native-mapbox-ar
Or is there a better way now?
Renato Ferreira
Hi guys,
I am new here and I am searching for a good guide for stating using search api from mapbox with react native. Do you suggest any reference?
1 reply
Aashish Patil
Hello, I need to check if the User Location is inside a Boundary/Shape Source. What method should I use? I am using UserLocation and ShapeSource to draw the Boundary.
1 reply
Hello, I want to know if I can get offline pack size before starting to download it.
Vitor Lima
Hey Guys.
I just integrated mapbox with react native, and I am looking for a way to add mapTiler tiles on maplibre (mapbox overwrited). Do someone have any suggestions in order to accomplish this?
1 reply
Ashish N
I want to add an accessibilitylabel (https://reactnative.dev/docs/accessibility#accessibilitylabel) to elements inside the map. As of now, it gets rendered as an android.widget.FrameLayout on Android. I haven't checked it on iOS. Has anyone out here managed to add accessibility labels to items (MapboxGL.SymbolLayer) inside a map?
Hi, who please can help me with this issue ? I did not found answer for this , I want to show to the user the size of the pack he is going to download for offline use
I want to know if I can get offline pack size before starting to download it.
2 replies
Jon Nehring
Hi, all. I'm looking for any help I can get on loading in a 3rd-party vector tile source and using its style.json file to add and style a layer. Any sort of example would be greatly appreciated. Thank you.
1 reply

Hey all, I've got a seemingly beginner question. In the ShapeSource docs (https://github.com/react-native-mapbox-gl/maps/blob/master/docs/ShapeSource.md) when trying to get the zoom to break a cluster, the docs show the methodshapeSource. getClusterExpansionZoom. What is shapeSource in this case? I tried using a ref to the shapesource component but that didn't work.

Any and all help appreciated.

2 replies
@mfazekas I am using markerview on Android and when I move the map, it's still visible and after finish dragging, it's hidden.
How can I fix it?
Jon Nehring

Using 3rd-party vector tiles (hosted by us) features disappear when you zoom past the highest level of tiles generated (11, in this case). This doesn't occur if I load and display in web-gl or iOS Swift, using the same tilejson and style json files. My code:

<MapboxGL.VectorSource id="simple_lines" tileUrlTemplates={tileURLs} maxZoomLevel={16} ref={(source) => {
this._vectorSource = source;
<MapboxGL.LineLayer id="simple-lines" sourceLayerID="simple_lines" style={layerStyles2.test} maxZoomLevel={16} />

The style URL (which references the tilejson URL): https://atlas.mapture.com/tilesets/simpleLines/style_simple_lines.json

Any advice would be greatly appreciated.

1 reply
Julien Brayere

I started using react-native-mapbox on android but keep getting this warning:

Mapbox warning {Thread-8}[Android]: MapRenderer::onSurfaceCreated GlyphsRasterizationMode was specified without providing LocalIdeographFontFamily. Switching glyphsRasterizationMode to NoGlyphsRasterizedLocally mode. {"level": "warning", "message": "{Thread-8}[Android]: MapRenderer::onSurfaceCreated GlyphsRasterizationMode was specified without providing LocalIdeographFontFamily. Switching glyphsRasterizationMode to NoGlyphsRasterizedLocally mode.", "tag": "Mbgl"}

I could not find any reference to GlyphsRasterizationMode in the doc. What did I miss during the getting started process ?

3 replies
Malte Hallström

Hello everyone! I have been trying out this library for a couple of days now in a project I'm working on and it looks very promising, thank you to the contributors for maintaining this awesome library!

However, I seem to have gotten myself stuck on something. I want to create a layer of points, with a LineString connecting these points. I also need each point to be draggable, so that the LineString can be altered at runtime by the user.

My initial approach to this has been to use PointAnnotations for the points, and a VectorSource / LineLayer for the lines. This is causing flickering and does not work, at least not the way I intended it to. My guess is that ideally, the drag event should trigger an update to the LineString data, preferably utilizing an animated value for performance?

Is this the correct way to achieve my goal, or should I be rethinking the process? I looked at the AnimatedLine example in the repo, and it looks like there is a part of the API that uses Animated, but I am unable to find the documentation for it.

Happy for any help/tips I can get!

Robert Sasak

My app was taken down from Google Play Store due

Background location access not declared
We detected that your app contains at least one feature that requests access to location in the background, however your permission declaration form did not reflect this. Please log in to your Play Console to resubmit your location declaration form. You may either remove location in the background from your app or indicate that the usage is in the background.

Has anybody faced similar issue?
As far I know there is no BACKGROUND permission in Manifest file
App use targetSDK 30
App use location only to show blue dot on Mapbox map.

6 replies

Anyone run into this error before? Hadn't built the app in a few days and now I get this error when attempting to run on simulator or physical device: MapboxMobileEvents.framework/Info.plist: No such file or directory.

Further, I'm seeing this warning when pod installing: /Users/intelagent/Documents/code/dackmap-app/node_modules/@react-native-mapbox-gl/maps/react-native-mapbox-gl.podspec:11: warning: already initialized constant Pod::TargetsToChangeToDynamic /Users/intelagent/Documents/code/dackmap-app/node_modules/@react-native-mapbox-gl/maps/react-native-mapbox-gl.podspec:11: warning: previous definition of TargetsToChangeToDynamic was here. Any ideas?

1 reply
Good morning! I have the following MapView with rounded corners and a linear gradient in the top. I have the following problem, that it takes so long to render the map (also on TestFlight). In the beginning is nothing and then suddenly the Map with the rounded corners and gradient...Also it blocks all the processes which means there is big lag while loading it. Can someone help me? It would be so great! Thanks a lot! Kind Regards `<View style={{ flex: 1, borderTopRightRadius: 25, borderTopLeftRadius: 25, overflow: 'hidden' }}>
<MapboxGL.MapView ref={mapRef} onRegionDidChange={updateClusters} onDidFinishRenderingMapFully={() => { console.log('Done')}}
attributionPosition={{ bottom: 35, left: 5 }}
style={[{ flex: 1 }]}
         <MapboxGL.UserLocation />
            colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0.9)', 'rgba(255,255,255,0)']}
               height: '23%',
Senior Dev
Hi Everyone
How do I add animate a marker between two points ?
1 reply
something like driver app.
Julien Brayere

I have 2 questions that I could not find an answer for:

  • is it possible to display a static map using this SDK ? I'm trying to display multiple maps (with a path) in a list and was wondering how I could speed up the displaying process (it does not need to be interactive)

  • is it possible to "hide" the background and just draw a path? For some cases, I would like to display a path on a black background. Is that possible ?

Thanks a lot!

6 replies
Barış Elvanoğlu
Hello to everyone,
I'm trying to make a route app using ReactNative and Mapbox Navigation. I'm getting an error when trying to download react-native-mapbox-gl
React version I'm using: 17.0.1 ReactNative version : 0.64.1 I will be grateful if you could help me.
8 replies
스크린샷 2021-06-04 오후 4.34.44.png
iconOpacityTransition not work...
how do I fadein animation?
1 reply
Mickael Lac

Hi Every one,

I am working on a Map and we want to get the Offline Pack, so, i can get the Satellite from MapBox but we have some wmts map from some country, we show then with MapboxGL.RasterSource.

My question is : Is possible to get this Raster offline ?

Thanks for you help and work !

Bruno Milagre
Hi everyone, what ways are there to update ShapeSource without reopening the app? Unfortunately I have not found a solution yet.
Chase Mossing
hi all! has anyone encountered issues with MarkerView accuracy? I'm taking coordinates from google maps, mapbox-gl seems to display them in different locations.
Chase Mossing

hi all! has anyone encountered issues with MarkerView accuracy? I'm taking coordinates from google maps, mapbox-gl seems to display them in different locations.

the problem seems to be apparent in PointAnnotation as well for me.

Kid Commit
@cdmoss, maps do not match 1to1.
there will always be a discrepancy when translating a point from one map to another - sometimes small sometimes bigger
If you want it to line up, you should check the POI coordinates on a mapbox map
Chase Mossing
ahh okay, that makes sense. thanks for the reply!
Kid Commit
Hello everyone. Please I'm getting some serious performance issues with ShapeSource and SymbolLayer
<MapboxGL.ShapeSource id='markersShape' shape={{ type: 'FeatureCollection', features }} onPress={this.onPress} hitbox={{ width: 10, height: 10 }} > {items.map(item => ( <MapboxGL.SymbolLayer id={item.id.toString()} key={item.id.toString()} sourceID='markersShape' style={{ iconSize: 0.05, iconAllowOverlap: true, iconImage: BackMarcheIcon, }} /> ))} </MapboxGL.ShapeSource>
I have a JSON that I fetch from a server. That is what I call items
Kid Commit
iOS/ Android? Emulator/Simulator or real device?
Best to open a ticket in the repo - it's hard to know what the issue is from two lines in the chat
Hi everyone, can anyone help me with offline navigation? How to use offline turn by turn navigation using this mapbox llibrary. I am able to download map tiles but not able to find any reference for offline navigation in doc.
1 reply
Chase Mossing
Hi all, I'm trying to run the example app on my Ubuntu 20.04 machine. When I run npm install, I get error posted below. I'm fairly new to npm and js development in general, forgive me if I'm overlooking anything obvious
Kid Commit
no worries: please carefully read through this and continue trying, if you exhausted all options, come back and ask again:
Chase Mossing
aha ahh, a classic case of forgetting to read the included instructions. tyvm
Taylor Martin

Hello fellow RN mapboxer’s. Trying to see if anyone has figured this out. I’m trying to write an expression for the styles on a SymbolLayer component. To give some more detail, I have clusters on my map which are just circles that have text in them saying how many pins are underneath that cluster. Here is an example of this for reference.
The textField of the SymbolLayer that renders the count for a cluster is what I want to format. From looking at the react-native-mapbox docs, it looks like I should be able to write an expression that does this, but I can’t figure out where the correct documentation for these expression is. Does anyone know?

Basically I’d like to write an expression than can take 1000 and make it 1K, 1250 and make it 1.25K, 1300 and make it 1.3K, with a capital K.

Tomáš Rambousek
Hello, I am having troubles with getting my setup right. I have followed the instructions from readme but the basic example fails loading style.
loading style failed: A valid access token parameter is required when using a Mapbox service.
I have created account and set it up with default public key. Should I configure something else at token configuration?
9 replies
Good morning. I was testing mapbox in react native to improve the zoom level of the maps that we are currently using (react-native-maps). I see that mapbox goes to max zoom level of 22? Do you know if there is a way to increase that? It's something that can be improve by changing the basemaps (and is this posible in mapbox?)? Thanks!
2 replies