Shadow not rendering until shared transition ends

[Brendonovich]

Hey all, not sure if this is the right repo to flag this issue but since it's navigation related I thought I'd put it here.

In my app I have a vertical list of cards, each containing an image and some text underneath. The images are shared elements that transition to a detail screen comprised of the image at the top and the text below it. In the list view, the cards have shadows, which is great until I return from the detail screen to the list screen. The card text, which is not a shared element, keeps its shadow whereas the shadow that the image transitions into is not there right up until it lands in its ending position. I have reproduced this in a snack for testing. In the actual app when the shadow reappears a message 'Could not locate shadow view with tag #some number' is logged to the console, but in the snack this does not happen though the shadow issue is there.

Again, not sure if this is a react-navigation-shared-element, react-native-shared-element, or react-native issue, but any help would be appreciated!

[skam22]

did you ever figure this out?

[IjzerenHein]

Hi! Thanks for the snack, that really helps!

In your example, the shadow is defined on a parent of the <SharedElement> component and therefore it does not render it. If you want to animate the shadow and white surface, then you'll also need to include these inside a <SharedElement> component.

[IjzerenHein]

I've updated the example app to include a Card demo. Hope this helps:

https://user-images.githubusercontent.com/6184593/130583547-4c7cae09-f47b-47f6-9e93-1477c7742d91.mp4

CardItem.tsx shows how you can render multiple shared-elements on top of each other and have then animate correctly. https://github.com/IjzerenHein/react-navigation-shared-element/blob/main/example/src/screens/CardItem.tsx

[sahiln13]

Hey folks! Caught in a similar issue I'm trying to basically make a sticky header that grows with the rendered items underneath using shared element. However the shadow comes up after the transition happens. Like you mentioned the shadow style is in the child view

        <SharedElement className="flex-1 w-full" id="sharedElementDemo">
          <View
            className="flex-col items-center justify-end h-full pb-4 rounded-b-3xl bg-rome-200"
            style={shadowStyle}>
            <View className="flex flex-col w-10/12 space-y-1">
              <StyledText className="text-2xl font-extrabold text-white">
                Jazz up with amenities
              </StyledText>
              <StyledText className="text-base text-white">
                Offer at least three to optimize bookings
              </StyledText>
            </View>
          </View>
        </SharedElement>

Any ideas?

https://user-images.githubusercontent.com/14918798/205519807-391b8a43-6c0b-41db-b18c-d67b352d4e85.mp4