Shared transitions break when parent element uses justifyContent

[stevengoldberg]

Description

When using a shared element transition, applying a justifyContent style to the parent of the transitioning element will cause the transition to break.

Without justifyContent:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-05-06.at.17.59.55.mp4

With justifyContent:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-05-06.at.18.01.44.mp4

Steps to reproduce

1. Apply a sharedTransitionTag to an element
2. Apply a justifyContent style to the element's parent
3. Navigate between screens

Snack or a link to a repository

https://github.com/stevengoldberg/shared-transition-bug/

Reanimated version

3.11.0

React Native version

0.73.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

iPhone 15 Pro

Acknowledgements

Yes