CODEWITHSUNDEEP
javascriptreact-nativeexporeact-native-maps
Sasori_Zero
Sasori_Zero

Reputation: 80

React Native - Does MapView only accept explicit markers?

I'm really tearing my hair out over trying to make a mapview in my app dynamically repopulate itself. First I tried to do the following:

render()
{
const neoMarker = (lat, long, title, desc) => {
      <MapView.Marker
      coordinate={{latitude: lat,
          longitude: long,}}
      title={title}
      description={desc}
      onPress={() => this.setState({jvisible: true})}>
      <FAB
    small
    icon="add"
    onPress={() => this.setState({jvisible: true})}/>
      </MapView.Marker>
    }

    var noGuest = 5;
    var test = 37.43538;

    for(let i = 0; i < noGuest; i++){
      markerL.push(neoMarker(test, -122.4324, "New Job", "Testing Marker List"));
      test = test + 0.01000;
    }
}

  return (
  <View style={styles.container}>
  <MapView
    style={{ flex: 1 }}
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}>
     {markerL}
  </MapView>

This didn't work and the map appeared with no markers, so then I tried doing the same as before except using an index, in this case, markerL[0]. This didn't work either. So I finally tried to make it populate the make by invoking the neoMarker function itself instead of {markerL} with some generic input and the mapview still wouldn't render any markers.

When markers are explicitly defined they appear but this isn't a practical method outside the current dev build.

Therefore, does MapView explicitly not allow lists of implicit markers?

PS: I'm using Expo (https://expo.io/) to test and debug my code on mobile.

Upvotes: 0

Views: 58

Answers (1)

dave
dave

Reputation: 64677

When you do

someFunction = () => "abc"

you get back "abc". But when you do:

someFunction = () => {
    "abc"
}

you get back undefined.

There could be another issue as well, but at first glance it looks like you just aren't returning anything from neoMarker.

const neoMarker = (lat, long, title, desc) => {
    <MapView.Marker

needs to be

const neoMarker = (lat, long, title, desc) => {
    return <MapView.Marker

To demonstrate: 

const noReturn = () => {
    "abc";
}

const withReturn = () => {
    return "xyz";
}

console.log(noReturn(), withReturn());

Upvotes: 2

Related Questions