React-native-reanimated: react-navigation-stack animation sometimes doesn't work with Reanimated 2 (TurboModules)

[AlexeyVlasenko]

Current Behavior

Stack animation doesn't work sometimes.

Expected Behavior

Animations should work all time.

How to reproduce

Snack (It's just code, please run it locally with Reanimated 2 set up): https://snack.expo.io/Rq8gJNJIM

Your Environment

| software | version |
| ------------------------------ | ------- |
| @react-navigation/native | ^5.7.3
| @react-navigation/stack | ^5.9.0
| react-native-gesture-handler | ^1.7.0
| react-native-safe-area-context | ^3.1.6
| react-native-screens |^2.10.1
| react-native |0.63.2
| react-native-reanimated |^2.0.0-alpha.5

[enesozturk]

Same issue with exact same packages. With reanimated 2, stack navigation animation sometimes not working. It is navigating other page without transition.

Edit 1: Putting Stack Navigator into the Tab Navigator solving the issue. But if the Stack Navigator in root, problem still exists..

Edit 2: I got the same when the Stack Nav inside Bottom Tab Nav...

[terrysahaidak]

As a part of integrating Reanimated, we enable TurboModules for all the compatible modules. I think the first thing worth to check if Animated works properly with TurboModules.

[NathanSaunders01]

I'm having the same issue with [email protected]. Animated works fine with my custom animations but on certain screens, it won't animate the screen transition as it mounts but it will as the screen unmounts. Seems to be random too, not related to the screen I'm mounting. I was using [email protected] before and wasn't having this issue

[terrysahaidak]

Have you upgraded React Native version recently?

Also, could someone try out this patch?
https://github.com/rainbow-me/rainbow/blob/develop/patches/react-native%2B0.63.2.patch

[NathanSaunders01]

Yeah I did upgrade React Native to 0.63.2

Just tried out your patch and it's fixed the stack transition issue on the iPhone 11 and iPhone 8 using iOS 13.3. Also just tested Android and it all seems to be working fine.

Nice one, thank you!

[terrysahaidak]

This only verifies that the problem in the way React Native Animated works with Turbo Modules.

[JackShannon]

Is there a work around for this with Expo, that can be used without patching React Native?

[terrysahaidak]

This is already fixed for alpha.8 - we no longer enable TurboModules for all the modules but Reanimated.

But still it's not possible to apply this same fix without eject.

[jakub-gonet]

Just like Terry said, we changed Reanimated initialization as turbo module in alpha.8 so this shouldn't be a problem anymore. For Expo users - unfortunately, you have to wait until the new SDK is released or eject and upgrade Reanimated by yourself.

[enesozturk]

Just like Terry said, we changed Reanimated initialization as turbo module in alpha.8 so this shouldn't be a problem anymore. For Expo users - unfortunately, you have to wait until the new SDK is released or eject and upgrade Reanimated by yourself.

Hi. I would like to ask a question. For using Reanimated v2 releases after alpha.8, we need Expo new SDK this is clear. But should we let the Expo know about this issue for make them fix this in new SDK? @jakub-gonet

[jakub-gonet]

They'll update Reanimated when making a new SDK version, so there's no need to worry. Hopefully, we'll release a stable version until that time.

[enesozturk]

Wow. This is cool then. Thanks a lot 🙌🏽

[naishe]

@jakub-gonet I am unsure if it will be anytime soon, though. Based on this message: https://github.com/react-navigation/react-navigation/issues/8981#issuecomment-731233042

[jakub-gonet]

Expo already enabled the experimental use of Reanimated 2 in SDK 39. Adopting it in the other libraries is a different thing, as we have to wait for RN support. Turbo modules are still in alpha/beta.

Reanimated 2 still has some rough edges but it's in a pretty useable state to allow creating animations by users.