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:

https://github.com/software-mansion/react-native-reanimated/assets/2230992/e7a48d3e-0b25-44c6-9c47-e05904790a68

With justifyContent:

https://github.com/software-mansion/react-native-reanimated/assets/2230992/c4360033-c578-40a1-af4c-f77a56cab933

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