Shared Element Transition on the New Architecture (feature flag) #7466

bartlomiejbloniarz · 2025-05-05T14:08:28Z

Summary

This PR brings back the Shared Element Transition feature to reanimated (within a limited scope and behind a feature flag).

Current limitations:

animations with native modals don't work on iOS (the modal is displayed over the Shared Element). This can be fixed by plugging the Shared Element into the Window, instead of the React's RootVIew.
can't define custom progress (swipe back) transitions (it just isn't implemented yet, it was easier to hard code)
progress transitions animate less props than basic ones (for the same reason as above)
on iOS there are still some issues with header height (e.g. the [SET] Modals) example
there are some performance bottlenecks, that stem from transforms being recalculated too eagerly (this requires some changes to how we recognize whether to start a transition)
we have to use a workaround for rnscreens to not keep a snapshot of the transitioning view on the popped screen. Currently the fix is only available in our patch, but should be soon merged into rnscreens.

Test plan

slorber · 2025-05-07T12:53:01Z

Hey 👋

Just backlinking to the PR announcement tweet for demos and community comments: https://x.com/BBloniarz_/status/1919390653856829566

elozino-eryk · 2025-05-16T10:20:37Z

Hi @bartlomiejbloniarz nice work you are doing.

Is there a way we can get a code demo of it in new Arch? Currently, I am unable to get it to work with the code sample provide in the docs.

Thanks ❤️

bglgwyng · 2025-05-16T11:02:49Z

@elozino-eryk you can see the set of examples by run yarn start in apps/fabric-example

tomekzaw

Please use const auto & instead of auto or auto & wherever possible.
Please address leftover TODOs – are they "for now" or "for later"?
Please remove leftover comments with code snippets if they are no longer needed
Please add some spacing between switch cases for better readability.

tomekzaw · 2025-11-10T13:39:29Z

apps/common-app/src/apps/reanimated/App.tsx

 function HomeScreen({ navigation }: HomeScreenProps) {
  const [search, setSearch] = React.useState('');
  const [wasClicked, setWasClicked] = React.useState<string[]>([]);
+  const platform = Platform.OS as 'ios' | 'android';


What about web and other platforms?

tomekzaw · 2025-11-10T13:40:11Z

apps/common-app/src/apps/reanimated/App.tsx

    fontSize: 16,
    color: 'black',
  },
+  marker: {


Suggested change

marker: {

shouldWorkEmoji: {

tomekzaw · 2025-11-10T13:43:22Z

packages/react-native-reanimated/src/helperTypes.ts

+type SharedTransitionProps = {
+  sharedTransitionTag?: string;
+  sharedTransitionStyle?: SharedTransition;
+};


We have an unique chance to consider some breaking changes in the API, for instance:

renaming SharedTransition to SharedElementTransition

renaming sharedTransitionTag to sharedElementTransitionTag or sharedTag

renaming sharedTransitionStyle to something else without style

I think a more descriptive name would be cool, but it just is too long. Maybe just drop the style and have sharedTransiton like with layout animations? It would be confusing though with the tag being a separate thing

tomekzaw · 2025-11-10T13:50:10Z

packages/react-native-reanimated/src/layoutReanimation/SharedTransition.ts

+  extends ComplexAnimationBuilder
+  implements ILayoutAnimationBuilder
+{
+  static presetName = 'LinearTransition';


Suggested change

static presetName = 'LinearTransition';

static presetName = 'SharedTransition';

tomekzaw · 2025-11-10T13:50:47Z

packages/react-native-reanimated/src/layoutReanimation/SharedTransition.ts

+  build = (): LayoutAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    if (!this.durationV) {
+      this.durationV = 500;


Let's double check if the default config looks good.

Yeah I think I inherit too much here from layout animations

tomekzaw · 2025-11-12T09:44:06Z

...ative-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.h

+  ShadowView finalView, currentView, startView;
+  Tag parentTag;
+  std::optional<double> opacity;
+  int count = 1;


count of what?

tomekzaw · 2025-11-12T09:44:32Z

...ive-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.cpp

+
+const ShadowNode *LayoutAnimationsProxy_Experimental::findInShadowTreeByTag(const ShadowNode &node, Tag tag) const {
+  if (node.getTag() == tag) {
+    return const_cast<const ShadowNode *>(&node);


Can't it be done simpler?

tomekzaw · 2025-11-12T09:44:43Z

...ive-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.cpp

+  if (node.getTag() == tag) {
+    return const_cast<const ShadowNode *>(&node);
+  }
+  for (auto &child : node.getChildren()) {


Suggested change

for (auto &child : node.getChildren()) {

for (const auto &child : node.getChildren()) {

tomekzaw · 2025-11-12T09:48:48Z

...ive-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.cpp

+    }
+
+    auto oldView = oldChildShadowView;
+    Rect window{};


Suggested change

Rect window{};

Rect window;

tomekzaw · 2025-11-12T09:50:06Z

...ive-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.cpp

+      auto &mutex = strongThis->mutex;
+      auto lock = std::unique_lock<std::recursive_mutex>(mutex);


Suggested change

auto &mutex = strongThis->mutex;

auto lock = std::unique_lock<std::recursive_mutex>(mutex);

auto lock = std::unique_lock<std::recursive_mutex>(strongThis->mutex);

piaskowyk · 2025-11-12T08:46:53Z

apps/fabric-example/package.json

      "USE_SYNCHRONIZABLE_FOR_MUTABLES": true,
-      "USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS": true
+      "USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS": true,
+      "SHARED_ELEMENT_TRANSITIONS": true


Suggested change

"SHARED_ELEMENT_TRANSITIONS": true

"ENABLE_SHARED_ELEMENT_TRANSITIONS": true

As was described in the las point of https://docs.swmansion.com/react-native-reanimated/docs/guides/feature-flags/#remarks-for-contributors

piaskowyk · 2025-11-12T08:50:50Z

packages/react-native-reanimated/src/commonTypes.ts

  EXITING = 2,
  LAYOUT = 3,
+  SHARED_ELEMENT_TRANSITION = 4,
+  SHARED_ELEMENT_TRANSITION_NATIVE_ID = 5,


It looks a bit sus that NATIVE_ID is a type of layout animation 🤔

piaskowyk · 2025-11-12T08:52:48Z

packages/react-native-reanimated/src/layoutReanimation/SharedTransition.ts

+  build = (): LayoutAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    if (!this.durationV) {
+      this.durationV = 500;


Maybe let's make it a bit faster, 300 would be better

piaskowyk · 2025-11-12T08:56:17Z

packages/react-native-reanimated/src/layoutReanimation/SharedTransition.ts

+            animations[key] = target.map(
+              (item: Record<string, number | string>) => {
+                key = Object.keys(item)[0];
+                return {
+                  [key]: animationFactory(item[key]),
+                };
+              }


I know that this is a simple implementation from previous version, but we should keep in mind or note somewhere that this is not the correct way of doing matrix interpolation. Since we have higher priorities, let's keep it as it is for now.

piaskowyk · 2025-11-12T09:01:24Z

packages/react-native-reanimated/src/createAnimatedComponent/AnimatedComponent.tsx

+    if (!getStaticFeatureFlag('SHARED_ELEMENT_TRANSITIONS')) {
+      return;
+    }
+    if (this.props.sharedTransitionTag) {


This will probably prevent the removal of a shared transition from a component when someone assigns null or undefined.

piaskowyk · 2025-11-12T10:06:49Z

...ive-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.cpp

I know that SET and LayoutAnimation are close features, but it think we need to split implementation of Layout animation proxy to maintain readability.

piaskowyk · 2025-11-12T10:07:27Z

...ive-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.cpp

+    auto transform = parseParentTransforms(node, absolutePositions);
+    transition.transform[index] = std::move(transform);


Suggested change

auto transform = parseParentTransforms(node, absolutePositions);

transition.transform[index] = std::move(transform);

transition.transform[index] = parseParentTransforms(node, absolutePositions);

piaskowyk · 2025-11-12T10:08:56Z

...ive-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.cpp

+      overrideTransform(transition.snapshot[1], transition.transform[1], propsParserContext);
+      transitions_.emplace_back(sharedTag, transition);
+    } else if (transition.parentTag[1]) {
+      // TODO: this is too eager


Could you explain this case?

piaskowyk · 2025-11-12T10:11:04Z

...ive-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.cpp

+}
+
+void LayoutAnimationsProxy_Experimental::hideTransitioningViews(
+    int index,


We can replace this index with enum

piaskowyk · 2025-11-12T10:13:49Z

...ive-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.cpp

+    lightNodes_[myTag] = std::move(node);
+
+    sharedTransitionManager_->containerTags_[sharedTag] = containerTag;
+    myTag += 2;


not the best name 😅

bartlomiejbloniarz added 14 commits April 16, 2025 12:14

Animate a hard-coded clone

4032945

Multiple transitions

5e6b09a

use LightNodes

91d6f00

oops

6f2a8b6

opacity hacks

9e216a3

Add scroll offset logic

f9a3be0

remove android logs

4419730

Bring back set examples

98e43c0

Working animation update

d81a573

kinda working animation restart

1be557f

Bring back profiles and progressTransition examples

77453f7

Remove status bar from progressTransition example

7ce9046

kacper example

296b7f5

index tez

93703fb

bglgwyng mentioned this pull request May 7, 2025

Shared element transition doesn't work when useIsFocused from react-navigation is called #7474

Open

subvertallchris mentioned this pull request May 20, 2025

Shared Element Transition not Working With Latest React Native #6630

Open

piaskowyk mentioned this pull request Jun 9, 2025

Implement styleTransition #6479

Closed

bartlomiejbloniarz added 10 commits July 30, 2025 15:30

Add patch for RNScreens

0fb993f

Progress transition poc

b33b360

Cleanup transition types

1ea37cc

Stabilize progress transitions

e5191ce

Set up transition progress listener on android

c2512fa

Temporary fix for text in android

ef90d47

Temporary fix restore state

314a409

Fix android wrong screen

f4b9960

Make back button work on iOS

1f90914

Bring back layout animations

bef0571

bartlomiejbloniarz added 11 commits November 3, 2025 16:29

include

6a3cee9

check screens include

44238e3

format

fd5d7da

Swap requires for imports

d706d15

bring back navigation state

cf7d9cc

New rnsscreens patch

4793857

lock

81c85f6

Fix empty example

bb2af95

fix xcscheme

5fcb0c9

Remove logs from animationsManager.ts

9b0fb36

Remove legacy transforms logic

2a1e10a

bartlomiejbloniarz marked this pull request as ready for review November 4, 2025 15:29

bartlomiejbloniarz changed the title ~~Shared Elements Transitions on the New Architecture~~ Shared Element Transition on the New Architecture (feature flag) Nov 4, 2025

piaskowyk self-requested a review November 5, 2025 19:27

bartlomiejbloniarz requested a review from tomekzaw November 10, 2025 12:11

tomekzaw reviewed Nov 12, 2025

View reviewed changes

piaskowyk reviewed Nov 12, 2025

View reviewed changes

bartlomiejbloniarz added 13 commits November 13, 2025 10:12

Update platform check

94918ba

Rename marker

bd7f35f

rename preset

773593f

Remove comment

a12f70a

ditch strcmp

8b0a2ef

early return

6cd971a

Rename

8ef5b75

oopsie

2e14a32

remove register

92dec61

Add todo

ee7915f

remove comment

3bdeec2

Bring back private

2d0f5ed

cleanup todos

97accbb

	static presetName = 'LinearTransition';
	static presetName = 'SharedTransition';

	for (auto &child : node.getChildren()) {
	for (const auto &child : node.getChildren()) {

		auto &mutex = strongThis->mutex;
		auto lock = std::unique_lock<std::recursive_mutex>(mutex);

	"SHARED_ELEMENT_TRANSITIONS": true
	"ENABLE_SHARED_ELEMENT_TRANSITIONS": true

		auto transform = parseParentTransforms(node, absolutePositions);
		transition.transform[index] = std::move(transform);

	auto transform = parseParentTransforms(node, absolutePositions);
	transition.transform[index] = std::move(transform);
	transition.transform[index] = parseParentTransforms(node, absolutePositions);

Uh oh!

Shared Element Transition on the New Architecture (feature flag) #7466

Are you sure you want to change the base?

Shared Element Transition on the New Architecture (feature flag) #7466

Uh oh!

Conversation

bartlomiejbloniarz commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

slorber commented May 7, 2025

Uh oh!

elozino-eryk commented May 16, 2025

Uh oh!

bglgwyng commented May 16, 2025

Uh oh!

tomekzaw left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

bartlomiejbloniarz commented May 5, 2025 •

edited

Loading