Dynamic routes Invariant Violation.

[micheilsgrey]

Current behaviour

I am making some kind of sports statistics for teams and leagues. I fetching data from the server then I parse it and use it thru the redux. I made it first wrong using redux and state of the component. The problem is before i was seeing an activity indicator because i was getting data from redux then copy it to component state with right format for tab-view and populate it. But if data not fetched yet all i was seen is an endless activity indicator. Then i change my redux that way all should work right. I was getting all data from server then format it to the navigation state and connect it to tab-view. And now i am showing view with indicator, after routes fetched an formatted in redux, i trying dynamically populate tab-view with leagues and teams. If i open tabview from navigation with delay its working good, all data in place. But if i first at the start of app navigate to tab-view and watching screen with activity indicator then when data loaded app crashes with error : "Invariant Violation: 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.",

Expected behaviour

Should populate all tabs and screens with data from redux.

Code sample

got examle from here to populate dynamically #599 (comment)

type State = NavigationState<{
  key: string;
  title: string;
  league: EsportLeague;
}>;

type Route = {
  key: string;
  title: string;
  league: EsportLeague;
};

type StandingsState = {
  index: number;
  routes: Route[];
};

export type StandingsTabProps = {
  standingsState: StandingsState;
  pending: boolean;
  error: Error | boolean;
  changeStandingsTabIndex: typeof changeStandingsTabIndex;
};

const renderIndicator = (props: IndicatorProps<Route>) => {
  return <TabBarIndicator {...props} width={115} />;
};

class StandingsTabView extends React.Component<
  StandingsTabProps,
  StandingsState
> {
  _renderTabBar = (props: SceneRendererProps & { navigationState: State }) => (
    <TabBar
      {...props}
      indicatorStyle={{ bottom: 6 }}
      style={{ backgroundColor: '#0C2B33', elevation: 0, shadowOpacity: 0 }}
      scrollEnabled={true}
      renderLabel={this._renderLabel}
      renderIndicator={renderIndicator}
      tabStyle={{ width: 120, height: 52 }}
    />
  );

  _renderLabel = ({
    route,
    focused,
    color,
  }: {
    route: Route;
    focused: boolean;
    color: String;
  }) => {
   ...
  };

  getSceneMap = () => {
    let sceneMap = {};

    this.props.standingsState.routes.map((route, index) => {
      sceneMap[route.league.tournaments[0].league.name] = () => {
        return <LeagueTabScreen tournament={route.league.tournaments[0]} />;
      };
    });

    return sceneMap;
  };

  _renderScene = SceneMap(this.getSceneMap());

  render() {
    if (this.props.standingsState.routes.length == 0 && this.props.pending)
      return (
        <View
          style={{
            flex: 1,
            backgroundColor: '#07232B',
            alignContent: 'center',
            justifyContent: 'center',
          }}
        >
          <ActivityIndicator
            size="large"
            color={'#6AFCFA'}
            style={{ padding: 5 }}
          />
        </View>
      );
    return (
      <TabView
        navigationState={this.props.standingsState}
        renderScene={this._renderScene}
        renderTabBar={this._renderTabBar}
        onIndexChange={this.props.changeStandingsTabIndex}
        initialLayout={{ width: Dimensions.get('window').width }}
      />
    );
  }
}

const mapStateToProps = (state: RootState) => ({
  pending: state.standingsPending.pending,
  standingsState: state.standingsState,
  error: state.standingsError.error,
});

export default connect(mapStateToProps, { changeStandingsTabIndex })(
  StandingsTabView
);

...


//types
export type StandingsRoute = {
  key: string;
  title: string;
  league: EsportLeague;
};
...

//code from API manager 
...

export type StandingsState = NavigationState<StandingsRoute>;

  const routes: StandingsRoute[] = leags.map((league) => {
    return {
      key: league.tournaments[0].league.name,
      title: league.tournaments[0].league.name,
      league: league,
    };
  });

  return routes;
...

For Syntax Highlighting check this link

Screenshots (if applicable)

crash : https://streamable.com/09b5mh
no crash: https://streamable.com/fxu379

What have you tried

#654 read this #601 and this #599 but with no help, i am a noob at react-native so i don't really know what else to do. my code works only if i open tab view later after all data is ready to show.

Your Environment

software	version
ios or android	9.0 android
react-native	~0.61.4
react-native-tab-view	^2.11.0
react-native-gesture-handler	^1.6.0
react-native-reanimated	^1.7.0
node	v13.6.0
npm or yarn	npm 6.13.4

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• ``

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-tab-view (found: 2.11.0, latest: 2.15.1)
• react-native-gesture-handler (found: 1.6.0, latest: 1.7.0)
• react-native-reanimated (found: 1.7.0, latest: 1.10.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?