fix(android): fix non working tile update

[mateki0]

Does any other open PR do the same thing?

No

What issue is this PR fixing?

#5012

How did you test this PR?

It affects only Android Google Maps.
I have tested it on Android Simulator(Pixel 2a), for some reason map is not rendering on my real device but there shouldn't be difference between simulator and device.

To test it easily you can copy/paste this code to any of existing example screens. I was using StaticMap but it doesn't matter.

import React, {useState} from 'react';
import MapView, {Marker, UrlTile} from 'react-native-maps';

import {View, Text, TouchableOpacity} from 'react-native';

const coord = {
  lat: 37.78825,
  lon: -122.4324,
};

const StaticMap = () => {
  const [tileUrl, setTileUrl] = useState(
    'https://cartodb-basemaps-c.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
  );

  const swapTile = () => {
    if (tileUrl.includes('dark_all')) {
      setTileUrl(
        'https://cartodb-basemaps-c.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
      );
    } else {
      setTileUrl(
        'https://cartodb-basemaps-c.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png',
      );
    }
  };

  return (
    // eslint-disable-next-line react-native/no-inline-styles
    <View style={{flex: 1, width: '100%', height: '100%'}}>
      <MapView
        pitchEnabled={false}
        rotateEnabled={false}
        // eslint-disable-next-line react-native/no-inline-styles
        style={{flex: 1, width: '100%', height: '100%'}}
        initialRegion={{
          latitude: coord.lat,
          longitude: coord.lon,
          longitudeDelta: 20,
          latitudeDelta: 20,
        }}>
        <Marker coordinate={{latitude: coord.lat, longitude: coord.lon}} />
        <UrlTile opacity={0.6} urlTemplate={tileUrl} />
      </MapView>

      <View
        // eslint-disable-next-line react-native/no-inline-styles
        style={{
          flex: 1,
          flexDirection: 'row',
          alignItems: 'center',
          paddingHorizontal: 20,
        }}>
        <TouchableOpacity onPress={swapTile}>
          <Text>Swap tile</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default StaticMap;

This solution is basing on similar code in MapTileProvider in setTileSize.

[salah-ghanim]

@mateki0 please rebase or "allow maintainers to update branch" in the future to enable me to trigger a rebase so that this can be merged

[mateki0]

@mateki0 please rebase or "allow maintainers to update branch" in the future to enable me to trigger a rebase so that this can be merged

@salah-ghanim I rebased it. I don't have this option, it should be on the right side under participants section, right?

[salah-ghanim]

@mateki0 https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork

[react-native-maps-bot]

🎉 This PR is included in version 1.15.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[mateki0]

Yea I saw it but I don't have this section at all :/