CODEWITHSUNDEEP
react-nativereact-native-maps
SKeney
SKeney

Reputation: 2301

Hiding marker callout until completion of animateToRegion

How would I go about hiding a callout from appearing until after animateToRegion has completed? 

            <Marker
                ref={(ref) => {this.markerRef = ref; }}
                coordinate={mapMarker.location.latlng}
                title={mapMarker.location.streetName}
                stopPropagation={true}
                pointerEvents='auto'
                onPress={() => console.log('pressed')}
                onSelect={() => {
                    this.props.handlePress();
                }}
            >

the handlePress method that is passed is just a animateToRegion and is working properly and moving to the proper location as it should. But I need to delay the callout appearing until after the region has moved as the callout is as of now no longer centered due to the region change.

I've tried setting a timeout with showCallout but that has not worked as it creates a flickering of the callout. Any suggestions?

Upvotes: 0

Views: 512

Answers (1)

SKeney
SKeney

Reputation: 2301

Instead of trying to delay the callout from appearing I decided to animate the map appropriately to ensure the callout will always fit the screen. Basically whenever a marker is pressed I will take the lat, long of the marker and move the map so that the marker will be in the lower 25% of the map and centered (dependent on iOS or Android as they render the callout a little differently). This has allowed me to ensure the callout will never be behind components at the top of my screen.

I moved my <Marker ..> code to a separate custom component that I now am using.

<MapMarker 
    key={index}
    mapMarker={marker}
    handlePress={() => this.moveMapToCoordinate(marker.location)}
/>

Here is my moveMapToCoordinate function:

moveMapToCoordinate(markerLocationInfo) {
        this.map.animateToRegion({
            ...this.state.region,
            latitude: this.state.region.latitude + ((markerLocationInfo.latlng.latitude) - (this.state.region.latitude - (this.state.region.latitudeDelta/4))),
            longitude: Platform.OS === 'ios' ? this.state.region.longitude : this.state.region.longitude + ((markerLocationInfo.latlng.longitude) - (this.state.region.longitude))
        }, 500)
}

Upvotes: 1

Related Questions