[v5] - Weird behavior with react-native-reanimated v2

[MatheusPires99]

I am getting some weird behavior using react-navigation-shared-element with the new react-native-reanimated version 2. Almost 100% of the time, the element I am sharing throw the pages just "stucks" and go to the position with no transition.

Preview:

Project dependencies:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/native": "^5.0.9",
    "@react-navigation/stack": "^5.1.1",
    "axios": "^0.21.0",
    "expo": "~39.0.2",
    "expo-status-bar": "~1.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",
    "react-native-shared-element": "^0.7.0",
    "react-native-web": "~0.13.12",
    "react-navigation-shared-element": "^5.0.0-alpha1"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.63.2",
    "typescript": "~3.9.5"
  },
  "private": true
}

[PhamMinhHaiAu-12035071]

I also the same issue

[wgarrod]

I have the same issue, I have found that when I apply a fade animation to any element in the sharedElements config on the Screen it starts working. I can then remove the fade animation and it continues to work. Only see the issue on IOS, no problem on Android.

[MatheusPires99]

@wgarrod I get it, that's sad, probably needs to wait for them update all the packages.

I am going to let this issue open in case there's someone who could made it on iOS as well.

[servonlewis]

Same issue with me, are there any plans to get this to work with the new reanimated?

[rvssvl]

@MatheusPires99 Did you find any solution? I got same problem, at the first glance thought that the problem is related to react-navigation version, tried different version, didn't work out for me...

[MatheusPires99]

@rvssvl no, I am still waiting for an update, but I think they are only going to do that when react-native-reanimated V2 be officially release as the default version.

[servonlewis]

Seems to have worked better for me when I took out the Animated.View parent, now it's smoother, however, it doesn't work smooth on the first transition. The first transition acts as if there no shared transition element. Afterwards, it will work regularly back and forth

Edit: disregard my last statement. By using Apollo client, I had to load my data during the transition so the first one didn't work. Afterwards it was stored in cache. I simply prefetch and store in the cache to fix it

[chj-damon]

@MatheusPires99 I just want to know if it works fine with reanimated2? since reanimated2 has been officially released now.

[MatheusPires99]

@chj-damon I haven't test it with reanimated 2 yet. For this pokedex project I just used reanimated 1.

[marcibk]

Any update / workaround for this? #172 maybe same problem? Could someone check? :) Thanks...

[IjzerenHein]

Linked to https://github.com/IjzerenHein/react-native-shared-element/issues/76

[pranshuchittora]

On the first run, the transition doesn't work. Tried setting hardcoded id, still not working.

https://user-images.githubusercontent.com/32242596/132657938-8dbb837c-96d3-4fdc-9dfc-c882d1f73954.mov

I am using React Navigation v6 & Reanimated v2.

Issue (Platform) iOS ✅ Android ✅

[IjzerenHein]

On the first run, the transition doesn't work. Tried setting hardcoded id, still not working.

Screen.Recording.2021-09-09.at.2.41.11.PM.mov I am using React Navigation v6 & Reanimated v2.

Issue (Platform) iOS ✅ Android ✅

This is a different problem, please open a new issue for it and provide a way to reproduce it, ideally by adding a test-case to the example app

[majidln]

Same problem