2

I am trying to display icon relative to specific coordinates on a map, but I keep getting this error thrown, followed by:

removedChildren count(0) was not what we expected (1)

This won't allow the pin to show up on the map. Below is my code:

const [restaurant_Latitude, setRestaurantLatitude] = useState(0)
const [restaurant_Longitude, setRestaurantLongitude] = useState(0)
const [restaurantPositionError, setRestaurantPositionError] = useState(null)

Using react-native-svg to create an icon

const restaurantIcon = () =>{
      return(
        <Svg
          height = {30}
          width = {30}
        >
          <Ellipse
            cx="10"
            cy="10"
            rx="10"
            ry="10"
            fill="red"
            stroke="#fff"
            strokeWidth="2"
          />

        </Svg>
        )
    }

//useEffect to get restaurant's coordinates

useEffect(() =>{

...

displayRestaurantInfo = async () =>{
 let restaurantInfo = client_instance.getFoodInfo()

   setRestaurantLatitude(restaurantInfo.latitude)
   setRestaurantLongitude(restaurantInfo.longitude)
   setRestaurantPositionError(null)
}

displayRestaurantInfo()

)
}

...

//How it renders in the MapView

return(
      
        <MapView>

            <Marker 
                coordinate={ 
                    {latitude: restaurantLatitude,
                     longitude: restaurantLongitude,
                     error: position_error,
                    }}
              >
                <View>
                  {(restaurantIcon())}
                </View>
              </Marker>
</MapView>
MK_Pierce
  • 916
  • 2
  • 10
  • 26

0 Answers0