Search code examples
reactjsexpomapsnative

React Native maps re-render


I have a progress bar(react-native-elements) that is animated using useEffect(). This component has MapView(react-native-maps) and it's re-rendered on every tick thus I can't move the map.

How can I still have that progress bar without re-rendering the map?

Home

const Home = ({ navigation }) => {

...some code above...

useEffect(() => {
        //setProgressValue(0);
        var timer;
        if (progressValue != 0) {
            timer = setInterval(() => {
                if (progressValue <= 1) {
                    setProgressValue(progressValue + 0.040);
                }
                else {
                    setProgressValue(0);
                    setTimeOver(true);
                }
            }, 1000);

            return () => {
                clearInterval(timer);
            }
        }
    }, [progressValue]);

... code below ...

return (
...
<MainMap notification={notification} />
...
)

MainMap component

<View style={StyleSheet.absoluteFillObject}>
            <MapView
                ref={mapRef}
                provider={PROVIDER_GOOGLE}
                region={geo.location}
                style={[StyleSheet.absoluteFillObject]}
                loadingEnabled={true}
                minZoomLevel={16}
                maxZoomLevel={20}
            >
                {/* Current users location */}
                {geo.location &&
                    <Marker identifier={'me'} pinColor={"red"} key={(Date.now()-1).toString()} title={"Это я"} coordinate={geo.location} />
                }
                
                {/* Location where help is needed */}
                {notification &&
                    <Marker identifier={'target'} pinColor={COLORS.primary} key={Date.now.toString()} title={"Помогите!"} coordinate={notification.request.content.data.loc} />
                }
            </MapView>
        </View>

Solution

  • I used the useMemo hook for the map and passed params that will trigger its rerender making sure that other state changes are not triggering it.