Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calling fitToCoordinates with a single coordinate after calling it with multiple coordinates does not respect edge padding #4964

Open
PatrickElfert opened this issue Feb 13, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@PatrickElfert
Copy link

PatrickElfert commented Feb 13, 2024

Summary

I am currently using fitToCoordinates on ios with apple maps. I am seeing an issue which occurs when calling fitToCoordinates initially with multiple coordinates and then only providing a single coordinate. When calling fitToCoordinates the first time with a single coordinate, the edge padding is not respected. Calling it another time uses the provided edge padding.

Screen.Recording.2024-02-13.at.19.33.16.mov

Reproducible sample code

import React, { useEffect, useRef } from "react";
import MapView, { EdgePadding, Marker } from "react-native-maps";
import { Button, StyleSheet } from "react-native";

export function MapTest() {
  const mapRef = useRef<MapView>(null);
  const coordinates = [
    { latitude: 25.2769875, longitude: 55.296249 },
    { latitude: 35.652832, longitude: 139.839478 },
  ];

  const edgePadding: EdgePadding = {
    top: 0,
    bottom: 500,
    left: 50,
    right: 50,
  };

  const fitToSingleCoordinate = () => {
    mapRef.current?.fitToCoordinates([coordinates[0]], { edgePadding });
  };

  useEffect(() => {
    mapRef.current?.fitToCoordinates(coordinates, { edgePadding });
  }, []);

  return (
    <>
      <Button onPress={fitToSingleCoordinate} title="Test"></Button>
      <MapView ref={mapRef} style={styles.map}>
        {coordinates.map((coordinate, index) => (
          <Marker
            pinColor={"#0A84FF"}
            key={index}
            coordinate={coordinate}
          ></Marker>
        ))}
      </MapView>
    </>
  );
}
export const styles = StyleSheet.create({
  map: {
    flex: 1,
  },
});

Steps to reproduce

  1. Call fitToCoordinates with multiple coordinates and edgePadding
  2. Call fitToCoordinates with a single coordinate and edgePadding

Expected result

Edge padding should be respected when calling fitToCoordinates with a single coordinate after calling it with multiple coordinates

Actual result

Edge padding is not respected

React Native Maps Version

1.10.2

What platforms are you seeing the problem on?

iOS (Apple Maps)

React Native Version

0.72.6

What version of Expo are you using?

Not using Expo

Device(s)

iPhone 14 Pro (16.4)

Additional information

No response

@PatrickElfert PatrickElfert added the bug Something isn't working label Feb 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant