search

IjzerenHein / react-navigation-shared-element

React Navigation bindings for react-native-shared-element 💫
https://github.com/IjzerenHein/react-native-shared-element
MIT License
1.27k stars 124 forks source link

Shared element animates when going forward but not when going back #49

Closed jay-jlm closed 3 years ago

jay-jlm commented 4 years ago

Happens on my latest project, I am not passing any dynamic parameters, instead I hardcoded the shared element id the return value of the DetailScreen.sharedElements function for simplicity.

The sharing transition can be seen when navigating from Home to Detail, but when navigating back using the back button on Android, the sharing is not performed.

    "react-navigation": "^4.3.5",
    "react-navigation-shared-element": "^2.2.0",
    "react-navigation-stack": "^2.3.9"

Is this expected behavior? If not, any hints on what could be causing this issue?

jrmartinez96 commented 4 years ago

Same here with iOS :(

jrmartinez96 commented 4 years ago

Follow the instructions from the branch "navigation-v5" of this repository. I tried it and it works fine for me.

jay-jlm commented 4 years ago

@jrmartinez96 I'm stuck with V4 though. I looked around and did not find anything in the V5 branch docs that seemed to be relevant to my scenario.

bcgilliom commented 4 years ago

I'm getting the same problem on r-nav v4, rn .59, stack nav 2

bureyburey commented 4 years ago

having the same issue as well. expo SDK 36 (uses react-native 0.61.4) react-navigation 4.3.7 react-navigation-stack 2.3.11 react-navigation-shared-element 2.2.0 react-native-shared-element 0.6.1

one thing i did notice is this: on iOS simulator, if i swipe right to left (to go back) during the transition to the new screen, it does work correctly, and as well when clicking the back button on an Android device.

but once the transition to the new screen has finished, going back to the previous screen produces a regular navigation transition.

Hope this helps finding the cause for this.

Keep up the awesome work @IjzerenHein

edit: after a bit of tinkering with the library code, i found out that disabling the call for function this.updateSharedElements() in SharedElementRendererData (call from inside endTransition func in the same file) solves the issue back transition issue.

obviously it may cause issues elsewhere, but hopefully this will help to zero in on the issue

ghondar commented 4 years ago

same here using:

react-native 0.62.2 react-navigation 4.0.0 react-navigation-stack 2.3.11 react-navigation-shared-element 2.2.0 react-native-shared-element 0.6.1

IjzerenHein commented 4 years ago

Hi! It seems some things were changed in recent react-navigation/stack releases which broke the back navigation (some lifecycle events were changed). I've just released a new version which should fix this: https://github.com/IjzerenHein/react-navigation-shared-element/releases/tag/v2.3.0

Let me know whether that resolves your problem!

bureyburey commented 4 years ago

@IjzerenHein working beautifully now!

many thanks for the fix :)))

keep it up!

vitosorriso commented 4 years ago

Hello everyone! i was facing the same problem after trying to merge my fully working branch with animation (untouched in the last 2-3 weeks) inside development branch. Even fixing versions to some potential-putting-issues library (also react-navigation-stacks) was still breaking my animation. After upgrading this library to 2.3.0, i also fixed the problem! Thanks so much @IjzerenHein