Debug JS remotely on - map jumps to initialRegion when adding a new marker.

[compojoom]

This thing is driving me crazy. I have this code:

<View style={styles.mapContainer}>
                    <MapView style={styles.map}
                             initialRegion={{
                                 latitude: this.state.position.lat,
                                 longitude: this.state.position.lng,
                                 latitudeDelta: 0.0922,
                                 longitudeDelta: 0.0421,
                             }}

                             onPress={(e) => this.onMapPress(e)}
                    >
                        {(() => {
                            if (this.state.marker) {
                                return <MapView.Marker
                                    key={this.state.marker.key}
                                    onDragEnd={(e) => this.onMarkerDragEnd(e)}
                                    coordinate={this.state.marker.coordinate}
                                    pinColor={this.state.marker.color}
                                    draggable
                                />
                            }
                        })()}
                    </MapView>
                </View>

and onMap press:

    onMapPress(e) {
        if(!this.state.marker)
        {
            this.setState({
                marker: {
                    coordinate: e.nativeEvent.coordinate,
                    key: id++,
                    color: randomColor(),
                },
            });
        }
    }

So basically when you click on the map i'm inserting a single marker. This works fine, however there is one issue. When I click on the map to insert the marker, the marker is inserted, but the map jumps to the original region.

But actually, if debug js remotely is turned off - the map doesn't jump to the initialRegion and behaves as expected. Any ideas?

[compojoom]

Okay, After initialy losing half a day for this. Now 4mins after posting I discovered, that If I do what the examples are doing, then everything is fine. So I don't have to set initialRegion, but region and monitor the region change.

<View style={styles.mapContainer}>
                    <MapView style={styles.map}
                             region={this.state.region}
                             onRegionChange={this.onRegionChange.bind(this)}

                             onPress={(e) => this.onMapPress(e)}
                    >
                        {(() => {
                            if (this.state.marker) {
                                return <MapView.Marker
                                    key={this.state.marker.key}
                                    onDragEnd={(e) => this.onMarkerDragEnd(e)}
                                    coordinate={this.state.marker.coordinate}
                                    pinColor={this.state.marker.color}
                                    draggable
                                />
                            }
                        })()}
                    </MapView>
                </View>

onRegionChange(region) {
        this.setState({ region });
    }

Doing it like this obviously updates the region and even when the map rerenders - we are at the correct position.