React-native Style "transform:rotate" different behaviour iOS and Android

Question

I'm developing a mobile application with React Native, showing vehicles on a map. Each vehicle is represented with an image of an arrow and to indicate the direction of the vehicle I do it by applying the style transform: rotate ${course}deg. Course is an attribute of each vehicle. The strange thing is that on iOS the course is displayed fine but on Android the direction of the arrows are wrong and there is no pattern. Previously I tried to use an SVG icon but the same problem happened.

Does anyone have any idea what could be causing this difference? Thanks in advance

Bug image:

This is the code of the Arrow component, it only receives the degrees of rotation

import React from 'react';
import { Image, View } from 'react-native';
import ArrowLocation from '../images/icons/arrow-location.png';

const LocationArrow = ({ course }) => {
  return (
    <View 
      style={{
         width: 30, 
         height: 30, 
         transform: [{ rotate: `${course}deg` }],
      }}>
        <Image source={ArrowLocation} />
    </View>
  );
};

export default LocationArrow;

Map Library: https://github.com/venits/react-native-map-clustering

Answer 1

The issue you are experiencing with the direction of the arrows could be related to the differences in the rendering engines or coordinate systems in iOS and Android. Some causes I can think of are

1. Te coordinate system differences - It's possible that the coordinate system used by the map library or the native rendering engine differs in iOS and Android.

2. Image rendering differences - It's also possible that there are some differences in the way images are rendered in both OS.

3. There could also be differences in how the rotation origin is handled in iOS and Android.

I updated your code and included the transformOrigin property. Hope this helps or guides you to the solution.

import React from 'react';
import { Image, View } from 'react-native';
import ArrowLocation from '../images/icons/arrows-location.png';

const LocationArrow = ({ course }) => {
 return (
   <View style={{
           width: 30,
           height: 30,
           transform: [{ rotate: `${course}deg`}],
           transformOrigin: 'center'
         }}>
    <Image source={ArrowLocation} />
   </View>
 );
};

export default LocationArrow;