Error: Element type is invalid

[projodesign]

I keep getting the below message when trying to work with react-navigation-shared-element. I've tried on two different projects, including following a tutorial to the letter. But both projects have the same issue.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Context.Consumer`.

This error is located at:
    in SharedElementStackNavigator (created by WrapNavigator)
    in WrapNavigator (at RootNavigator.js:16)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:396)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at RootNavigator.js:15)
    in RootNavigator (at App.js:14)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

App.js

import React from 'react';
import RootNavigator from './navigation/RootNavigator';

export default function App() {
  return <RootNavigator />;
}

RootNavigator.js

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createSharedElementStackNavigator} from 'react-navigation-shared-element';
import {createStackNavigator} from '@react-navigation/stack';

import TournamentsScreen from '../screens/TournamentsScreen';
import MatchesScreen from '../screens/MatchesScreen';

//const Stack = createStackNavigator();
const Stack = createSharedElementStackNavigator();

export default function RootNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode="none" initialRouteName="TournamentsScreen">
        <Stack.Screen name="TournamentsScreen" component={TournamentsScreen} />
        <Stack.Screen name="MatchesScreen" component={MatchesScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

TournamentsScreen

import React, {useState, useContext, useEffect} from 'react';
import {View, Text, Dimensions} from 'react-native';

import {SharedElement} from 'react-navigation-shared-element';

const deviceWidth = Dimensions.get('window').width;

export default function TournamentsScreen({navigation}) {
  //const correctGuesses = useSelector((correct_guesses) => correct_guesses);

  return (
    <View style={{backgroundColor: '#f6f6f7', flex: 1}}>
      <SharedElement id={10}>
        <Text>Tournaments</Text>
      </SharedElement>
    </View>
  );
}

Note, the app works if I use createStackNavigator, but I get the above error message if I use createSharedElementStackNavigator.

Also should the app still work without implementing the SharedElement component anywhere? This tutorial suggests it should: https://blog.logrocket.com/how-to-use-shared-element-transition-with-react-navigation-v5/

Here are the package versions:

"@react-navigation/native": "^5.8.2", "@react-navigation/stack": "^5.11.1", "react-native": "0.63.3", "react-native-shared-element": "^0.8.3", "react-navigation-shared-element": "^3.1.3",

Thank you.

[projodesign]

Managed to fix it.

I needed to use: "react-navigation-shared-element": "^5.0.0-alpha1".

I did follow the official install instructions for React Navigation 5: https://github.com/IjzerenHein/react-navigation-shared-element/blob/HEAD/docs/API.md#createsharedelementstacknavigator

This installs version 3.1.3. Should the docs not state:

yarn add react-navigation-shared-element@5.0.0-alpha1 ?

[guytepper]

I'm experiencing a similar issue.

@projodesign version 5.0.0-alpha1 is an older, beta version that was released long ago. v3.1.3 is the latest version that works with react navigation 5, and so reverting back to an older version isn't a solution - please reopen the issue :)

[guytepper]

Updating react navigation dependencies seems to solve the issue: https://github.com/IjzerenHein/react-navigation-shared-element/issues/196#issuecomment-922251528