Trying to create editable polygons with react-native-maps - react-native

Question

Ive been trying to create a editable polygon with react-native-maps to basically create a user editable geofence. Using draggable markers to pinpoint the polygons corners. I thought this work, but upon dragging on of the markers, this error and I cannot understand why.
Any help is greatly appreciated!
import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import MapView, { Polyline, Marker, Polygon } from 'react-native-maps';
import { RFValue } from 'react-native-responsive-fontsize';
export default function App() {
const [region, setRegion] = useState({
latitude: 'null',
longitude: 'null',
});
const [Cords, setCords] = useState('null')
const [firstLat, setFirstLat] = useState()
const [firstLong, setFirstLong] = useState()
const [secondLat, setSecondLat] = useState()
const [secondLong, setSecondLong] = useState()
const [thirdLat, setThirdLat] = useState()
const [thirdLong, setThirdLong] = useState()
const [mapPressLat, setMapPressLat] = useState()
const [mapPressLong, setMapPressLong] = useState()
const polyList = [
{ latitude: firstLat, longitude: firstLong },
{ latitude: secondLat, longitude: secondLong },
{ latitude: thirdLat, longitude: thirdLong }
]
return (
<View style={styles.container}>
<StatusBar style="auto" />
<Text>{Cords}</Text>
<Text>{mapPressLat} | {mapPressLong}</Text>
<Text>{firstLat} | {firstLong}</Text>
<Text>{secondLat} | {secondLong}</Text>
<Text>{thirdLat} | {thirdLong}</Text>
<MapView style={{ height: '40%', width: '90%' }}
onRegionChangeComplete={(region) => setRegion(region)}
initialRegion={{
latitude: 50.75895213387573,
longitude: -1.2904538133239536,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
}}
onPress={e => setMapPressLat([e.nativeEvent.coordinate.latitude]) + setMapPressLong([e.nativeEvent.coordinate.longitude])}
>
<View style={{ backgroundColor: 'black', height: RFValue(5), width: RFValue(5), borderRadius: 100, position: 'absolute', top: '49%', left: '48.7%' }} />
<Polyline
coordinates={polyList}
fillColor='#A3BE80'
strokeWidth={3}
tappable={true}
onPress={() => alert('yesy')}
/>
<Marker
key={'first'}
onDrag={a => setFirstLat([a.nativeEvent.coordinate.latitude]) + setFirstLong([a.nativeEvent.coordinate.longitude])}
coordinate={{
latitude: 50.75895213387573 + 0.001,
longitude: -1.2904538133239536 + 0.001
}}
draggable={true}
/>
<Marker
key={'sencond'}
onDrag={b => setSecondLat([b.nativeEvent.coordinate.latitude]) + setSecondLong([b.nativeEvent.coordinate.longitude])}
coordinate={{
latitude: 50.75895213387573 - 0.001,
longitude: -1.2904538133239536
}}
draggable={true}
/>
<Marker
key={'third'}
onDrag={c => setThirdLat([c.nativeEvent.coordinate.latitude]) + setThirdLong([c.nativeEvent.coordinate.longitude])}
coordinate={{
latitude: 50.75895213387573 + 0.001,
longitude: -1.2904538133239536 - 0.001
}}
draggable={true}
/>
</MapView>
<Text>Current latitude: {region.latitude}</Text>
<Text>Current longitude: {region.longitude}</Text>
<TouchableOpacity onPress={() => setCords([region.latitude] + ' ' + [region.longitude])} style={{ marginTop: 30, backgroundColor: 'darkcyan', borderRadius: 6 }}>
<Text style={{ color: 'white', padding: 15 }} >Cords</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

If anyone has the same issue as me.
I, for some stupid reason, put the marker's lat and long values in an array...
Old
onDrag={a => setFirstLat([a.nativeEvent.coordinate.latitude]) + setFirstLong([a.nativeEvent.coordinate.longitude])}
New
onDrag={a => setFirstLat(a.nativeEvent.coordinate.latitude) + setFirstLong(a.nativeEvent.coordinate.longitude)}
I hope this helps!