[Android] Navigator transitions broken on 0.13

[satya164]

So, I upgraded my RN version in package.json and build.gradle and found that Navigator transitions are broken. I tried adding a configureScene property with no success.

[maxim-c]

same issue. All configs Navigator.SceneConfigs with translate doesn't work, only this strange fade effect like in satya164 case.
FadeAndroid scene changes this ugly fade to little more better...

[mangogogos]

+1

[pagrawl3]

same issue here as well, none of the slide transitions work, but the fade transitions work without a problem.

[astreet]

Thanks for the report and +1's everyone, @ericvicenti can you take a look?

[JonnyBGod]

+1

[satya164]

Any updates on this?

[ericvicenti]

I haven't seen any changes to Navigator that would cause this, and there is no platform-specific code that would cause breakage only on Android.

To perform animations, Navigator calls setNativeProps on views within a requestAnimationFrame timer.

Maybe somebody could try bisecting to identify the breakage? I don't have bandwidth to figure this out in the next few weeks.

[mbrochh]

I simply created the AwesomeProject tutorial and then added a Navigator to it and used the FloatFromRight transition. It works on iOS but it does not work on Android. The only transition that seems to work on Android is FadeAndroid, but that one is so subtle, it's hardly noticeable.

[davidstubbs]

I'm not entirely sure how it was broken, but the reason most transitions don't work is that they're using the wrong native prop.

buildStyleInterpolator creates a style with the transformMatrix property. Android expects the decomposed matrix in decomposedMatrix.

I hacked a change in Navigator.js _transitionSceneStyle which "fixes" the transitions (as in they work afterwards, but I'm sure this code change isn't really the one wanted):

    ...
    var didChange = useFn(styleToUse, directionAdjustedProgress);
    //
    if (styleToUse.transformMatrix)
      styleToUse = {...styleToUse, decomposedMatrix: MatrixMath.decomposeMatrix(styleToUse.transformMatrix)}
    //
    if (didChange) {
    ...

This is my first look at any of this code, so I'm very unsure how to go about fixing this for real.
Any pointers?

[ericvicenti]

@astreet, have there been any recent changes to transform matrices? There seems to be an inconsistency with Android and iOS

[davidstubbs]

So a bit more research and...

The Android version relies on the scaleX/translateY/etc properties to get the transition.

A bunch of commits seemed to break that.

The problem is basically fixed already in 0ed3048
I applied that diff to my 0.13 install and it fixed the issue.

So this should be fixed in 0.14 already as long as all SceneConfigs use interpolators with fallbacks for transformTranslate.
There seems to be a lot of transform related props changes going on, especially with android, so I'm backing away slowly...

[astreet]

@kmagiera Were matrix transforms broken for a while in Android? I.e. possibly broken in the 0.13 release?

[satya164]

This seems to be (kinda) fixed in master. Here's what happens on master,

Notice the animation when I go back.

[sowdri]

The animation while going back kind of hangs for me as well while navigating back. Works fine in IOS though.

[qbig]

same here. the "back animation" is very choppy

[kmagiera]

@dgladkov's patch #3954 is fixing this issue - merging it now and closing this. Thanks all for reporting and special thanks to @dgladkov for investigating and fixing the problem