I'm upgrading a react native app to version 72.3 using the upgrade helper here. What I notice is the initial app screen loads without issue. But once I trigger a navigation to a new screen using @react-navigation/bottom-tabs@6.5.8
's - Tab.Screen
component a runtime error is thrown on the component to render.
The app throws the following runtime error:
ERROR 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 `TravelSideView`.
This error is located at:
in RCTView (created by View)
in View
in Unknown (created by TouchableOpacity)
in TouchableOpacity (created by TouchableOpacity)
in TouchableOpacity (created by TravelSideView)
Looking at the error I've found a suggestion to make sure the component being loaded includes a default export. (Which it does)
Any idea what needs to change in the container component syntax to resolve this error?
Here is the definition for the screen container - TravelSideViewContainer
the tab navigates to:
import TravelSideViewContainer from './travelSide/TravelSideViewContainer';
function Travel() {
return (
<Stack.Navigator
headerMode="screen"
screenOptions={{
headerTintColor: 'white',
headerStyle: {backgroundColor: SOP_BLUE},
}}>
<Stack.Screen
name={LocalizedStringsMap.viewThreeTitle}
component={TravelSideViewContainer}
/>
</Stack.Navigator>
);
}
<Tab.Screen
testID="travelTab"
name="Travel"
title={LocalizedStringsMap.viewThreeTabTitle}
component={Travel}
options={{
tabBarLabel: LocalizedStringsMap.viewThreeTabTitle,
}}
/>
And here is a gist of the container component being passed to the screen component
prop. Which does include a default export as demonstrated below:
TravelSideViewContainer
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
// import * as NavigationStateActions from '../navigation/NavigationState';
import * as TravelSideStateActions from '../travelSide/TravelSideState';
import TravelSideView from './TravelSideView';
export default connect(
(state) => ({
unitType: state.getIn(['travelSide', 'unitType']),
}),
(dispatch) => {
return {
travelSideStateActions: bindActionCreators(
TravelSideStateActions,
dispatch,
),
};
},
)(TravelSideView);