React-native: Error while updating 'transform' of a view managed by: RCTView

[ruskid]

I get this error:
Error while updating 'transform' of a view managed by: RCTView

React Native 0.32 works good.

• React Native version: 0.33
• Platform(s) (iOS, Android, or both?): Android
• Operating System (macOS, Linux, or Windows?): Linux

[OldrichKruchna]

+1
To me it happens when I push new route to the Navigator component

React Native version: 0.32, also 0.33
Platform(s) (iOS, Android, or both?): Android
Operating System (macOS, Linux, or Windows?): Windows

[HaydnChen]

+1
React Native 0.32 works good, after upgrade to 0.33 change router cannot work on Android.

[leeight]

@ruskid Can you post your sample code to reproduce it?

[ruskid]

I rolled back to 0.32 for the moment and I am using react native router flux library for routing, so I don't think my sample example will help you. you can check the library and try to reproduce the error by the examples there.

[comountainclimber]

experiencing the same issue after upgrading from .31 -> .33

[a289459798]

+1
this.props.navigator.push(this.getRoute(component, props));

[philipheinser]

+1 update to rn33

React Native version: 0.32, also 0.33
Platform(s) (iOS, Android, or both?): Android
Operating System (macOS, Linux, or Windows?): macOS

[Nahom7wos]

+1
Having the same issue and I'm not even on some advanced stuff. I just started doing some simple tutorials and this showed up.

React Native version: 0.33
Platform(s) (iOS, Android, or both?): Android
Operating System (macOS, Linux, or Windows?): Windows

[Rambos]

+1
No solution?

React Native version: 0.34
Platform(s) (iOS, Android, or both?): Android
Operating System (macOS, Linux, or Windows?): Windows

[jasonfma]

This is happening to me only when I try to put the navigator into a <Modal/>.

React Native version: 0.34.1
Platform(s) (iOS, Android, or both?): Android
Operating System (macOS, Linux, or Windows?): macOS

[dwilt]

This just started happening on my project and I'm not sure I even changed anything. We've been using 0.33 for a while here and have had successful builds so I'm not sure what changed.. haven't upgraded to 0.34 yet.

_Note_ We are using [react-native-router-flux(https://github.com/aksonov/react-native-router-flux) (3.35.0). Not sure if this is truly related but saw it mentioned above so sharing. This definitely has me stuck at this point.

Per @HaydnChen I downgraded to 0.32 and it worked perfectly.. not sure why 0.33 seemingly worked before

[ruskid]

@dwilt
Just upgraded to RN 0.34.0 and the error disappeared.

[tsvetann]

Just upgraded to RN 0.33.1 and got same error

[tsvetann]

RN 0.34 seems to solve the issue for me as well

[dwilt]

Agreed, sorry for not replying. Upgrading to 0.34.0 did fix it for me

[the-simian]

I can confirm that 0.34.1 and 0.34.0 _both still cause an issue with transform_. Even the 35 and 36 release candidates also cause the issue. the problem appears to be related to the newly introduced TransformHelper calling the TransformMatrix that was introduced here: https://github.com/facebook/react-native/commit/df053117778d8ebcc1943f20127e49078f79da0b

We are investigating the problem because we need to be able to use transform properties:

The root cause appears to have a relationship to type conversion from string to double in Java expected dynamic typedouble', but had type string'

see Crash log:

com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'transform' of a view managed by: RCTView
    at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:88)
    at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackViewManagerSetter.setProperty(ViewManagerPropertyUpdater.java:123)
    at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:42)
    at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:34)
    at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:220)
    at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:148)
    at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:890)
    at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:863)
    at com.facebook.react.uimanager.GuardedChoreographerFrameCallback.doFrame(GuardedChoreographerFrameCallback.java:32)
    at com.facebook.react.uimanager.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:131)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:771)
    at android.view.Choreographer.doCallbacks(Choreographer.java:586)
    at android.view.Choreographer.doFrame(Choreographer.java:555)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:759)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:135)
    at android.app.ActivityThread.main(ActivityThread.java:5422)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:914)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:707)
Caused by: java.lang.reflect.InvocationTargetException
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:77)
    ... 21 more
Caused by: com.facebook.react.bridge.UnexpectedNativeTypeException: TypeError: expected dynamic type `double', but had type `string'
    at com.facebook.react.bridge.ReadableNativeArray.getDouble(Native Method)
    at com.facebook.react.uimanager.TransformHelper.processTransform(TransformHelper.java:77)
    at com.facebook.react.uimanager.BaseViewManager.setTransformProperty(BaseViewManager.java:157)
    at com.facebook.react.uimanager.BaseViewManager.setTransform(BaseViewManager.java:57)
    ... 24 more

[kylejones]

I found that the translate property of the transform was causing this error for me.
On line 77-79 of the TransformHelper it assumes the property is a double where I had been giving string values like "50%". I suspect any translation with a percentage or unit will break.

https://github.com/facebook/react-native/blob/v0.34.1/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java#L77

[philipheinser]

@facebook-github-bot label android

[the-simian]

Yep to confirm we had to 'safety wrap' our translate

  if (Platform.OS == 'ios') {
        transform.translate = ['0', '-100%'];
      }

That fixes android, but of course - no translate. Thankfully this was only cosmetic in our case, but That new MatrixHelper/TransformMAtrix stuff file seems to have issues atm.

[dmwallace]

For me this issue was resolved by changing the rotation string suffix from 'degrees' to 'deg'. e.g. from:

'rotateZ': '30degrees'

to:
'rotateZ': '30deg'

[xunaixuan]

I just upgraded to RN0.35, but it did not work. As mentioned before, the error appears when changing navigator's routes. Besides, I tried all the solutions above, but still can't find anyone works. :(

[arilitan]

Seeing this error as well, RN 0.35 only when I build for release on Android. This is a really bad bug can't find any work around. Also it only seems to be happening when I build for release, not happening on debug builds

[soutar]

I'm getting a very similar error to this in RN 0.35 when I build for release on Android but rather than the cause that @the-simian was seeing, I'm getting Caused by com.facebook.react.bridge.UnexpectedNativeTypeException: expected Map, got a int64.

When the exception is thrown, the props ReactStylesDiffMap in ViewManagersPropertyCache contains an unusual transform value - something like transform: [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]. It looks like it's coming from the NavigationCard component in NavigationExperimental but from logging the style property on the JS side there's nothing out of the ordinary going on there.

My half-baked theory is that the usual transform Maps (i.e.transform: [{ scale: 1 }]) are expected but for some reason it has already been converted into a matrix.

The only solution I could find was to downgrade to RN 0.32 (we jumped from 0.32 to 0.35 on our project). Hopefully someone else can shed some light on this weird issue.

Full crash log here: https://gist.github.com/soutar/0fe8f434f73b42b50cf2d48a799ffeae

[ghost]

Any update on this one?

[madox2]

I am not sure if it is related but I have faced the same error. The problem was that I've created animated value without arguments new Animated.Value(). It works when I change it to new Animated.Value(0).

[joseabraham]

In my case I had react-native-parallax-scroll-view": "0.19.0 and that was creating a problem, I ended up not using it in order to avoid that issue.

[scarlac]

For future reference: I was having this issue with React Native 0.44. It turns out I was passing NaN (Not a Number) to an Animated.Value, kinda like this: <Animated.View style={{transform: [{translateX: this.animatedValueThatWasNaN}]}}/>.
In my case, the NaN came from a calculation in a video player, where Android reported progress on a video that had undefined duration, which resulted in currentVideoPosition/totalDuration was an invalid calculation, causing NaN. While probably not directly relevant to your situation, it may help you understand that the error lies in your own application, although I would say RN could be a bit more helpful with the error message (ie. saying the value is not a number).

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[mo-solnet]

For future reference: check your dependencies. I had this issue because I was using react-native-material-switch with RN 47. I removed it and used the native Switch component and everything worked fine.

[firouzyar]

I have the same issue dose any one have progress with this issue?
RN version : 0.49.3
OS:windows
platform:android

[noahtallen]

Seeing this on RN 0.53.3, Windows, Android (physical device) as well.

[jaycee425]

having this issue on android device using RN 53.0 :(

[henricazottes]

Be careful to give an array to the transform property. I was giving an object and I had this exact error.

<Image source={...} transform={{rotateZ: '90deg'}} /> // Bad

<Image source={...} transform={[{rotateZ: '90deg'}]} /> // Good

[pintocarlos]

Also running in this issue. Seems to be caused also by translation transformations. Other types of transformations work of for me. I am resorting to showing a degraded experience on Android vs. iOS.