Bug report

Summary

Drag the marker on the map, then try to press a button and it will not respond to the touch event.

Environment info

react-native info output: System: OS: macOS 10.15.7 CPU: (12) x64 Intel® Core™ i7-8700 CPU @ 3.20GHz Memory: 1.69 GB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 15.0.1 - /usr/local/bin/node npm: 6.14.8 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2 IDEs: Android Studio: 4.1 AI-201.8743.12.41.7199119 Xcode: 12.4/12D4e - /usr/bin/xcodebuild npmPackages: react: ^16.13.1 => 16.14.0 react-native: ^0.63.2 => 0.63.4

Steps to reproduce

Drag marker and then try touching any button in the header (react navigation) and they will not respond to touch.

Reproducible sample code

` import React, { Component } from ‘react’; import MapView, { Callout, Circle, Marker, PROVIDER_GOOGLE } from ‘react-native-maps’; import { KeyboardAwareScrollView } from ‘react-native-keyboard-aware-scroll-view’;

export default class Map extends Component { _mapViewRef = null;

constructor(props)
{
  super(props);
  console.log('\tMap()');
  this._dataMgr = DataManager.GetInstance();
  this.state =
  {
  };

  this._mapViewRef = React.createRef();
}

render()
{
  const locationData = 
  {
    mapLocation 
    {
      latitude: 36.7783,
      longitude: 119.4179,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    },
    alertLocation 
    {
      latitude: 36.7783,
      longitude: 119.4179,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }
  };
  
  return (
  <KeyboardAvoidingView style={styles.container}>
    <KeyboardAwareScrollView
      contentContainerStyle={{flexGrow: 1}}
      keyboardShouldPersistTaps={'always'}
    >

      <View style={{height: '100%'}}>
        <MapView
          ref={this._mapViewRef}
          provider={PROVIDER_GOOGLE}
          onPress={(e) =>
          {
          }}
          onRegionChangeComplete={async(region, isGesture) =>
          {
            console.log('Map.onRegionChangeComplete()');
          }}
          region={(locationData && locationData.mapLocation) ? locationData.mapLocation :
          {
            latitude: this.props.geofenceArea.location.coordinates[1],
            longitude: this.props.geofenceArea.location.coordinates[0],
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          showsUserLocation={true}
        >
          <Circle
            center={locationData.alertLocation}
            radius={500}
            onRegionChangeComplete={async(e) =>
            {
              console.log('Circle.onRegionChangeComplete()');
              return true;
            }}
            strokeWidth = { 5 }
            strokeColor = { '#1a66ff' }
            fillColor = { 'rgba(230,238,255,0.5)' }
          />
          <Marker
            draggable
            coordinate={locationData.alertLocation}
            onDragEnd={async(e) =>
            {
              console.log('OnMarkerDragEnd()');
              return true;
            }}
            pinColor={"green"}
          />
        </MapView>

    </KeyboardAwareScrollView>
  </KeyboardAvoidingView>
  );
}

}

`

Possible solution is using react-native-gesture-handler’s TouchableOpacity but that is not a solution but rather a workaround. This would only fix buttons and not text inputs.