Hello I want to add a draggable marker on the map "change a position of marker-based on map views" So I use react-native-maps,

when the user swipes the map and changes his location the marker following hem so in my code I log it in the console but I can't see anything in the logs or it's not made in this way! How can I make it draggable on the map?

here is what I want to achieve

here's my code

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

// create a ponent
class App extends Component {
  state = {
    latlng: {
      latitude: 35.1790507,
      longitude: -6.1389008,
    },
  };
  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          region={{
            latitude: 35.1790507,
            longitude: -6.1389008,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}>
          <Marker
            draggable
            coordinate={this.state.latlng}
            title="Home"
            onDragEnd={e => {
              console.log('dragEnd', e.nativeEvent.coordinate);
            }}
          />
        </MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    // height: 400,
    // width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

//make this ponent available to the app
export default App;

Hello I want to add a draggable marker on the map "change a position of marker-based on map views" So I use react-native-maps,

when the user swipes the map and changes his location the marker following hem so in my code I log it in the console but I can't see anything in the logs or it's not made in this way! How can I make it draggable on the map?

here is what I want to achieve

here's my code

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

// create a ponent
class App extends Component {
  state = {
    latlng: {
      latitude: 35.1790507,
      longitude: -6.1389008,
    },
  };
  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          region={{
            latitude: 35.1790507,
            longitude: -6.1389008,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}>
          <Marker
            draggable
            coordinate={this.state.latlng}
            title="Home"
            onDragEnd={e => {
              console.log('dragEnd', e.nativeEvent.coordinate);
            }}
          />
        </MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    // height: 400,
    // width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

//make this ponent available to the app
export default App;

• javascript
• reactjs
• react-native
• react-native-maps

Share Improve this question Follow asked Oct 29, 2019 at 5:52 Oliver DOliver D 2,89999 gold badges4848 silver badges9191 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You can use the onRegionChangeComplete property of MapView to achieve this.

First, change the state object like the following:

state = {
    markerData: {
      latitude: 35.1790507,
      longitude: -6.1389008,
    },
    mapData: {
      latitude: 35.1790507,
      longitude: -6.1389008,
      latitudeDelta: 0.015,
      longitudeDelta: 0.0121,
    },
  };

Change your MapView accordingly.

<MapView
     style={{flex: 1}}
     region={this.state.mapData}
     onRegionChangeComplete={this.handleRegionChange}>
     <Marker
        coordinate={this.state.markerData}
        title="Home"
        onDragEnd={e => {
              console.log('dragEnd', e.nativeEvent.coordinate);
            }}
      />
</MapView>

Then define a handler function, which changes the state values when the user drags over the map:

handleRegionChange = mapData => {
    this.setState({
      markerData: {latitude: mapData.latitude, longitude: mapData.longitude},
      mapData,
    });
  };

Hope this helps.