Bug

I have create a map with drag-able markers, but when i try to drag a marker to a position, after successfully drag. I not able able to perform outside clicks until i don’t move MapView a bit.

Environment info

React-Native - v60.5 React-Native-Maps - 0.25.0

React native info output:

System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Memory: 29.79 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.14.1 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.11.2 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 26.0.2, 27.0.3, 28.0.2, 28.0.3, 29.0.0
      System Images: android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-Q | Android TV Intel x86 Atom, android-Q | Intel x86 Atom, android-Q | Google APIs Intel x86 Atom, android-Q | Google APIs Intel x86 Atom_64, android-Q | Google Play Intel x86 Atom, android-Q | Google Play Intel x86 Atom_64
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2
    react-native-git-upgrade: 0.2.7
    react-native-swift-cli: 2.3.0

Library version: 0.25.0

Steps To Reproduce

1. Drag a marker to any specific location.
2. Try to click outside the map view. You will not be able to click outside the map until you don’t move MapVIew a bit. …

Describe what you expected to happen:

1. After onDragEnd outside should be able to perform.

Reproducible sample code

 import React from 'react';
import { TextInput, Text, ScrollView, Button } from 'react-native';
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';

class Location extends React.Component {
  mapRef = React.createRef();
  markerRef = React.createRef();

  constructor(props) {
    super(props);
    const initialRegion = {
      latitude: 30.7333,
      latitudeDelta: 0.05,
      longitude: 76.7794,
      longitudeDelta: 0.021,
    };

    this.state = {
      initialRegion,
      marker: {
        latitude: 30.7333,
        longitude: 76.7794,
      },
      region: initialRegion,
    };
  }

  onDragEnd=(e) => {
    this.setState({ marker: e.nativeEvent.coordinate });
  }

  render() {
    const {
      marker, initialRegion, region,
    } = this.state;

    return (
      <ScrollView>
        <TextInput />
        <Text>
          {'Long Press & Drag the pointer to select exact location'}
        </Text>
        <MapView
          ref={this.mapRef}
          provider={PROVIDER_GOOGLE}
          style={{ flex: 1 }}
          initialRegion={initialRegion}
          region={region}
        >
          <Marker.Animated
            draggable
            ref={this.markerRef}
            coordinate={marker}
            onDragEnd={this.onDragEnd}
          />
        </MapView>
        <Button
          block
          smallrounded
          onPress={() => this.onSubmit('Photo')}
        >
          <Text upperCase>NEXT</Text>
        </Button>
      </ScrollView>
    );
  }
}

export default Location;