Using with sticky headers

[NePheus]

I am using a SectionList with stickySectionHeadersEnabled={true}. Whenever I click a list item (image), navigate with bounds({ id }).navigation.zoom(...) to the details page and navigate back, the sticky header is covered by the image and not visible anymore. Seems to be caused by something like z-index? When I click another image, the first image is behind the sticky header again but the new one is covering it. Am I missing something here or is it a bug?

But assuming it works, I have another problem. If I navigate back, the header would appear instantly. I've been wondering if theres a way to make the header appear more smoothly, pergaps slide or fade.

[eds2002]

We're using zIndex of 999 for the src component. I should mention this in the docs, but it's a way to avoid the look of it animating underneath its layout constraints. I think I should make this into an option tho in zoom(...).

[NePheus]

The zIndex itself is not my issue, but when the transition ends after navigating back, it seems not to be resetted to its default value. It doesn't reset until I click another item. Then the first item seems to be resetted and the other item gets the zIndex 999.

[eds2002]

I see, we have a bare bones system for resetting styles when values become undefined but this should be much improved in v3.6 🤨

[NePheus]

Just tested with 3.6 alpha-1. Now The zIndex keeps unresetted for every item I opened 😅

WA_1778936283348.mp4

[eds2002]

😭 we need a better way to handle zIndex, let me go back to the drawing board. Thanks for updating me

[eds2002]

Just an update, style reset has improved however zIndex seems to be the wrong solution here for bound transitions. I think in the next release I'll work something in with react-native-teleport which should make things look much better

[NePheus]

Just installed the 3.9.0-beta.3 and the zIndex and it looks fine for my use case. Thank you so much for this!

Another question: As you can see in my example video, I have a tabbar at the bottom, so I am just wondering if I can override just borderTopLeftRadius and borderTopRightRadius for .navigation.zoom, as I need to only handle the upper border radius values. If I see it correctly, I can only override borderRadius in general right now.

[eds2002]

I think that would just lead to making .zoom() less opinionated.

My main goal with these navigation helpers is to make it as opinionated as possible so they can easily just be one-liners without bloating the effect.

I think as a hail mary tho I could expose a way to modify the styles of each content so in theory you could do this yourself?