I just recently upgraded the react-native version of my project to
v0.72.4 and upgraded all dependencies that could be updated as well. This included the @react-navigation/* packages. The issue is that my unit tests are currently failing with the following error:
Warning: React.createElement: 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 `MaybeScreenContainer`.
at enabled (/Users/rameezhussain/dev/selfapy/mobile-react/node_modules/@react-navigation/stack/src/views/Screens.tsx:13:3)
I've checked that file in the @react-navigation/stack package, and I don't see anything weird with it. The only thing I can think of that's causing the issue is the MockedNavigator component which I use to wrap the components I want to test. It looks like this:
import React, { ComponentType } from 'react';
import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, StackNavigationOptions } from '@react-navigation/stack';
const Stack = createStackNavigator();
type Props = {
componentName?: string;
component?: ComponentType<any>;
secondComponentName?: string;
secondComponent?: ComponentType<any>;
params?: object;
secondParams?: object;
};
const screenOptions: StackNavigationOptions = {
animationEnabled: false,
};
export const MockedNavigator = ({
componentName = 'MockedComponent',
component = () => <View />,
secondComponentName = 'SecondMockedComponent',
secondComponent = () => <View />,
params = {},
secondParams = {},
}: Props) => {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={screenOptions}>
<Stack.Screen name={componentName} component={component} initialParams={params} />
<Stack.Screen name={secondComponentName} component={secondComponent} initialParams={secondParams} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default MockedNavigator;
The thing is that this setup was working with @react-navigation/[email protected] and the issue pops up when I tried using 6.x.x. More specifically, I am using v6.3.18.
I also found this Github issue, so it seems like there are others facing this issue as well.
Any idea what might be causing this?