Shared Element Transitions

[kennetpostigo]

Are there any examples of how to do shared element transitions with expo-router?

[EvanBacon]

No, we use react-native-screens for stack navigation, this does not currently have SET but it is in the works. software-mansion/react-native-screens#1591 once landed, we can implement fairly easily in Expo Router.

[alanschwarz]

any news on SET?

[ThatGuySam]

Looks like it's way simpler than the existing Expo Shared Element example.

You just use a Animated.* component from reanimated and add a sharedTransitionTag="someMatchingTag"

import Animated from 'react-native-reanimated'

function Screen1({ navigation }) {
  return (
    <View style={{ flex: 1 }}>
      <Animated.View
        style={{ width: 150, height: 150, backgroundColor: 'green' }}
        sharedTransitionTag="sharedTag"
      />
      <Button title="Screen2" onPress={() => router.push('/screen2')} />
    </View>
  );
}

function Screen2({ navigation }) {
  return (
    <View style={{ flex: 1, marginTop: 50 }}>
      <Animated.View
        style={{ width: 100, height: 100, backgroundColor: 'green' }}
        sharedTransitionTag="sharedTag"
      />
      <Button title="Screen1" onPress={() => router.push('/screen1')} />
    </View>
  );
}

[betojsx]

@ThatGuySam thanks for sharing. I'm gonna try this

[eyoelmeles]

@ThatGuySam
I have tried to duplicate you example, and it doesn't work. The following is my code. did i miss something?

import Animated from "react-native-reanimated";
import { router } from "expo-router";

const { width } = Dimensions.get("window");

const ScreenA = () => {
  return (
    <View style={styles.container}>
      <Animated.View
        style={styles.sharedContainerA}
        sharedTransitionTag="tagger"
      >
        <Text style={styles.textStyleA}>Hello world</Text>
      </Animated.View>
      <TouchableOpacity
        onPress={() => {
          router.push("/shared_element/shared_component_b");
        }}
      >
        <Text>Go to B</Text>
      </TouchableOpacity>
    </View>
  );
};

export default ScreenA;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  sharedContainerA: {
    width: width * 0.6,
    height: 400,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "tomato",
  },
  textStyleA: {
    fontSize: 18,
    fontWeight: "300",
  },
});

// Screen B

import Animated from "react-native-reanimated";

const { width } = Dimensions.get("window");

const ScreenB = () => {
  return (
    <View style={styles.container}>
      <Animated.View
        style={styles.sharedContainerB}
        sharedTransitionTag="tagger"
      >
        <Text style={styles.textStyleB}>Hello world</Text>
      </Animated.View>
      <Link
        href={{
          pathname: "/shared_element",
        }}
      >
        Back
      </Link>
      <Text>SharedComponents</Text>
    </View>
  );
};

export default ScreenB;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "center",
  },

  sharedContainerB: {
    width: width * 0.9,
    height: 600,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "tomato",
  },
  textStyleB: {
    fontSize: 22,
    fontWeight: "300",
  },
});
```ts

[Ortbri]

yeah ive tried it too. i got it to work but its quite buggy

[ThatGuySam]

It might be an issue with the newest Expo/Expo Router version.

I ended up not using it because the start or end had a visual issue that's was too tricky to work around for what I was doing.

[lewisdonovan]

Any update on this? Kinda nuts that we can't do this in Expo, it's such a standard feature of apps nowadays.

[qwindo13]

Any updates? Looking forward for this functionality

[ThatGuySam]

Yeah, it's not working for me either anymore.

I tried it here with Expo 51 for anyone who wants to take a crack at it:
https://github.com/ThatGuySam/expo-router-transition-demo

I think the issue might be that it needs to be the same "Stack" or "Navigator"

Here's the docs for doing it with React Navigation, which Expo Router uses under the hood:
https://reactnavigation.org/docs/7.x/shared-element-transitions?config=dynamic

There's some disconnect between the expected React Navigation implementation and Expo Router.

[themtaysw]

as of today, expo-router uses v6 of react-navigation not v7... they are about to release expo SDK52 which should be using v7 so probably best to do now ismjust wait a few weeks and hopefully have it then 😄

[sniperyork]

Any updates on this? hopefully this feature is coming soon.

[i8ramin]

Also very interested in this feature. Subscribing for details. thx

[adamblvck]

Yup, shared transitions don't seem to work when one sits in tabs, and the other in a stack.

[joekendal]

I have solved it by using a parent stack and tab child + stack child. See explanation: expo/expo#27606 (comment)

[buildnewapp]

I have tried many methods, but the expo router does not support shared elements. Time: November 8, 2024 21:11:14

[joekendal]

@buildnewapp well I have it working with expo@52.0.0-preview.22 and expo-router@4.0.0-preview.14 no problem. The issue is probably your use of shared elements. Can you elaborate how you are trying to use shared elements?

I am using <Animated.View sharedTransitionTag={id}> from react-native-reanimated@3.16.1 and its working as explained here

[buildnewapp]

I don't want to upgrade to the beta version yet. Let's wait for the shared element
I mainly use pictures and video lists for detailed scenarios

[joekendal]

It doesn't work with the New Architecture though and the maintainer of shared elements has quit. So we have to make sure:

app.json

...
"newArchEnabled": false
...

is set going forward.

[joekendal]

the maintainer who quit was hired at expo but does not look like expo are maintaining it