Maptile works well on IOS , but it does not update on Android

[talpx0]

Summary

When the state update -> url update -> refetch -> return new map tile , above works well on IOS , but it doe not update on android (the state does rerun, and update successfully )

Reproducible sample code

import { useThemeMode } from "@/app/models/themeStore"
import React, { useState } from "react"
import MapView, { Marker, UrlTile } from "react-native-maps"
import Pin from '@/assets/icons/pin.svg'
import { RouteProp, useNavigation } from "@react-navigation/native";
import { HomeStackParamList } from "@/app/navigator/HomeStack";
import { Pressable, View } from "react-native";
import { Avatar, Button, Portal, useTheme } from "react-native-paper";
import { ScrollView } from "react-native-gesture-handler";
import { RadarCode } from "@/app/constant/Radar";
import FadeInOverlay from "@/app/components/Map/Animation";
import { translate } from "@/app/i18n/i18n";


const API_KEY = smaple;

type RadarScreenRouteProp = RouteProp<HomeStackParamList, 'Radar'>;

interface RadarScreenProps {
  route: RadarScreenRouteProp;
}

export const RadarScreen: React.FC<RadarScreenProps> =({ route })=> {
    const { coord } = route.params;
    const navigation = useNavigation()
    const {themeMode} = useThemeMode()
    const [segment, setSegment]= useState('precipitationIntensity')
    const [mapReady, setMapReady] = useState(false);
    const theme = useTheme()
    return(
        <Portal>
        <View style={{flex: 1}}>
            <Pressable style={{zIndex: 2, position: 'absolute',
              top: 50,
              left: 15,}} onPress={()=> navigation.goBack()}>
            <Avatar.Icon 
              size={50} 
              icon="keyboard-backspace" 
              style={{
              backgroundColor: 'rgba(0,0,0,0.7)', 
              }}
            />
            </Pressable>
            <MapView
                pitchEnabled={false}
                userInterfaceStyle={themeMode}
                rotateEnabled={false}
                customMapStyle={themeMode === 'dark' ? mapStyle : undefined}
                style={{ flex: 1}}
                initialRegion={{
                  latitude: coord.lat,
                  longitude: coord.lon,
                  latitudeDelta: 20, // Latitude delta for the initial map zoom level
                  longitudeDelta: 20, // Longitude delta for the initial map zoom level
                }}
                onMapReady={() => setMapReady(true)} 
              >
                <Marker
                  coordinate={{ latitude: coord.lat, longitude: coord.lon }}>
                  <Pin height={24} width={24} />
                </Marker>
                 <UrlTile
                  opacity={0.6}
                  urlTemplate={`${segment}`}
                />
              </MapView>
              <View style={{
                position: 'absolute',
                height: 90,
                left: 0, 
                right: 0 , 
                bottom: 0, 
                backgroundColor: 'rgba(0,0,0,0.7)', 
                borderTopStartRadius: 10,
                borderTopEndRadius: 10,
                flex: 1}}>
                <ScrollView style={{flex: 1, flexDirection: 'row'}} horizontal>
                  <View style={{
                      flex: 1, 
                      flexDirection:'row', 
                      alignItems:'center',
                      paddingHorizontal: 20
                    }}>
                    {Object.entries(RadarCode).map(([key, value]) => (
                        <Button
                          buttonColor={value.segment === segment ? theme.colors.primaryContainer : ''}
                          mode="outlined"
                          style={{marginHorizontal: 10}}
                          key={key}
                          onPress={() => setSegment(value.segment)}
                        >{ translate(value.title)}
                        </Button>
                    ))}
                  </View>
                </ScrollView>
              </View>
            {<FadeInOverlay reveal={mapReady} />}
        </View>
        </Portal>
    )
}

Steps to reproduce

When the state update -> url update -> refetch -> return new map tile , above works well on IOS , but it doe not update on android (the state does rerun, and update successfully )

Expected result

state update -> url update -> refetch -> return new map tile

Actual result

The maptile shoud update

React Native Maps Version

1.10

What platforms are you seeing the problem on?

Android

React Native Version

0.73

What version of Expo are you using?

Not using Expo

Device(s)

S20 ultra

Additional information

No response

[gokaten-token]

Same issue here.
Set the tileCacheMaxAge to 0 and cacheEnabled to false sometimes solve this problem, but after a few more times of switching between tiles, it happens again.

[talpx0]

Same issue here. Set the tileCacheMaxAge to 0 and cacheEnabled to false sometimes solve this problem, but after a few more times of switching between tiles, it happens again.

Use this this also cause another problems on android, the screen become quick flash when you exit

[mateki0]

Hi @talpx0 thanks for reporting this issue. I made a PR with fix, if u don't want to wait for merge and release you can make a patch in your projects because it's only 1 line change. Also would be great if u can test this solution on real live project.
@gokaten-token
#5041

[gokaten-token]

Hi @talpx0 thanks for reporting this issue. I made a PR with fix, if u don't want to wait for merge and release you can make a patch in your projects because it's only 1 line change. Also would be great if u can test this solution on real live project. @gokaten-token #5041

@mateki0
Thanks for your help! I tested on the emulator and the issue is solved!

[mateki0]

Good to hear that :)