Using a method on a component in React Native Maps

Question

I am trying to use the animateMarkerToCoordinate method on a marker in React Native Maps.

The documentation proposes the following:

componentWillReceiveProps(nextProps) {
  const duration = 500

  if (this.props.coordinate !== nextProps.coordinate) {
    if (Platform.OS === 'android') {
      if (this.marker) {
        this.marker._component.animateMarkerToCoordinate(
          nextProps.coordinate,
          duration
        );
      }
    } else {
      this.state.coordinate.timing({
        ...nextProps.coordinate,
        duration
      }).start();
    }
  }
}

render() {
  return (
    <MapView initialRegion={...}>
      <Marker.Animated
        ref={marker => { this.marker = marker }}
        coordinate={this.state.coordinate}
      />
    </MapView>
  );
}

I tried to implement this in my code. The code in the documentation is written in ancient React (componentWillReceiveProps is deprecated)

<MapView.Marker.Animated draggable
                coordinate={this.state.playerMarkerPositionFuture}
                title={"Player"}
                description={"Player marker!"}
                image={require('./assets/player_map_icon_small_transparent.png')}
                onDragEnd={(event) => this.setState({ playerMarkerPositionFuture: event.nativeEvent.coordinate })}
                onDragStart={this.movePlayerMarker()}
                />

...

movePlayerMarker = () => {
    this.marker._component.animateMarkerToCoordinate(
      nextProps.coordinate,
      1000
    );
  }

However I get this error:

undefined is not an object (evaluating '_this.marker._component')

Found an better example here.

Dwipal Parmar · Accepted Answer · 2021-01-26 08:33:18Z

1

Remove _component from animation marker method.Just write following

this.marker.animateMarkerToCoordinate(
          nextProps.coordinate,
          duration
        );

instead of

this.marker._component.animateMarkerToCoordinate(
          nextProps.coordinate,
          duration
        );

It will work.

answered Jan 26, 2021 at 8:33

Dwipal Parmar

2922 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dclipca · Accepted Answer · 2019-05-08 14:45:24Z

1

Found an better example here: https://github.com/react-native-community/react-native-maps/blob/master/example/examples/AnimatedMarkers.js

answered May 8, 2019 at 14:45

dclipca

1,9372 gold badges22 silver badges57 bronze badges

Collectives™ on Stack Overflow

Using a method on a component in React Native Maps

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related