Switching from a selected point to another selected point fires callbacks in an unpredictable order, causing a buggy show animation.

[sameerxanand]

I understand that the PointAnnotation component has an onSelected and a onDeselected callback.

I'm trying to show a BottomSheet (from @gorhom/bottom-sheet) with details about the selected point. When you click from one selected point to another selected point, the bottom sheet should remain visible, and the child components should re-render when the state of the selected point changes. However, I'm unable to get this to work correctly because of how these callbacks are fired.

For example, if I have two points with IDs 1 and 2, and I go from selected point with ID 1 to selected point with ID 2, then this happens:

1. ID 1's onDeselect fires
2. ID 2's onSelect fires

OR, this happens:

1. ID 2's onSelect fires
2. ID 1's onDeselect fires

Because I'm using the callbacks to set a state variable which controls hiding/showing the bottom sheet, sometimes I end up in a state where I have a point selected, but the bottom sheet isn't visible.

It would be ideal if the MapView component fired callbacks when a point is selected and when a point is deselected, and not fire the deselected callback if going from one selected point to selecting a different point. And, if the MapView has the property deselectAnnotationOnTap enabled, then the deselected callback should fire if clicking on the map (specifically, not on a point annotation).

[sameerxanand]

Here's an example video:

RPReplay_Final1713568664.mp4

You can see there are two bottom sheet views - one that says "Recommended For You" - which should show if you don't have a point selected; and another that has the title of the selected point which should show when a point is selected.

You can see two things happening here:

1. The jumping when switching from one point to another point
2. Sometimes selecting points causes the point to be selected, but the wrong bottom sheet to be open

My code:

import BottomSheet, { BottomSheetScrollView } from "@gorhom/bottom-sheet";
import { useRef, useState, useMemo } from "react";
import Mapbox from "@rnmapbox/maps";

/** ... **/

const annotations = [ /** ... **/ ]

export default function Map() {

  const [selectedLocation, setSelectedLocation] = useState(null);
  const unselectedSheet = useRef<BottomSheet>(null);
  const selectedSheet = useRef<BottomSheet>(null);
  const snapPoints = useMemo(() => ["25%", "50%"], []);

  return (
    <>
      <Mapbox.MapView deselectAnnotationOnTap {/** ... **/}>

        {/** ... **/}

        {annotations.map((annotation) => (
          <Mapbox.PointAnnotation

            {/** ... **/}
          
            onSelected={(e) => {
              unselectedSheet.current.close();
              selectedSheet.current.snapToIndex(0);
              setSelectedLocation(annotation);
            }}
          
            onDeselected={(e) => {
              selectedSheet.current.close();
              unselectedSheet.current.snapToIndex(0);
            }}
          >

            {/** ... **/}

          </Mapbox.PointAnnotation>
        ))}

      </Mapbox.MapView>

      <BottomSheet
        ref={selectedSheet}
        snapPoints={snapPoints}
        index={-1}
      >
        <BottomSheetScrollView>
          <View className="flex items-center h-full">
            <Text className="text-white">{selectedLocation?.title}</Text>
          </View>
        </BottomSheetScrollView>
      </BottomSheet>

      <BottomSheet
        ref={unselectedSheet}
        snapPoints={snapPoints}
        index={0}
      >
        <BottomSheetScrollView>
          <View className="px-6 py-4">
            <Text className="text-[#86919B] font-semibold uppercase">
              Recommended For You
            </Text>
          </View>
        </BottomSheetScrollView>
      </BottomSheet>
    </>
  )

}