React-native-map marker color is not changing

Question

I want to change the color of the marker sequentially. when the App is firstly rendered all of the colors of the marker should be red. after one second later first marker(no-1) color want to be blue. then after the one-second first marker color goes to previous state color. but the second marker (no-2) marker goes to blue.

for example - we have six marker

In one-second - blue -red -red -red -red- red In two-second - red -blue - red -red -red -red In three-second - red -red -blue -red -red -red In four-second - red -red- red -blue -red -red In five-second - red -red- red -red -blue -red In six-second - red -red- red -red -red -blue

here is my code - the active state is changing but not the color of the marker.

import React from 'react';
import { View, Text, StyleSheet,Animated, Platform } from 'react- 
native';
import MapView, {AnimatedRegion,Polyline} from 'react-native-maps';

export default class App extends React.Component {
 state = {
currentLongitude: 'unknown', 
currentLatitude: 'unknown',
startTransition: 0,
endTransition: 5,
  markers: [{
    title: 'lat: 28.6095206, log: 77.1011353',
    index: 0,
    active: false,
    coordinates: {
      latitude: 28.6095206,
      longitude: 77.1011353,

    },
  },
  {
    title: 'lat: 28.6151759, log: 77.0842171',
    index: 1,
    active: false,
    coordinates: {
      latitude: 28.6151759,
       longitude: 77.0842171,

    }, 

  },
  {
    title: 'lat: 28.6242541, log: 77.0652866',
    index: 2,
    active: false,
    coordinates: {
      latitude: 28.6242541,
       longitude: 77.0652866,

    }, 

  },
  {
    title: 'lat: 28.6328224, log: 77.0863152',
    index: 3,
    active: false,
    coordinates: {
      latitude: 28.6328224,
       longitude: 77.0863152,

    }, 

  },
  {
    title: 'lat: 28.6364551, log: 77.0968294',
    index: 4,
    active: false,
    coordinates: {
      latitude: 28.6364551,
       longitude: 77.0968294,

    }, 

  },
  {
    title: 'lat: 28.6364551, log: 77.0968294',
    index: 5,
    active: false,
    coordinates: {
      latitude: 28.6109522, 
      longitude: 77.1131802,

    },   
  }, 
 ]
};

componentDidMount = () => { 
this.animate()
};
// shouldComponentUpdate(){
//   return false
// }

async animate() {
 const {markers} = this.state;
 for(var i in markers){
  if(markers[i]['active'] == true){  
    const newItems = [...this.state.markers];
    newItems[i].active = !newItems[i].active;
    this.setState({marker: newItems})   
  }

}

if(markers[this.state.startTransition].index==
this.state.startTransition){
  if(markers[this.state.startTransition].active==false){
    const newItems = [...this.state.markers];
      let index = this.state.startTransition

      newItems[index].active = !newItems[index].active;

      this.setState({ markers:JSON.parse(JSON.stringify(newItems)) 
   });    
  }

 }

if(this.state.startTransition < this.state.endTransition){

  let currentTransition = this.state.startTransition + 1;
  this.setState({startTransition: currentTransition});

} else {
  this.setState({startTransition: 0});
}
let x = setTimeout(()=>{

  this.animate()
 }, 1000);
}


render() {
const {currentLatitude} =  this.state;
const {currentLongitude} = this.state;
const Latitude = parseFloat(currentLatitude)
const Longitude = parseFloat(currentLongitude)

return (
  <View style={styles.container}>
  <MapView
    style={styles.map}
     region={{
      latitude: 28.6095206,
      longitude: 77.1011353,
      latitudeDelta: 0.155,
      longitudeDelta: 0.151,
    }}
  >

    {this.state.markers.map(marker => (

 <MapView.Marker.Animated 
  coordinate={marker.coordinates}
  title={marker.title}
  key = {marker.index}
  pinColor={marker.active==true?'blue':'red'}
/>
))
}


     <Polyline
coordinates={[
{ latitude: 28.6095206, longitude: 77.1011353 },
{ latitude: 28.6151759, longitude: 77.0842171},
{ latitude: 28.6242541, longitude: 77.0652866},
{ latitude: 28.6328224, longitude: 77.0863152},
{ latitude: 28.6364551, longitude: 77.0968294},
{ latitude: 28.6109522, longitude: 77.1131802 } ]}
    strokeColor="#000" 
    strokeColors={[
        '#7F0000',
        '#00000000', 
        '#B24112',
        '#E5845C',
        '#238C23',
        '#7F0000'
    ]}
    strokeWidth={6}
  /> 
      </MapView>
     </View>
    );
   }
  }

  const styles = StyleSheet.create({
   container: {
    ...StyleSheet.absoluteFillObject,
     justifyContent: 'flex-end',
      alignItems: 'center',
    },
   map: {
    flex: 1,
     ...StyleSheet.absoluteFillObject,
   },
 });

Answer 1

Changing the marker key property to something different

<Marker
  pinColor={marker.active==true?'blue':'red'}
  key={`${marker.index}-${marker.active ? 'active' : 'inactive'}`}
  // ... other props ...
/>

check this link also