Issue in the compoentDidMount actions? - react-native

Question

Problem:
I am creating react native application with Google maps. This is how my code is structured.
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Dimensions,
Button,
TouchableOpacity
} from "react-native";
import { MapView } from "expo";
import {
Ionicons,
Foundation,
Entypo,
MaterialCommunityIcons
} from "#expo/vector-icons";
const windowheight = (Dimensions.get("window").height * 80) / 100;
const windowwidth = (Dimensions.get("window").width * 80) / 100;
class Parking extends Component {
static navigationOptions = {
title: "Parking",
headerStyle: {
backgroundColor: "#06153b"
},
headerTintColor: "#fff",
headerTitleStyle: {
color: "#ffff"
}
};
state = {
focusedLocation: {
latitude: 6.9218374,
longitude: 79.8211859,
latitudeDelta: 0.0322,
longitudeDelta:
(Dimensions.get("window").width / Dimensions.get("window").height) *
0.0322
},
locationChosen: false,
placesList: []
};
componentDidMount() {
navigator.geolocation.getCurrentPosition(
pos => {
const coordsEvent = {
nativeEvent: {
coordinate: {
latitude: pos.coords.latitude,
longitude: pos.coords.longitude
}
}
};
this.pickLocationHandler(coordsEvent);
},
err => {
console.log(err);
alert("Fetching the Position failed");
}
);
}
reloadLocation = () => {
navigator.geolocation.getCurrentPosition(
pos => {
const coordsEvent = {
nativeEvent: {
coordinate: {
latitude: pos.coords.latitude,
longitude: pos.coords.longitude
}
}
};
this.pickLocationHandler(coordsEvent);
},
err => {
console.log(err);
alert("Fetching the Position failed");
}
);
};
pickLocationHandler = event => {
this.setState({ locationChosen: true });
const coords = event.nativeEvent.coordinate;
let placesList = [];
let places = [];
this.map.animateToRegion({
...this.state.focusedLocation,
latitude: coords.latitude,
longitude: coords.longitude
});
const apikey = "myKey";
fetch(
"https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=" +
coords.latitude +
"," +
coords.longitude +
"&radius=800" +
"&type=parking" +
"&key=" +
apikey
)
.then(response => response.json())
.then(responseJson => {
if (responseJson) {
placesList = responseJson.results;
placesList.map((el, index) => {
var place = {
title: el.name,
coordinates: {
latitude: el.geometry.location.lat,
longitude: el.geometry.location.lng
}
};
places.push(place);
});
this.setState({ placesList: places });
}
});
};
componentWillUnmount = () => {
this.setState(prevState => {
return {
focusedLocation: {
...prevState.focusedLocation,
latitude: 0,
longitude: 0
},
locationChosen: false,
placesList: []
};
});
};
render() {
let marker = null;
if (this.state.locationChosen) {
marker = <MapView.Marker coordinate={this.state.focusedLocation} />;
}
const places = this.state.placesList;
return (
<View style={styles.container}>
<MapView
initialRegion={this.state.focusedLocation}
showsUserLocation={true}
style={styles.map}
onPress={this.pickLocationHandler}
ref={ref => (this.map = ref)}
>
{places.map((place, index) => {
return (
<MapView.Marker
key={index}
coordinate={place.coordinates}
title={place.title}
pinColor="violet"
/>
);
})}
{marker}
</MapView>
</View>
);
}
}
export default Parking;
const styles = StyleSheet.create({
container: {
width: "100%",
alignItems: "center",
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10
},
map: {
height: "100%",
width: "100%"
},
button: {
margin: 8
},
callout: {},
calloutButton: {
marginTop: windowheight,
marginLeft: windowwidth,
borderWidth: 1,
borderColor: "rgba(0,0,0,0.2)",
alignItems: "center",
justifyContent: "center",
width: 50,
height: 50,
backgroundColor: "#2b78fe",
borderRadius: 100,
shadowColor: "#e9ebee"
}
});
In the componentDidmount method, I am getting the users current location and render the map according to that. When I open the app and go this page which in this component It loads the map as I needed but when I go to another component and come again to this component it just loads the map according to the place in the state. Can someone help me to solve this problem and Is their way to load the map with new location automatically, when the user's location changes?Thank you!

Answer 1

Its because, you are using StackNavigator and the componentDidMount only get called in the mounting phase.
When you navigate to maps component first time componentDidMount is called, When you navigate to some other component from maps component(maps component doesn't get unmounted in case of stack navigator). When you navigate back it just focuses/updates the already mounted maps component and componentDidMount will not get called. Hopefully render and componentDidUpdate gets called.
If you dont want to change the logic then:
One solution to this problem is instead of navigate() use push(),
this.props.navigation.push(routeName) //react-navigation-v3
push() function will push the new route component into the satck rather than navigating to previous same component in the stack.
This differs from navigate() in that navigate will pop back to earlier in the stack if a route of the given name is already present there. push will always add on top, so a route can be present multiple times.
Second Solution You might wanna check this alternative approach
class MyComponent extends React.Component {
state = {
isFocused: false
};
componentDidMount() {
this.subs = [
this.props.navigation.addListener("didFocus", () => this.setState({ isFocused: true })),
this.props.navigation.addListener("willBlur", () => this.setState({ isFocused: false }))
];
}
componentWillUnmount() {
this.subs.forEach(sub => sub.remove());
}
render() {
// ...
}
}
Third Solution
When you navigate back, also set the state(current location) in componentDidUpdate Note. you need a condition before setting the state in componentDidUpdate, other wise you will end up triggring infinite loop.