react-native-maps: TouchableHighlight or TouchableOpacity doesn't work inside Callout

This is my current code setup in render

<View style={styles.view_container}>

              <MapView
                    style={styles.map}
                    region={this.state.region}
                    showsUserLocation={YEAH}
                    followsUserLocation={YEAH}
                    onRegionChange={this.onRegionChange}
                  >
                    {this.state.markers.map(marker => (
                      <MapView.Marker
                        coordinate={marker.latlng}
                      >

                         <MapView.Callout>
                            <CustomCallout {...marker}/>

                         </MapView.Callout>

                        </MapView.Marker>
                    ))}
              </MapView>
              <TextInput />

            </View>

I can’t seem to get the custom callout to listen to presses done inside the CustomCallout. The code is this.

class CustomCallout extends Component{
  paypal(){
    console.log('presseeedd')
    }

  componentDidMount(){
    console.log('custom call props', this.props.title);
  }

  render(){
        return (
          <View style={{flex:1, flexDirection:'column'}}>
              <Text>{this.props.title}</Text>
              <Text>{this.props.description}</Text>
              <TouchableHighlight onPress={this.paypal.bind(this)}>
                <Text>Reserve Now</Text>
              </TouchableHighlight>
          </View>
        )
  }
}