React Navigation shared-element not working at all *Expo dev-client*

[argi001]

Hello, unfortunately I can't get "react-navigation-shared-element" to work at all. I use the expo-dev-client and so far I have no error messages. The transition just doesn't work no matter what I try. Maybe one of you can help me if I'm missing something or if it's just a bug?

EventNavigation

import React, { useState } from "react";
import routes from "./routes";
import EventOverviewScreen from "../screens/EventOverviewScreen";
import { EventDetailsScreen } from "../screens/EventDetailsScreen";
import { createSharedElementStackNavigator } from "react-navigation-shared-element";

const Stack = createSharedElementStackNavigator();

const EventNavigation = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        gestureEnabled: true,
        headerShown: false,
        cardOverlayEnabled: true,
      }}
    >
      <Stack.Screen
        name={routes.EVENT_OVERVIEW}
        component={EventOverviewScreen}
      />
      <Stack.Screen
        name="EventDetailsScreen"
        component={EventDetailsScreen}
        options={() => ({
          headerShown: false,
        })}
        sharedElements={(route) => {
          return [route.params.event.id];
        }}
      />
    </Stack.Navigator>
  );
};

export default EventNavigation;

EventOverviewScreen

import React, { useEffect, useState } from "react";
import { StyleSheet, View, ScrollView, Dimensions } from "react-native";

import LottieView from "lottie-react-native";

import colors from "../config/colors";
import Screen from "../components/Screen";
import eventApi from "../api/event";
import EventListItem from "../components/EventListItem";
import { SharedElement } from "react-navigation-shared-element";

const windowWidth = Dimensions.get("window").width;
function EventOverviewScreen({ navigation }) {
  const [events, setEvents] = useState();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    loadEvents();
  }, [events?.size]);

  const loadEvents = async () => {
    setLoading(true);
    const response = await eventApi.getAllFutureEvents();
    //setError(!response?.ok);
    setEvents(response.data);
    setLoading(false);
  };

  const row = [];
  if (events) {
    for (let event of events) {
      if (event.eventType.id != 2) row.push();
    }
  }

  return (
    <Screen style={styles.screen}>
      <ScrollView showsVerticalScrollIndicator={false}>
        {loading || !events ? (
          <LottieView
            source={require("../assets/animation/skeleton-loading.json")}
            loop={true}
            autoPlay={true}
            style={{ width: windowWidth, height: windowWidth }}
          />
        ) : (
          <View style={styles.container}>
            {events?.map((event) => (
              <SharedElement id={event.id}>
                <EventListItem
                  onPress={() =>
                    navigation.navigate("EventDetailsScreen", { event })
                  }
                  key={event.id + "_Card"}
                  event={event}
                />
              </SharedElement>
            ))}
          </View>
        )}
      </ScrollView>
    </Screen>
  );
}

const styles = StyleSheet.create({
  screen: {
    backgroundColor: colors.light,
  },
  container: {
    backgroundColor: colors.light,
    marginVertical: 15,
    padding: 10,
  },
  containerKey: {
    flex: 1,
    backgroundColor: colors.white,
    marginVertical: 15,
    padding: 10,
  },
  row: {
    padding: 5,
    paddingVertical: 10,
    borderBottomColor: colors.lightGray,
    borderBottomWidth: 1,
  },
});

export default EventOverviewScreen;

EventDetailsScreen

import React from "react";
import { View, StyleSheet, Dimensions } from "react-native";
import { SharedElement } from "react-navigation-shared-element";
import EventListItem from "../components/EventListItem";

const windowWidth = Dimensions.get("window").width;
export function EventDetailsScreen({ navigation, route }) {
  const { event } = route.params;

  return (
    <View style={styles.container}>
      <SharedElement id={event.id}>
        <EventListItem onPress={() => console.log(event.id)} event={event} />
      </SharedElement>
    </View>
  );
}

const styles = StyleSheet.create({
  image: {
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    width: windowWidth - 40,
    height: windowWidth / 2,
  },
});

package.json

...
"@react-navigation/stack": "^6.3.1",
"react-native-shared-element": "^0.8.4",
"react-navigation-shared-element": "^3.1.3",
...

[p-syche]

Hello @argi001 ,

Sorry this is taking so long. Have you made any progress with this issue or are you still facing it?