CODEWITHSUNDEEP
react-native
jazzjazzy
jazzjazzy

Reputation: 432

React native rotate image marker using transform

What I am tring to do is rotate an image marker, I have a series of lat and long in a state called markers as well as the bearing and I want to rotate the image to the bearing as the marker moves across the map 

 render() {
    return (
      <View style={styles.container}>
            <MapView style={styles.map}
            initialRegion={{
                    latitude: this.state.latitude,
                    longitude: this.state.longitude,
                    latitudeDelta: 0.01,
                    longitudeDelta: 0.01,
                }}
        >
          {Object.entries(this.state.markers).map((marker, index)=> (
              <MapView.Marker
                key= {index}
                coordinate={getCoordinates(marker)}
                title= {marker.title}
                discription= {index}
              >
                <Image source={require('./assets/test-50.png')} style={{transform: [{ rotate : '${marker.bearing}deg'}]}}/>
            </MapView.Marker>  
            ))}
            </MapView>  
      </View>
    );
   }

The problem is that I can't seem to add the bearing as part of the rotation 

style={{transform: [{ rotate : '${marker.bearing}deg'}]}}

works fine if I put in a value such as '45deg' but I am unsure how to get a dynaic value in there. not to sure what the problem is, sorry I am very noob to this so I guess there is something I am missing

Upvotes: 1

Views: 2069

Answers (1)

Sarmad Shah
Sarmad Shah

Reputation: 3805

style={{transform: [{ rotate : '${marker.bearing}deg'}]}}

As I see, You have used single quotes. You have to use back-ticks for this. They are also called template literals and this syntax ${variableName}, will only work in back-ticks. For more information visit here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Upvotes: 2

Related Questions