multiple markers are not showing on map in react Native

Question

i am trying to show multiple markers on map in but i the markers are not showing and there's no error so i am unable to solve it,so Basically i am trying to get the coordinates from the state and trying to show multiple markers.Since i am new to react Native i might be doing something stupidly wrong.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps'


export default class App extends Component {
  render() {
    this.state = {
      markers: [{
        title: 'hi',
        coordinates: {
          latitude: 3.148561,
          longitude: 101.652778
        },
      },
      {
        title: 'hello',
        coordinates: {
          latitude: 3.149771,
          longitude: 101.655449
        },

      },
      {
        title: 'hey',
        coordinate: {
          latitude: 33.5336684,
          longitude: 131.3420892
        },

      },
      {
        title: 'heyThere',
        coordinate: {
          latitude: 24.8345714,
          longitude: 67.3589759
        }
      }
      ]
    }
    return (

      <MapView
        style={{ flex: 1 }}
        showsUserLocation={true}

      >
        {this.state.markers.map((marker, index) => (
          <MapView.Marker key={index}
            coordinate={marker.coordinates}
            title={marker.title}
          />
        ))}
      </MapView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Answer 1

Move

this.state = {
      markers: [{
        title: 'hi',
        coordinates: {
          latitude: 3.148561,
          longitude: 101.652778
        },
      },
    ...

to the constructor or just keep it in the class (Remove from the render function).

There are typos in markers array. Set the same key for all elements in the markers array (Currently you have coordinates and coordinate ).

Also try to change the style of the MapView to { width: '100%', height: '100%' } if it doesn't render the MapView.

Answer 2

Your code is working fine. I think your all marker are overlapped on each other or you pass wrong latitude or longitude. Please check your marker array something like this.

 markers: [
        {
          coordinates: {
            latitude: 45.524548,
            longitude: -122.6749817,
          },
          title: "Best Place",
          description: "This is the best place in Portland",
          image: Images[0],
        },
        {
          coordinates: {
            latitude: 45.524698,
            longitude: -122.6655507,
          },
          title: "Second Best Place",
          description: "This is the second best place in Portland",
          image: Images[1],
        },
        {
          coordinates: {
            latitude: 45.5230786,
            longitude: -122.6701034,
          },
          title: "Third Best Place",
          description: "This is the third best place in Portland",
          image: Images[2],
        },
        {
          coordinates: {
            latitude: 45.521016,
            longitude: -122.6561917,
          },
          title: "Fourth Best Place",
          description: "This is the fourth best place in Portland",
          image: Images[3],
        },
      ]