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>