[v5] - Image not always positioned correctly

[ijzerenhein]

[v5] - Image not always positioned correctly

[JaviEzpeleta]

Hi @tafelito,
I was experiencing the same problem as you,
1 or 2 times every 5 transitions it wasn't positioning the image correctly.
In case this solution is fine for you: I tried adding the cardStyleInterpolator option to the Detail Screen, so it fades from the list to the detail, and it works 100% of the time!

I just used the example found at https://reactnavigation.org/docs/stack-navigator/#cardstyleinterpolator

in the <Navigator> component, I defined this function:

const forFade = ({ current, closing }) => ({
  cardStyle: {
    opacity: current.progress,
  },
})

and then I just added the option to the Screen on that same file:

        <Stack.Screen
          ...
          options={{ cardStyleInterpolator: forFade }}
          ... >

...hope it helps!

[IjzerenHein]

Hmm, not sure might be related to #24 Could you try and see whether this workaround works?
#24 (comment)

[tafelito]

I tried changing the transitionSpec as you suggested. Even tho it works most of the time, it did fail 1 or 2 times. What I did notice is that now the navigation seems to be a bit laggy, specially when you swipe back.

I think that if you start the swipe back before the transitions ends, that's when it fails or you can see the lag

Is the shared transition supposed to happen when swiping back and not with the back on the header?

[kdo1234]

@JaviEzpeleta's fix worked for me as well. Thank you

[IjzerenHein]

Hi! Please upgrade to the latest official version. Lots of things have been fixed and the native extensions have also received a bunch of bug fixes. Feel free to reopen with a PR for a test-case in the example app when this problem still occurs.