Maps: Error while updating property 'coordinate' of a view managed by: RCTMGLMarkerView

[DroidZed]

Describe the bug
The MarkerView component doesn't want to work, the moment I add it inisde the MapView the red error screen pops up and can't figure out the issue here !
Everything is passed correctly tho, view the details in the code below to understand more.

To Reproduce

1. Install the example code
2. Import & add the Camera and MarkerView components into the app
3. Get the user location as a state for the screen component
4. Pass in the long and lat from the state to the coordinates prop on the MarkerView and centerCoordinate prop on the Camera as follows: coordinates={[coords.longitude, coords.latitude]} & centerCoordinate={[coords.longitude, coords.latitude]}

Actual code with omitted access token :

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, TouchableWithoutFeedback, Keyboard, Text } from 'react-native';

//Imported Libraries
import MapboxGL, { MapView, Camera, MarkerView } from '@react-native-mapbox-gl/maps';
import { useColorScheme } from 'react-native-appearance';
import RNLocation from 'react-native-location';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

MapboxGL.setConnected(true);
MapboxGL.setTelemetryEnabled(false);

const MapScreen = (props) => {
  const [coords, setCoords] = useState({});
  const colorScheme = useColorScheme();

  const clawLocation = () => {
    RNLocation.configure({
      distanceFilter: 5.0,
    });

    RNLocation.requestPermission({
      android: {
        detail: 'fine',
      },
    }).then((granted) => {
      if (granted) {
        RNLocation.subscribeToLocationUpdates((locations) => {
          setCoords(locations[0]);
        });
      }
    });
  };

  useEffect(() => clawLocation());
  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <View style={{ flex: 1, backgroundColor: colorScheme === 'dark' ? 'black' : 'white' }}>
        <Header title="Map" style={{ backgroundColor: Colors.mapHeader }} />
        <View style={{ ...Styling.container, backgroundColor: colorScheme === 'dark' ? 'black' : 'white' }}>
          <MapView
            style={Styling.map}
            compassEnabled={true}
            styleURL={
              colorScheme === 'dark'
                ? 'mapbox://styles/droidzed/ckewxui2c171z1ao9fy85mk6o'
                : 'mapbox://styles/droidzed/ckewxpuy40mla19pbmvzp2bp8'
            }
          >
            <Camera zoomLevel={15} followUserLocation={true} centerCoordinate={[coords.longitude, coords.latitude]} />
            <MarkerView coordinate={[coords.longitude, coords.latitude]} id="1">
              <MaterialCommunityIcons name="map-marker" size={30} color="red" />
            </MarkerView>
          </MapView>
        </View>
        <FocusAwareStatusBar barStyle="light-content" backgroundColor={Colors.mapBar} />
      </View>
    </TouchableWithoutFeedback>
  );
};

Expected behavior
The error screen provided would show.

Screenshots

Versions (please complete the following information):

• Platform: Android
• Device: Samsung Galaxy A30 (4 GB RAM/64 GB Storage model)
• Emulator/ Simulator: no
• OS: Android 10
• react-native-mapbox-gl Version: 8.1.0-rc.4
• React Native Version: 0.63.2

Additional context
A console.log(coords); shows:

[Sat Sep 12 2020 09:26:04.979]  INFO     {"accuracy": 180, "altitude": 44.099998474121094, "altitudeAccuracy": 2, "course": 0, "courseAccuracy": 0, "fromMockProvider": false, "latitude": 36.7409363, "longitude": 10.2980526, "speed": 0, "speedAccuracy": 0, "timestamp": 1599898636377}

This is added to remove any doubt about the coordinates not actually passing from the state (for any reason there is).

[ferdicus]

hmm, going from the error message I unfortunately have to still ask: what the value of coords on initial render?
Can you add a fallback for when it's not defined or add a default in MarkerView for when it's not defined yet and check again.

or return null instead of your component before coords is defined.

Thanks

PS: also thanks for the fully filled out bug report - really appreciated

[DroidZed]

I added in the Additional Context part, the value of coords when it is read, but providing [0,0] or any other manually typed coordinates would work ! I think I have to wait for the MapScreen component to fully renders, the state to resolve and finally to get passed into the coordinates prop.
Well after all I dropped the feature, by replacing it with a simple UserLocation component and making the camera follow the user's location (maybe this is dump of me but for you to know ,I'm a 10000% new to this) !

And you're welcome, also I'm glad someone replied because I got desperate about no one seeing my issue for a day or more after posting it, really thanks !

   <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <View style={{ flex: 1, backgroundColor: colorScheme === 'dark' ? 'black' : 'white' }}>
        <Header title="Map" style={{ backgroundColor: Colors.mapHeader }} />
        <View style={{ ...Styling.container, backgroundColor: colorScheme === 'dark' ? 'black' : 'white' }}>
          <MapView
            style={Styling.map}
            compassEnabled={true}
            compassEnabled={true}
            styleURL={
              colorScheme === 'dark'
                ? 'mapbox://styles/droidzed/ckewxui2c171z1ao9fy85mk6o'
                : 'mapbox://styles/droidzed/ckewxpuy40mla19pbmvzp2bp8'
            }
          >
            <Camera zoomLevel={15} followUserLocation={true} />
            <UserLocation
              animated={true}
              androidRenderMode="compass"
              visible={true}
              showsUserHeadingIndicator={true}
              minDisplacement={5}
            />
          </MapView>

[ferdicus]

resolved

[DroidZed]

I hope smo who encounters this issue again would see my post and provide a better solution.