React Native: TabView not re-rendering after change

Question

I am trying to change dynamically the contents of a TabView. Basically when the user opens the application, the screen fetches the user accounts and renders a tab for each different currency the user has. (So if the user has 10 USD accounts, only a USD tab will be shown, but if he has 1 USD and 1 EUR account, a USD and a EUR tab would be shown).

Everything works fine when the user opens the application, however when he creates or deletes an account the TabView is not updated and either displays the old state or crashes if the new state number of currencies is less than the previous state.

 private _renderCardsTabs = () => {
    const { accounts: { accounts } } = this.props;
    console.log("debug _renderCardTabs", accounts)

    if (accounts.length === 0 || accounts.length < 1) {
      return this._renderEmptyCardsTabs();
    }

    let scenes = this._renderTabs()

    return (
      <TabView
        navigationState={this.state}
        renderTabBar={this._renderTabBar}
        renderScene={({ route }) => {
          return scenes[route.key]()
        }}
        onIndexChange={this._tabHandler}
      />
    );
  }

      private _renderTabBar = (props) => {
    return (
      <View style={styles.tabBarWrapper}>
        <TabBar
          {...props}
          indicatorStyle={styles.indicator}
          style={styles.tabBar}
          labelStyle={styles.label}
          scrollEnabled={false}
          pressOpacity={1}
        />
      </View>
    )

      private _renderTabs = () => {
    const { accounts: { accounts } } = this.props;

    return [...new Set(accounts.map((account: any) => account.currency_symbol.split('-')[1].toLowerCase()))]
      .reduce((acc, item) => {
        acc[item] = () => {
          const { navigation } = this.props;
          return <CardsScreen navigation={navigation} currency={item.toUpperCase()} />;
        };
        return acc;
      }, {});
  }

Error

TypeError: scenes[route.key] is not a function

Things I tried (I used SceneMap)

score 1 · Accepted Answer · answered Nov 27 '19 at 01:21

It ended up that the navigation state was not updated, I needed to update it with the latest routes, this should be done properly with the React Component life cycle, but for now just setting it manualy usding this.state.routes = this._getRoutes() solves the issue.

 private _renderCardsTabs = () => {
    const { accounts: { accounts } } = this.props;

    if (accounts.length === 0 || accounts.length < 1) {
      return this._renderEmptyCardsTabs();
    }

    let scenes = this._renderTabs()
    // This should not go here but it works, I need to update this.state after accounts
    // are updated by sagas from somewhere that doesn't cause a rerender 
    this.state.routes = this._getRoutes()

    return (
      <TabView
        navigationState={this.state}
        renderTabBar={this._renderTabBar}
        renderScene={({ route }) => {
          return scenes[route.key]()
        }}
        onIndexChange={this._tabHandler}
      />
    );
  }

React Native: TabView not re-rendering after change

1 Answers1