React-native-maps marker method animateMarkerToCoordinate throws undefined error

Question

I'm using react-native-maps to display a map view in my React Native app. I followed the example to animate a marker coordinate but whenever I call the animateMarkerToCoordinate() method I get an undefined error. I try to call said method in my componentWillReceiveProps after doing some checks.

Here is my componentWillReceiveProps:

componentWillReceiveProps(nextProps) {
    if(nextProps.user && JSON.stringify(nextProps.user.profile.location) != JSON.stringify(this.props.user.profile.location)) {
        const userCoordinate = this.state.userCoordinate
        const newUserCoordinate = {
            latitude: nextProps.user.profile.location.latitude,
            longitude: nextProps.user.profile.location.longitude,
        }

        if (Platform.OS === 'android') {
            console.log('platform = android')
            if (this.userMarker) {
                // none of this options work, both return undefined
                this.userMarker._component.animateMarkerToCoordinate(newUserCoordinate, 500)
                this.userMarker.animateMarkerToCoordinate(newUserCoordinate, 500)
            }

        } else {
            userCoordinate.timing(newUserCoordinate).start();
        }
    }
}

And here is the MapView part of my render method:

<MapView
  style={styles.map}
  initialRegion={this.regionFrom(this.props.user.profile.location)}
  mapType='standard' >

    <Marker.Animated
      ref={marker => { this.userMarker = marker; }}
      coordinate={this.state.userCoordinate}
      onPress={() => this.handleOnPress()} >
        <UserMarker loaded={this.props.loaded} />
    </Marker.Animated>
</MapView>

And my state if it might help:

constructor(props) {
    super(props);

    this.state = {
        region: this.regionFrom(this.props.user.profile.location),
        profileSelected: null,
        userPreviewVisible: false,
        userCoordinate: new AnimatedRegion({
            latitude: props.user.profile.location.latitude,
            longitude: props.user.profile.location.longitude,
        }),
    }
}

Here's the log error (same error appears whenever I use marker._component or just marker, I tried changing it in the code to see if it was the problem):

I had to add it as a picture because stack overflow's editor was giving an error when I posted the stack trace as text.

Please note that I'm only testing on android and I'm really stuck in this one. If anyone could help with something I'd appreciate it. Thank you.

Answer 1

It took a long time to reproduce this, but here's the two situations I've found where you will run into this:

1. You used Expo or create-react-native-app which itself bundles the same library versions as Expo.
2. You are using a react-native-maps version below v0.20.0.

Without your package.json , I cannot tell which situation you are running into, so I'll explain what is happening in both situations.

Case #1

The latest version of the Expo SDK (v25) is only updated to react-native-maps v0.19.0 . If you follow the commit history, you'll see that this feature was added in v0.20.0 . So there is no way for you to use this method. You will instead have to use the same code as what is done for iOS. So you can get rid of that entire if block and just use:

userCoordinate.timing(newUserCoordinate).start();

The performance on Android will be terrible though which was the motivation for that fix.

Case #2

Same reason as above. You can fallback and use the same code as above, however, I recommended fixing this by upgrading your react-native and react-native-maps versions so you can use the new method. That way, you will get the better performing animations on Android. Do be mindful of the hard react-native version dependency that react-native-maps has. To elaborate:

• Currently the latest react-native-maps release is v0.20.1 and that has a hard dependency on react-native v0.51.0.
• So if you used v0.20.1 with v0.54.0, your project will not start and you'll get errors.

If for some reason you must use a newer version of react-native , I've tested and found that installing the latest react-native-maps version from the master branch will allow it to work with react-native versions up to the current latest release (v0.54.0). To do this, reinstall the react-native-maps dependency with:

# Using yarn:
yarn add https://github.com/react-community/react-native-maps.git

# Using npm:
npm install https://github.com/react-community/react-native-maps.git --save

I do not recommend this as installing directly from the master branch and using unreleased code generally means you are using less stable, less tested code.