Hey there, I'm a newcomer to react native and I could really use your assistance with something. My issue is that I am trying to display a list of markers on a map where the data is stored in an SQLite database. I am using react-native-maps, so within the MapView component, my code looks like this:
return (
<View style={styles.sectionContainer} >
<TouchableOpacity onPress={()=>{console.log(arrayData)}} >
<Text>elements of arrayData</Text>
</TouchableOpacity>
<MapView
style={styles.map}
mapType='hybrid'
initialRegion={{
latitude: 41.73909537455833,
longitude: 12.701842524111271,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,}}
>
{ arrayData.map((item, index) => (
<Marker key={index} title={item.name} coordinate={item.coordinates} />
))}
</MapView>
</View>
);
The 'arrayData' mentioned above is an array of objects where each object contains 'name' and 'coordinate' information. To populate this array, I initially define an array and then have a function that reads elements from the database and adds them to the array before returning it as 'arrayData'. Here's the relevant portion of my code:
const array = [
{name: 'a', coordinates: {latitude: 41.73909537455833, longitude: 12.701842524111271,}}
];
const location=[
{latitude: 41.73767484979501, longitude: 12.703637927770613},
{latitude: 41.738562243639635, longitude: 12.701931037008762},
{latitude: 41.73870384524446, longitude: 12.700487338006495},
];
const funzione = ()=>{ // get data from database called Users
try {
db.transaction((tx) => {
tx.executeSql(
"SELECT Title FROM Users",
[],
(tx, results) => {
var len = results.rows.length;
if (len > 0) {
for(let i=0;i<len;i++){
var userTitle = results.rows.item(i).Title;
//add the element in the array
array.push({name: userTitle, coordinates: location[i]});
}
}
}
)
});
return(array);
} catch (error) {
console.log(error)
}
}
const arrayData = funzione();
My current problem is that when the 'arrayData' is used in the MapView component, only the initial array marker is displayed, even though the console log output shows all the correct elements from the database. It seems like the function is not working as expected. Can anyone provide some guidance or help on this matter? Thank you so much!