title: MapView Callout onPress not triggering
body: <p>I've got a <code>MapView</code> from and I'm trying to render a location button, which is currently rendered in a callout and says "Find Me." The code is below. </p>
  
  <p>The button displays nicely, but I can't get the onPress to work: when I click "Find Me", neither the "callout hello" or "button hello" log statements are logged, so nothing has been pressed (the button doesn't show any opacity on press either).</p>
  
  <p>I've also tried rendering the button without the callout. It displays but still isn't pressed.</p>
  
  <p>Help!</p>
  
  <pre class="lang-js prettyprint-override"><code>
  import React, { Component } from "react";
  import { MapView } from "expo";
  import { View, Button } from "react-native";
  import { BLText } from "../components/StyledComponents";
  import F8StyleSheet from "../components/F8StyleSheet";
  import { connect } from "react-redux";
  const { Marker, Callout } = MapView;
  import { getLocationAsync } from "../redux/actions/userActions";
  
  FindMeButton = ({ onPress }) =&gt; {
    return (
      &lt;Callout
        style={styles.locationButtonCallout}
        onPress={() =&gt; console.log("callout hello")}
      &gt;
        &lt;Button
          onPress={() =&gt; console.log("button hello")}
          title={"Find Me"}
          style={styles.locationButton}
        /&gt;
      &lt;/Callout&gt;
    );
  };
  
  class MapScreen extends Component {
    static navigationOptions = {
      title: "Nearby Stations"
    };
  
    renderMarkers() {
      return (markers = Object.keys(this.props.stations).map(key =&gt; {
        const station = this.props.stations[key];
        return (marker = (
          &lt;Marker
            key={key}
            // onPress={this.onMarkerPress.bind(this, station)}
            coordinate={{
              latitude: Number(station.location.lat),
              longitude: Number(station.location.lng)
            }}
          &gt;
            &lt;Callout
              onPress={() =&gt; {
                this.props.navigation.navigate("ListScreen");
                // this.props.navigation.navigate("StationDetail", {
                //   title: station.title
                // });
              }}
            &gt;
              &lt;BLText&gt;{station.title}&lt;/BLText&gt;
            &lt;/Callout&gt;
          &lt;/Marker&gt;
        ));
      }));
    }
  
    render() {
      console.log("rendering at region:", this.props.userLocation);
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;MapView
            provider={MapView.PROVIDER_GOOGLE}
            style={{ flex: 1 }}
            region={this.props.userLocation}
            showsUserLocation={true}
          &gt;
            {this.renderMarkers()}
            &lt;FindMeButton onPress={this.props.getLocationAsync} /&gt;
          &lt;/MapView&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      stations: state.main.stations,
      userLocation: state.main.currentRegion
    };
  };
  
  export default connect(
    mapStateToProps,
    { getLocationAsync }
  )(MapScreen);
  
  const styles = F8StyleSheet.create({
    locationButtonCallout: {
      borderRadius: 0,
      opacity: 0.8,
      backgroundColor: "lightgrey",
    },
    locationButton: {
      backgroundColor: "lightgrey",
      borderRadius: 10,
      opacity: 0.8
    },
    container: {
      flex: 1,
      flexDirection: "row",
      justifyContent: "center"
    }
  });
  
  </code></pre>