I have an issue witn react-native-maps and iOS. On my screen I have a MapView and a modal with GooglePlacesAutoComplete. Whenever I type an address on the autocomplete, a pin appears on the MapView pointing at the location.

If I want to drag that pin to another location, the address changes. However, when I want to press my Submit button to move to the next screen after the address change, nothing happens.

My MapView looks like this:

<ScrollView>
   <View style={mapViewStyle}>
      <MapView
         provider={PROVIDER_GOOGLE}
         initialRegion={initialRegionMap}
         region={initialRegionMap}
         style={StyleSheet.absoluteFillObject}
         showsUserLocation
      >
         {eventLocation && (
            <Marker
               coordinate={eventLocation}
               title={eventAddress}
               draggable
               onDragEnd={e => onMarkerDragEnd(e.nativeEvent.coordinate)}
             />
          )}
      </MapView>
  </View>

  <Button
     text="Submit"
     style={saveButtonStyle}
     onPress={registerNewEvent}
  />
</ScrollView>

My onMarkerDragEnd function looks like this:

onMarkerDragEnd = coord => {
  const { initialRegionMap } = this.state;
  const newInitialRegion = { ...initialRegionMap };

  Geocoder.from(coord).then(json => {
    const { location } = json.results[0].geometry;
    const { lat, lng } = location;

    const geohashValue = geohash.encode(lat, lng);
    const address0 = json.results[0].address_components[1].long_name;
    const address1 = json.results[0].address_components[2].long_name;
    const address2 = json.results[0].address_components[3].long_name;
    const address3 = json.results[0].address_components[4].short_name;
    const address4 = json.results[0].address_components[5].long_name;
    const address5 = json.results[0].address_components[0].long_name;

    const address = `${address5}, ${address0}, ${address1}, ${address2}, ${address3}, ${address4}`;

    newInitialRegion.latitude = lat;
    newInitialRegion.longitude = lng;

    this.setState({
      eventLocation: {
        latitude: lat,
        longitude: lng
      },
      eventGeohash: geohashValue,
      initialRegionMap: newInitialRegion,
      eventAddress: address
    });
  }).catch(error => {
    console.log(error);
  });
}

Button is a custom made component I made based on TouchableOpacity. Trying to change the component to a run of the mill TouchableOpacity doesn't seem to work.

I also try to code the button like this:

<Button
  text="Submit"
  style={saveButtonStyle}
  onPress={() => registerNewEvent()}
/>

but no dice either.