RNSharedElementTransition is not available, did you forget to link `react-native-shared-element

[MarcHbb]

I have this error I don't know why. Everything is good in the code.
I use Managed Workflow and it says that we don't need to link the module since Expo should do it automatically

"@react-navigation/native": "^6.0.13",
"@react-navigation/native-stack": "^6.9.1",
"@react-navigation/stack": "^6.3.2",
"react-native-share": "^8.1.0",
"react-native-shared-element": "^0.8.8"

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[MarcHbb]

I can't reproduce the bug, here's an expo snack with my npm versions : https://snack.expo.dev/@marc-hbb/098f6b
But still, maybe you got an idea of what might be happening ? Should I create another build after installing the packages ?

Here's a screenshot :

[IjzerenHein]

The snack works as expected. I've tried with the latest Expo Go client on iOS with both SDK 46 and 47. This means that react-native-shared-element is correctly linked with the Expo Go client.

Are you using the Expo Go client, or are you using some kind of custom built dev client for your app?

[mry07]

I have the same issue. I use SDK 49 and Expo Go for development.

[IjzerenHein]

I'm unable to reproduce, I just did a test with the latest Expo Go client and that worked. Can you provide a repro?

[mry07]

I'm unable to reproduce, I just did a test with the latest Expo Go client and that worked. Can you provide a repro?

Just run this code and navigate, then you can reproduce the issue.

"@react-navigation/native": "^6.1.7"
"@react-navigation/stack": "^6.3.17"
"expo": "~49.0.7"
"react-native-shared-element": "^0.8.8"
"react-navigation-shared-element": "^3.1.3"

import "react-native-gesture-handler";
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { View, Text, StyleSheet } from "react-native";
import { createSharedElementStackNavigator } from "react-navigation-shared-element";

const SHARED_ID = "block-1";

function HomeScreen({ navigation }) {
  return (
    <View style={styles.center}>
      <Text
        onPress={() => {
          navigation.navigate("Profile", { shared: { id: SHARED_ID } });
        }}
      >
        Navigate to profile
      </Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={styles.center}>
      <Text>Profile Screen</Text>
    </View>
  );
}

const Stack = createSharedElementStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen
          name="Profile"
          component={ProfileScreen}
          sharedElements={(route) => {
            const { shared } = route.params;
            return [shared.id];
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  center: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

export default App;

[IjzerenHein]

It seems that as of Expo SDK 49, react-native-shared-element is no longer part of Expo Go. It was removed but it was not mentioned in the CHANGELOG.md.

That's unfortunate but not a showstopper. What you'll need to do is to create a development build, which will then automatically contain the native code for react-native-shared-element as long as you have that installed as a dependency.