Using onPress inside MapView.Callout always fires

Question

I'm using MapView.Callout to display a popup window when a user selects a pin on my map.

When I add a button in that popup window that has an onPress() method defined, this method is always fired when the state is populated. ie, on load - i get a bunch of alerts showing from the code below:

 render() {
    const {name, type} = this.props;

    return (
        <Card
            containerStyle={styles.bubble}
            title={name}
            image={this.selectImage({type})}>
            <Button
                icon={{name: 'contact-phone'}}
                backgroundColor='#80A33F'
                buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
                title='Book Now'
                onPress={window.alert('button pressed')}
            />
        </Card>
    );
}

How does one avoid this happening? this happens on the load of the map itself, not when a user clicks on any given pin...

Answer 1

Try this:

onPress={()=>{ window.alert('button pressed') }}

Answer 2

Use npm i react-native-simple-dialogs

I solved my problem like this

import { Dialog } from 'react-native-simple-dialogs';

    <MapView.Marker
      identifier={item.localId}
      coordinate={{latitude: item.location.lat,
      longitude: item.location.lng}}
      onPress={() => this.setState({dialogVisible:true,item:item})}
    >
    <Fa name="map-marker" style={{color:"#673AB7",fontSize:50}} />
   </MapView.Marker>

   <Dialog 
            visible={this.state.dialogVisible} 
            onTouchOutside={() => this.setState({dialogVisible: false})} >

    <Button 
      onPress={()=>this.setState({dialogVisible:false})} 
      transparent style={{alignSelf:'right',position:'absolute',right:5}}>
      <Text><Fa style={{fontSize:30,color:"#673AB7"}} name="close"></Fa>
      </Text>    
    </Button>

    <View style={{flexDirection:"row"}}>
    <Text style={{fontWeight: "bold"}}>Name : </Text>
    <Text>{this.state.item.displayName}</Text></View>

    <Button 
     onPress={()=>{this.setState({dialogVisible:false});
     this.chatNavigate(this.state.item)}} 
     full iconLeft style={{backgroundColor:"#673AB7",width:300}}
     >
     <Icon name='md-chatbubbles'  style={{color:'#fff'}}/>
     <Text style={{color:"#fff"}}>Chat</Text>
     </Button>
  </Dialog>