Closed RavindraMaddukuri closed 3 years ago
I am getting same error. Did you find a solution for this issue on Android?
Providing a minHeight for the MapView should fix this
I faced same error, and CameraUpdateFactory.newLatLngBounds
in animateToRegion
was the cause for my case.
I would mention what I tried. I hope it helps someone :pray:
import android.util.Log;
and add like Log.d("customLogger","animateToRegion called");
everywhere calling newLatLngBounds
in AirMapView.java
)adb logcat
newLatLngBounds
and the customLogger
cf. I finally fixed my case by making the function calling animateToRegion
wait for the onMapReady
event fired.
Same issue in an expo-based app. (Expo v35) caused by providing initialRegion
coordinates and delta.
This happened only in production build and not while running in the companion app.
I worked it around the way @shiba-hiro suggested - with useEffect
that calls mapRef.animateToRegion
once the map ref
was set and the onMapReady
was invoked.
same here react-native 0.61.5 react-native-maps 0.26.1
@shiba-hiro Thanks for your solution! The reason really was in calling animateToRegion before map layout was finished
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
//***
//***
mMap.setOnMapLoadedCallback(new GoogleMap.OnMapLoadedCallback() {
@Override
public void onMapLoaded() {
mMap.moveCamera(CameraUpdateFactory.newLatLngBounds(builder.build(), padding));
}
});
}
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
I faced same error, and
CameraUpdateFactory.newLatLngBounds
inanimateToRegion
was the cause for my case.I would mention what I tried. I hope it helps someone 🙏
- Set loggers in Java code. (
import android.util.Log;
and add likeLog.d("customLogger","animateToRegion called");
everywhere callingnewLatLngBounds
inAirMapView.java
)- Get logs by
adb logcat
- Launch the app
- Check exception logs about
newLatLngBounds
and thecustomLogger
cf. I finally fixed my case by making the function calling
animateToRegion
wait for theonMapReady
event fired.
How did you make the function calling animateToRegion wait for the onMapReady event fired?
@AndersonSchmidt In short, we did something like this:
<ReactNativeMapView
// ...
onMapReady={ () => this.mapReady = true } />
And then whereever you are calling animateToRegion
to update the map, add a guard like:
_updateMap = event => {
if ( !this.mapReady ) return;
// ...
}
In Kotlin this seems to have worked:
map.setOnMapLoadedCallback {
map.moveCamera(CameraUpdateFactory.newLatLngBounds(cameraBounds, 0))
}
Setting map width and height to screen width and height AND doing map initialization (fetching data for markers, etc.) in onLayout() worked for me.
<MapView style={styles.map} onLayout={onMapReady} ...>
const onMapReady = async () => {
if (mapInitialized) {
return;
}
// initialize map data here
setMapInitialized(true);
};
const styles = StyleSheet.create({
map: {
position: "absolute",
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
flex: 1,
},
});
Providing a minHeight for the MapView should fix this
Thank you, your solution helped me!
Providing a minHeight for the MapView should fix this
Thank you, your solution helped me!
@Nagasai97 can you kindly share a snippet
To anyone having a similar issue, I fixed it with the following code:
const $mapStyle: ViewStyle = {
minHeight: "100%",
minWidth: "100%", // OPTIONAL
}
<MapView
style={$mapStyle}
initialRegion=YOUR_DEFAULT_HERE
/>
I hope this helps!
Setting map width and height to screen width and height AND doing map initialization (fetching data for markers, etc.) in onLayout() worked for me.
<MapView style={styles.map} onLayout={onMapReady} ...>
const onMapReady = async () => { if (mapInitialized) { return; } // initialize map data here setMapInitialized(true); };
const styles = StyleSheet.create({ map: { position: "absolute", width: Dimensions.get("window").width, height: Dimensions.get("window").height, flex: 1, }, });
wORKS
add minHeight !!!!
<ReactNativeMaps ~~ style={{ minHeight: ~~ }} />
minHeight did not help me. Needed position: "absolute"
My issue was trying to use useAnimatedProps
from react-native-reanimated
when the location was not available, forgot to do a simple check before using it
I Fixed this issue by checking Map Layout Before Setting Bounds.
const [mapDimensions, setMapDimensions] = useState({ width: 0, height: 0 });
const onMapLayout = (event) => {
const { width, height } = event.nativeEvent.layout;
setMapDimensions({ width, height });
};
<MapView
ref={map}
style={styles.mapView}
onLayout={onMapLayout}
onRegionChangeComplete={onRegionChangeComplete}
initialRegion={region}
>
{mapDimensions.width > 0 && mapDimensions.height > 0 && (
markersValues.map(item => (
<Marker
coordinate={{ latitude: item.latitude, longitude: item.longitude }}
onPress={() => adjustMapRegion(item.latitude, item.longitude, item)}
>
{/* Your marker content here */}
</Marker>
))
)}
</MapView>
I am getting this error in Android - 7.1, I am using "react-native- 0.60.4", "react-native-maps": "0.26.1", Here is i my code < const { width, height } = Dimensions.get("window");
const ASPECT_RATIO = width / height; const LATITUDE = 33.470695; const LONGITUDE = -112.072078; const LATITUDE_DELTA = 0.0033; const LONGITUDE_DELTA = 0.00237;
export default class Map extends Component { static propTypes = { provider: MapView.ProviderPropType };
constructor(props) { super(props);
} componentWillReceiveProps(newProps) { if(this.props.restaurantDetails.Lat && this.props.restaurantDetails.Lng){ this.map.animateToRegion({ latitude: parseFloat(newProps.restaurantDetails.Lat), longitude: parseFloat(newProps.restaurantDetails.Lng), latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA }) alert(this.props.restaurantDetails.Lat +"djfkhdjh"+this.props.restaurantDetails.Lng) } if (newProps.restaurantDetails.Lat && newProps.restaurantDetails.Lng) { this.setState({ region: { latitude: parseFloat(newProps.restaurantDetails.Lat), longitude: parseFloat(newProps.restaurantDetails.Lng), latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA }, spinner: false }); } else { if (Platform.OS === "ios") { this.getCurrentLocation(); } else { this.permissionsAndroid() } } } componentWillMount() { if (this.props.restaurantDetails.Lat && this.props.restaurantDetails.Lng) { this.setState({ region: { latitude: parseFloat(this.props.restaurantDetails.Lat), longitude: parseFloat(this.props.restaurantDetails.Lng), latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA }, spinner: false }); } else { if (Platform.OS === "ios") { this.getCurrentLocation(); } else { this.permissionsAndroid() } } }
onMapLayout = () => { this.setState({ isMapReady: true }); } onMapping() { const { restaurantDetails } = this.props; const label = restaurantDetails["Address Map"]; const scheme = Platform.OS === "ios" ? "https://maps.apple.com/maps/search/?q=" + label : "https://www.google.com/maps/search/?api=1&query=" + label; Linking.openURL(scheme); } render() { //alert("sfghd") if (this.state.spinner) { return ;
} else {
return (
} }