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 123 forks source link

Transition is not triggered when navigation.goBack() #91

Open kuznetsov-from-wonderland opened 4 years ago

kuznetsov-from-wonderland commented 4 years ago

2020-07-17 16 15 06

import React from 'react'
import { createSharedElementStackNavigator } from 'react-navigation-shared-element'
import { TransitionPresets } from '@react-navigation/stack'

import { Home as HomeScreen } from '../screens/Home'
import { PurchaseDetails as PurchaseDetailsScreen } from '../screens/Home/screens/PurchaseDetails'
import { boarderlessHeader } from '../StyleGuide'
import { ROUTES } from '../setup-kit/constants'
import { PurchaseServerSide } from '../setup-kit/interfaces'

export type HomeStackParamsList = {
  [ROUTES.Home]: undefined
  [ROUTES.Purchase]: { id: string; data: PurchaseServerSide }
}

const HomeStack = createSharedElementStackNavigator<HomeStackParamsList>()

function HomeStackScreen() {
  return (
    <HomeStack.Navigator
      screenOptions={{ ...boarderlessHeader }}
      // mode="modal"
      // headerMode="none"
    >
      <HomeStack.Screen
        name={ROUTES.Home}
        component={HomeScreen}
        options={{
          headerShown: false,
        }}
        sharedElements={(route) => {
          const { id } = route.params
          return [
            `purchase.wrapper.${id}`,
            `purchase.image.${id}`,
            `purchase.name.${id}`,
            `purchase.status.${id}`,
            `purchase.type.${id}`,
          ]
        }}
      />
      <HomeStack.Screen
        name={ROUTES.Purchase}
        component={PurchaseDetailsScreen}
        options={{
          headerShown: false,
          gestureEnabled: false,
          ...TransitionPresets.ModalSlideFromBottomIOS,
        }}
        sharedElements={(route) => {
          const { id } = route.params
          return [
            `purchase.wrapper.${id}`,
            `purchase.image.${id}`,
            `purchase.name.${id}`,
            `purchase.status.${id}`,
            `purchase.type.${id}`,
          ]
        }}
      />
    </HomeStack.Navigator>
  )
}

export { HomeStackScreen }
"react-native-shared-element": "^0.7.0",
"react-navigation-shared-element": "^3.0.0",
"@react-navigation/bottom-tabs": "^5.6.1",
"@react-navigation/native": "^5.6.1",
"@react-navigation/stack": "^5.6.2",
kuznetsov-from-wonderland commented 4 years ago

Is it possible to animate component when I go navigation.goBack() ?

willroyMyles commented 4 years ago

i had this same problem a few minutes ago. occurs because the default navigation replace method is push.

solution: in your navigator's screenOption add animationTypeForReplace:"pop"

kuznetsov-from-wonderland commented 4 years ago

i had this same problem a few minutes ago. occurs because the default navigation replace method is push.

solution: in your navigator's screenOption add animationTypeForReplace:"pop"

Thanks! But have no effect 🤷‍♂️

nathell commented 4 years ago

I can confirm this happening in my app, on Android only. It doesn't happen when using the hardware back button; see my related comment in #71.

I tried uncommenting all the Log.d calls (currently commented out) in RNSharedElementTransition.java, ran my app, and inspected adb logcat. Here are the resulting annotated logs:

# navigating from screen A to screen B
07-23 21:00:50.644  6366  6366 D RNSharedElementTransition: updateLayout: 0.0
07-23 21:00:50.647  6366  6366 D RNSharedElementTransition: updateLayout: 0.0
07-23 21:00:50.648  6366  6366 D RNSharedElementTransition: setNodePosition 0.33446404, mInitialLayoutPassCompleted: true
07-23 21:00:50.649  6366  6366 D RNSharedElementTransition: updateLayout: 0.33446404
07-23 21:00:50.649  6366  6366 D RNSharedElementTransition: setNodePosition 0.33446404, mInitialLayoutPassCompleted: true
07-23 21:00:50.649  6366  6366 D RNSharedElementTransition: updateLayout: 0.33446404
07-23 21:00:50.649  6366  6366 D RNSharedElementTransition: dispatchDraw, mRequiresClipping: true, width: 1080, height: 1157
07-23 21:00:50.650  6366  6366 D RNSharedElementTransition: dispatchDraw, mRequiresClipping: false, width: 790, height: 229
07-23 21:00:50.660  6366  6366 D RNSharedElementTransition: setNodePosition 0.48871756, mInitialLayoutPassCompleted: true
07-23 21:00:50.660  6366  6366 D RNSharedElementTransition: updateLayout: 0.48871756
07-23 21:00:50.661  6366  6366 D RNSharedElementTransition: setNodePosition 0.48871756, mInitialLayoutPassCompleted: true
07-23 21:00:50.661  6366  6366 D RNSharedElementTransition: updateLayout: 0.48871756
07-23 21:00:50.677  6366  6366 D RNSharedElementTransition: setNodePosition 0.6264305, mInitialLayoutPassCompleted: true
07-23 21:00:50.677  6366  6366 D RNSharedElementTransition: updateLayout: 0.6264305
07-23 21:00:50.678  6366  6366 D RNSharedElementTransition: setNodePosition 0.6264305, mInitialLayoutPassCompleted: true
07-23 21:00:50.678  6366  6366 D RNSharedElementTransition: updateLayout: 0.6264305
07-23 21:00:50.690  6366  6366 D RNSharedElementTransition: setNodePosition 0.718984, mInitialLayoutPassCompleted: true
07-23 21:00:50.691  6366  6366 D RNSharedElementTransition: updateLayout: 0.718984
07-23 21:00:50.691  6366  6366 D RNSharedElementTransition: setNodePosition 0.718984, mInitialLayoutPassCompleted: true
07-23 21:00:50.691  6366  6366 D RNSharedElementTransition: updateLayout: 0.718984
07-23 21:00:50.707  6366  6366 D RNSharedElementTransition: setNodePosition 0.78188026, mInitialLayoutPassCompleted: true
07-23 21:00:50.708  6366  6366 D RNSharedElementTransition: updateLayout: 0.78188026
07-23 21:00:50.708  6366  6366 D RNSharedElementTransition: setNodePosition 0.78188026, mInitialLayoutPassCompleted: true
07-23 21:00:50.708  6366  6366 D RNSharedElementTransition: updateLayout: 0.78188026
07-23 21:00:50.724  6366  6366 D RNSharedElementTransition: setNodePosition 0.8274976, mInitialLayoutPassCompleted: true
07-23 21:00:50.724  6366  6366 D RNSharedElementTransition: updateLayout: 0.8274976
07-23 21:00:50.724  6366  6366 D RNSharedElementTransition: setNodePosition 0.8274976, mInitialLayoutPassCompleted: true
07-23 21:00:50.724  6366  6366 D RNSharedElementTransition: updateLayout: 0.8274976
07-23 21:00:50.740  6366  6366 D RNSharedElementTransition: setNodePosition 0.86223525, mInitialLayoutPassCompleted: true
07-23 21:00:50.740  6366  6366 D RNSharedElementTransition: updateLayout: 0.86223525
07-23 21:00:50.740  6366  6366 D RNSharedElementTransition: setNodePosition 0.86223525, mInitialLayoutPassCompleted: true
07-23 21:00:50.740  6366  6366 D RNSharedElementTransition: updateLayout: 0.86223525
07-23 21:00:50.758  6366  6366 D RNSharedElementTransition: setNodePosition 0.88956416, mInitialLayoutPassCompleted: true
07-23 21:00:50.758  6366  6366 D RNSharedElementTransition: updateLayout: 0.88956416
07-23 21:00:50.758  6366  6366 D RNSharedElementTransition: setNodePosition 0.88956416, mInitialLayoutPassCompleted: true
07-23 21:00:50.758  6366  6366 D RNSharedElementTransition: updateLayout: 0.88956416
07-23 21:00:50.774  6366  6366 D RNSharedElementTransition: setNodePosition 0.9115343, mInitialLayoutPassCompleted: true
07-23 21:00:50.774  6366  6366 D RNSharedElementTransition: updateLayout: 0.9115343
07-23 21:00:50.774  6366  6366 D RNSharedElementTransition: setNodePosition 0.9115343, mInitialLayoutPassCompleted: true
07-23 21:00:50.774  6366  6366 D RNSharedElementTransition: updateLayout: 0.9115343
07-23 21:00:50.790  6366  6366 D RNSharedElementTransition: setNodePosition 0.92944765, mInitialLayoutPassCompleted: true
07-23 21:00:50.790  6366  6366 D RNSharedElementTransition: updateLayout: 0.92944765
07-23 21:00:50.791  6366  6366 D RNSharedElementTransition: setNodePosition 0.92944765, mInitialLayoutPassCompleted: true
07-23 21:00:50.791  6366  6366 D RNSharedElementTransition: updateLayout: 0.92944765
07-23 21:00:50.807  6366  6366 D RNSharedElementTransition: setNodePosition 0.9441806, mInitialLayoutPassCompleted: true
07-23 21:00:50.807  6366  6366 D RNSharedElementTransition: updateLayout: 0.9441806
07-23 21:00:50.807  6366  6366 D RNSharedElementTransition: setNodePosition 0.9441806, mInitialLayoutPassCompleted: true
07-23 21:00:50.807  6366  6366 D RNSharedElementTransition: updateLayout: 0.9441806
07-23 21:00:50.824  6366  6366 D RNSharedElementTransition: setNodePosition 0.95635056, mInitialLayoutPassCompleted: true
07-23 21:00:50.824  6366  6366 D RNSharedElementTransition: updateLayout: 0.95635056
07-23 21:00:50.824  6366  6366 D RNSharedElementTransition: setNodePosition 0.95635056, mInitialLayoutPassCompleted: true
07-23 21:00:50.824  6366  6366 D RNSharedElementTransition: updateLayout: 0.95635056
07-23 21:00:50.840  6366  6366 D RNSharedElementTransition: setNodePosition 0.96640885, mInitialLayoutPassCompleted: true
07-23 21:00:50.841  6366  6366 D RNSharedElementTransition: updateLayout: 0.96640885
07-23 21:00:50.841  6366  6366 D RNSharedElementTransition: setNodePosition 0.96640885, mInitialLayoutPassCompleted: true
07-23 21:00:50.841  6366  6366 D RNSharedElementTransition: updateLayout: 0.96640885
07-23 21:00:50.856  6366  6366 D RNSharedElementTransition: setNodePosition 0.9746955, mInitialLayoutPassCompleted: true
07-23 21:00:50.857  6366  6366 D RNSharedElementTransition: updateLayout: 0.9746955
07-23 21:00:50.859  6366  6366 D RNSharedElementTransition: setNodePosition 0.9746955, mInitialLayoutPassCompleted: true
07-23 21:00:50.859  6366  6366 D RNSharedElementTransition: updateLayout: 0.9746955
07-23 21:00:50.879  6366  6366 D RNSharedElementTransition: setNodePosition 0.98147327, mInitialLayoutPassCompleted: true
07-23 21:00:50.879  6366  6366 D RNSharedElementTransition: updateLayout: 0.98147327
07-23 21:00:50.879  6366  6366 D RNSharedElementTransition: setNodePosition 0.98147327, mInitialLayoutPassCompleted: true
07-23 21:00:50.879  6366  6366 D RNSharedElementTransition: updateLayout: 0.98147327
07-23 21:00:50.894  6366  6366 D RNSharedElementTransition: setNodePosition 0.98694944, mInitialLayoutPassCompleted: true
07-23 21:00:50.894  6366  6366 D RNSharedElementTransition: updateLayout: 0.98694944
07-23 21:00:50.894  6366  6366 D RNSharedElementTransition: setNodePosition 0.98694944, mInitialLayoutPassCompleted: true
07-23 21:00:50.894  6366  6366 D RNSharedElementTransition: updateLayout: 0.98694944
07-23 21:00:50.911  6366  6366 D RNSharedElementTransition: setNodePosition 0.9912905, mInitialLayoutPassCompleted: true
07-23 21:00:50.911  6366  6366 D RNSharedElementTransition: updateLayout: 0.9912905
07-23 21:00:50.912  6366  6366 D RNSharedElementTransition: setNodePosition 0.9912905, mInitialLayoutPassCompleted: true
07-23 21:00:50.912  6366  6366 D RNSharedElementTransition: updateLayout: 0.9912905
07-23 21:00:50.922  6366  6366 D RNSharedElementTransition: setNodePosition 0.99463224, mInitialLayoutPassCompleted: true
07-23 21:00:50.923  6366  6366 D RNSharedElementTransition: updateLayout: 0.99463224
07-23 21:00:50.923  6366  6366 D RNSharedElementTransition: setNodePosition 0.99463224, mInitialLayoutPassCompleted: true
07-23 21:00:50.923  6366  6366 D RNSharedElementTransition: updateLayout: 0.99463224
07-23 21:00:50.940  6366  6366 D RNSharedElementTransition: setNodePosition 0.9970871, mInitialLayoutPassCompleted: true
07-23 21:00:50.940  6366  6366 D RNSharedElementTransition: updateLayout: 0.9970871
07-23 21:00:50.941  6366  6366 D RNSharedElementTransition: setNodePosition 0.9970871, mInitialLayoutPassCompleted: true
07-23 21:00:50.942  6366  6366 D RNSharedElementTransition: updateLayout: 0.9970871
07-23 21:00:50.955  6366  6366 D RNSharedElementTransition: setNodePosition 0.99874896, mInitialLayoutPassCompleted: true
07-23 21:00:50.955  6366  6366 D RNSharedElementTransition: updateLayout: 0.99874896
07-23 21:00:50.955  6366  6366 D RNSharedElementTransition: setNodePosition 0.99874896, mInitialLayoutPassCompleted: true
07-23 21:00:50.955  6366  6366 D RNSharedElementTransition: updateLayout: 0.99874896
07-23 21:00:50.973  6366  6366 D RNSharedElementTransition: setNodePosition 0.9996973, mInitialLayoutPassCompleted: true
07-23 21:00:50.973  6366  6366 D RNSharedElementTransition: updateLayout: 0.9996973
07-23 21:00:50.973  6366  6366 D RNSharedElementTransition: setNodePosition 0.9996973, mInitialLayoutPassCompleted: true
07-23 21:00:50.973  6366  6366 D RNSharedElementTransition: updateLayout: 0.9996973
07-23 21:00:50.992  6366  6366 D RNSharedElementTransition: setNodePosition 1.0, mInitialLayoutPassCompleted: true
07-23 21:00:50.992  6366  6366 D RNSharedElementTransition: updateLayout: 1.0
07-23 21:00:50.993  6366  6366 D RNSharedElementTransition: setNodePosition 1.0, mInitialLayoutPassCompleted: true
07-23 21:00:50.993  6366  6366 D RNSharedElementTransition: updateLayout: 1.0
# waiting for a few seconds and then going back...
07-23 21:01:10.161  6366  6366 D RNSharedElementTransition: updateLayout: 0.0
07-23 21:01:10.164  6366  6366 D RNSharedElementTransition: updateLayout: 0.0
07-23 21:01:10.166  6366  6366 D RNSharedElementTransition: setNodePosition 1.0, mInitialLayoutPassCompleted: true
07-23 21:01:10.166  6366  6366 D RNSharedElementTransition: updateLayout: 1.0
07-23 21:01:10.168  6366  6366 D RNSharedElementTransition: setNodePosition 1.0, mInitialLayoutPassCompleted: true
07-23 21:01:10.168  6366  6366 D RNSharedElementTransition: updateLayout: 1.0
07-23 21:01:10.169  6366  6366 D RNSharedElementTransition: dispatchDraw, mRequiresClipping: true, width: 1080, height: 1157
07-23 21:01:10.169  6366  6366 D RNSharedElementTransition: dispatchDraw, mRequiresClipping: false, width: 790, height: 229

I further noticed that afterwards, when scrolling through the RecyclerListViews that I have on the source screen, further events related to the transition are logged – even though it's supposed to have finished long ago!

# I did no further transitions, just scrolled around – and then...
07-23 21:07:50.258  6366  6366 D RNSharedElementTransition: setNodePosition 0.0, mInitialLayoutPassCompleted: true
07-23 21:07:50.258  6366  6366 D RNSharedElementTransition: updateLayout: 0.0
07-23 21:07:50.258  6366  6366 D RNSharedElementTransition: setNodePosition 0.0, mInitialLayoutPassCompleted: true
07-23 21:07:50.259  6366  6366 D RNSharedElementTransition: updateLayout: 0.0
07-23 21:07:50.264  6366  6366 D RNSharedElementTransition: setNodePosition 1.0, mInitialLayoutPassCompleted: true
07-23 21:07:50.267  6366  6366 D RNSharedElementTransition: updateLayout: 1.0
07-23 21:07:50.267  6366  6366 D RNSharedElementTransition: setNodePosition 1.0, mInitialLayoutPassCompleted: true
07-23 21:07:50.267  6366  6366 D RNSharedElementTransition: updateLayout: 1.0
07-23 21:07:50.269  6366  6366 D RNSharedElementTransition: dispatchDraw, mRequiresClipping: true, width: 1080, height: 1157
07-23 21:07:50.269  6366  6366 D RNSharedElementTransition: dispatchDraw, mRequiresClipping: false, width: 790, height: 229
07-23 21:07:50.371  6366  6366 D RNSharedElementTransition: setNodePosition 0.0, mInitialLayoutPassCompleted: true
07-23 21:07:50.371  6366  6366 D RNSharedElementTransition: updateLayout: 0.0
07-23 21:07:50.372  6366  6366 D RNSharedElementTransition: setNodePosition 0.0, mInitialLayoutPassCompleted: true
07-23 21:07:50.372  6366  6366 D RNSharedElementTransition: updateLayout: 0.0
07-23 21:07:50.375  6366  6366 D RNSharedElementTransition: setNodePosition 1.0, mInitialLayoutPassCompleted: true
07-23 21:07:50.376  6366  6366 D RNSharedElementTransition: updateLayout: 1.0
07-23 21:07:50.376  6366  6366 D RNSharedElementTransition: setNodePosition 1.0, mInitialLayoutPassCompleted: true
07-23 21:07:50.376  6366  6366 D RNSharedElementTransition: updateLayout: 1.0
07-23 21:07:50.379  6366  6366 D RNSharedElementTransition: dispatchDraw, mRequiresClipping: true, width: 1080, height: 1157
07-23 21:07:50.379  6366  6366 D RNSharedElementTransition: dispatchDraw, mRequiresClipping: false, width: 790, height: 229
cozmoc commented 4 years ago

Any updates on this? @kromsik @IjzerenHein

Thanks

kanelloc commented 4 years ago

Any updates on this @kromsik @IjzerenHein ? Thanks

KDKHD commented 4 years ago

Having the same problem.

steveZak commented 4 years ago

Had a similar issue, appeared due to a nested Tab Navigator, workaround provided in https://github.com/IjzerenHein/react-navigation-shared-element/issues/77

KDKHD commented 4 years ago

The solution in #77 did not work for me.

I found a workaround that did work in my case.

My case

When using the back button from the stack navigator header, the animation appeared. However, when calling navigation.goBack() the animation did not appear. I want to hide the header so using it is not an option for me.

Hypothesis

It seems like the goBack function of react-navigation-shared-element isn't implemented the same way as the goBack function from @react-navigation/stack.

Solution

The workaround I have come up with is to create my own goBack function (called "goBack_WORKAROUND") and using that instead.

import React from 'react';
import {StackActions} from '@react-navigation/native';
import debounce from '@react-navigation/stack/src/utils/debounce';

/************
 * Start of component
 ************/

const DetailsScreen = ({navigation, route}) => {

const goBack_WORKAROUND = React.useCallback(
    debounce(() => {
      if (navigation.isFocused() && navigation.canGoBack()) {
        navigation.dispatch({
          ...StackActions.pop(),
          source: route.key,
        });
      }
    }, 50),
    [navigation, route.key]
  );

return (
   <>
      <MyBeautifulBackButton onPress={()=>goBack_WORKAROUND()}/>
   </>
)
})

export default DetailsScreen;

I guess you could put this into its own file for better reusability.

Hope this helps everyone!

LaurenceM10 commented 3 years ago

Same issue here! Not triggered transition in navigation.goBack() call but transition is working when I press back button (device back button in android).

jzxchiang1 commented 3 years ago

Having the same issue, and when I try @KDKHD's solution, I run into https://github.com/IjzerenHein/react-navigation-shared-element/issues/109

arpankumarlahiri commented 1 year ago

Any update?