CODEWITHSUNDEEP
google-mapsanimationreact-nativemarkersreact-native-maps
0123
0123

Reputation: 171

React Native Map (Airbnb) + Markers animation

I want to animate the React-native-maps {Google} markers.

I tried with the animated module, but the markers do not allow complex styles.

Is there any function to modify the coordinates of the marker and give it animation?, like a:

marker.setAnimation(google.maps.Animation.BOUNCE);

I have tried with:

<MapView.Marker.Animated>

But I can not create the effect. Is there a function that edits the coordinates as an animation drop?

Upvotes: 0

Views: 2933

Answers (1)

Website Is Fun
Website Is Fun

Reputation: 300

React native map marker is by default "not animated", it can not accept gif images, sprites, animation api and so on . . However, I was able to animate it the tough way through image transition. Here is my example:

constructor(props, context) {
  super(props, context);
  this.state = {
    startTransition: 1,
    endTransition: 4,
  };
}

componentDidMount() {
  this.animate();
}

animate() {
  const {startTransition, endTransition} = this.state;
  if(startTransition < endTransition){
    let currentTransition = startTransition + 1;
    this.setState({startTransition: currentTransition});
  } else {
    this.setState({startTransition: 1});
  }
  let x = setTimeout(()=>{
    this.animate()
  }, 500);
}

renderImg(imgTrans) {
  if(imgTrans === 1) {
    return require('./walk1.png');
  }
  if(imgTrans === 2) {
    return require('./walk2.png');
  }
  if(imgTrans === 3) {
    return require('./walk3.png');
  }
  if(imgTrans === 4) {
    return require('./walk4.png');
  }
}

render() {
  const {startTransition} = this.state;
  return (
    <MapView.Marker
      coordinate={tapCoords}
      image={this.renderImg(startTransition)}
    >
  )
}

This is how I did the animation for now.

Upvotes: 5

Related Questions