rotations style has no effect

[joewalnes]

Reading the docs, it appears that "rotation" is a valid style and defined as a number in ViewStylePropTypes.

However I've been unable to get it to work. I've tried <View style={{rotation:1.57})>...</View> and many variations (in both degrees and radians) but it appears to have no effect.

Is this a bug, or am I misunderstanding what it's supposed to do?

[jparishy]

I don't see any exported property for rotation in the code, but there's one for transformMatrix though that isn't quite as friendly.

If you add the following to RCTViewManager.m it will work as expected:

RCT_CUSTOM_VIEW_PROPERTY(rotation, CGFloat, RCTView)
{
    CGFloat angle = [RCTConvert CGFloat:json];
    CGAffineTransform transform = CGAffineTransformRotate(view.transform, angle);

    view.transform = transform;
}

I'll add a PR for this

[joewalnes]

I've validated your fix and confirm it works for me

[chadobado]

Thanks to @jparishy for this.

For anyone else interested, if you want to supply actual degrees (instead of radians) you will need to compensate for the conversion between them: 1 degree = 0.0174532925 radians

I also needed to make this work with tweening for react-tween-state.

Ended up here:

RCT_CUSTOM_VIEW_PROPERTY(rotation, CGFloat, RCTView)
{
  CGFloat angle = [RCTConvert CGFloat:json];
  angle = angle * 0.0174532925;
  CGAffineTransform transform = CGAffineTransformIdentity;
  transform = CGAffineTransformRotate(transform, angle);
  view.transform = transform;
}

[ee0pdt]

I tried this method, but when I re-render the component with a different value of rotation I don't think the component resets back to zero - it seems to just keep rotating it!

[jsierles]

As discussed in #423, a proper implementation of this is being worked on internally at Facebook.

[brentvatne]

This is actually working now

Also see the Transform style docs