0

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);

Brian Var
  • 6,029
  • 25
  • 114
  • 212

0 Answers0