React-native-mapbox-gl: RasterSource/RasterLayer not displaying on Android

[ClayChristmas]

I've got a map set up in React Native 0.51 with MapBox 6.0.3-rc1 running on IOS and displaying a RasterLayer sourcing from a URL. On IOS everything works as expected, but the exact same React Native code does not work on Android. The map displays without issues or javascript error messages, but the layer does not display. A marker relying on the raster layer also doesn't display, but if I remove it's dependence on the raster layer then it does display.

const url = 'https://someurl.com/{x}/{y}/{z}';

                <Mapbox.MapView
                      styleURL={Mapbox.StyleURL.Street}
                      zoomLevel={8}
                      centerCoordinate={-99, 32}
                      style={styles.map}
                      ref={(ref) => this.map = ref}
                      zoomEnabled={false}
                      pitchEnabled={false}
                      scrollEnabled={false}
                      rotateEnabled={false}
                      logoEnabled={false}>
                        <Mapbox.RasterSource key='d' id='mySource' url={url}>
                          <Mapbox.RasterLayer id='myLayer' sourceID='mySource' style={{rasterOpacity:0.7}} />
                        </Mapbox.RasterSource>
                        <Mapbox.ShapeSource id='currentLocationMarkerSource' shape={this.state.featureCollection}>
                          <Mapbox.SymbolLayer
                            id='currentLocationMarkerSymbols'
                            style={[mapStyles.icon, {textField:markerText}]}
                            aboveLayerID='myLayer'
                            maxZoomLevel={16}
                            />
                        </Mapbox.ShapeSource>
                  </Mapbox.MapView>

[phuochau]

@ClayChristmas Could you try to add tileSize={256} to RasterSource? I have same issue before.

[ClayChristmas]

That fixed it, thanks! I thought that tileSize defaulted to 256 if not specified? Seems to have worked on IOS before without that, but not on Android. I also see some funkiness with the SymbolLayer opacity/aboveLayerID when using 512 tile sizes instead of 256 on Android.

[phuochau]

@ClayChristmas Cool, so if it's working well, you can close this issue.

[nitaliano]

@ClayChristmas it should default to 256, I just looked into the Android SDK and it is setting the default value to 512 so I'll need to override it in this repo to match the iOS default. I'll be looking into all of the properties to make sure they align correctly

[ClayChristmas]

@nitaliano and @phuochau thanks! Would you like for me to keep this issue open for now or close it? My map URL was using 512 tile sizes initially when it did not work, so there may be some other issue when it is not specified.

[nitaliano]

Let's keep this open until I look into all the raster layer props and make any PRs under this ticket id

[ClayChristmas]

Not sure if related to this ticket or if I should open up a new ticket, but I'm also running into sporadic issues with the RasterSource/RasterLayer on Android. I've looked through the other recent github issues since the rewrite and don't see any that seem to be quite the same as these.

The first issue is when zooming in/out sometimes tiles don't load. I'm using a custom tile API for this and it seems like if you zoom at all too quickly like the tiles don't load and once they haven't loaded then they never load unless you refresh the whole react native application.
Here is a gif of what this looks like:

The second issue that I'm seeing is that inside of a scrollview sometimes the map glitches and instead of staying pinned to its location inside of its container it does partial updates. It is probably easiest to see in the gifs below.
This shows it working as expected:

This shows the glitching that I am seeing sometimes on both emulated and physical devices: