React native call useEffect when variable has changed

Question

I have two components Place and Map. Every time when user in component Place clicks button "Show on Map" I open Map and get route params latitude/longitude from Place and I want to render area near marker. I try to set current latitude/longitude to the state to rerender component near marker but it doesn't work and my map opens at the same place where I closed it. The only option I found is to make component unmount when close Map but I don't think it is the best solution.

Place:

const onNavigationTap = () => {
        navigation.navigate('Map', {
            destination: data["data"].coordinates
        });
    }
return(
<TouchableOpacity onPress={() => onNavigationTap()}>
                <View style={{flexDirection: "row", alignItems: "center"}}>
                    <Ionicons size={hp('5%')} name={'navigate-circle-outline'} color='white'/>
                </View>
</TouchableOpacity>
)

Map:

    const [currentDestination, setCurrentDestination] = useState(undefined);

    if (route.params) {
        var {destination} = route.params;
    }
    useEffect(() => {
   setCurrentDestination(destination);
}, [destination]);
return (
 <MapView
                    
                    mapType={satellite ? "hybrid" : "standard"}
                    style={{flex: 1}}
                    showsUserLocation={true}
                    followsUserLocation={true}
                    provider={PROVIDER_GOOGLE}

                    initialRegion={
                        currentDestination ?
                            {
                                longitude: parseFloat(currentDestination.longitude),
                                latitude: parseFloat(currentDestination.latitude),
                                longitudeDelta: 0.0043,
                                latitudeDelta: 0.0034,
                            } : {
                                latitude: 53.227200,
                                longitude: 50.243698,
                                latitudeDelta: 3,
                                longitudeDelta: 3,
                            }
                    }

                >
</MapView>
)

ANDRIAMANAMPISOA Andriniaina M ANDRIAMANAMPISOA Andriniaina M · Accepted Answer · 2021-07-20T17:10:08

why not use directly routes.params like this :

 <MapView
  mapType={satellite ? 'hybrid' : 'standard'}
  style={{ flex: 1 }}
  showsUserLocation={true}
  followsUserLocation={true}
  provider={PROVIDER_GOOGLE}
  initialRegion={
    route.params.destination
      ? {
          longitude: parseFloat(route.params.destination.longitude),
          latitude: parseFloat(route.params.destination.latitude),
          longitudeDelta: 0.0043,
          latitudeDelta: 0.0034,
        }
      : {
          latitude: 53.2272,
          longitude: 50.243698,
          latitudeDelta: 3,
          longitudeDelta: 3,
        }
  }></MapView>

like this whenever you call place , routes.params will be new value

React native call useEffect when variable has changed

1 Answers