How to show dynamic tabs with react-native-tab-view?

Question

I have been trying to show dynamic tabs with react-native-tab-view but it keeps on giving me this 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.

Check the render method of `SceneComponent`.

This error is located at:
    in SceneComponent (at SceneMap.js:16)
    in RCTView (at View.js:43)
    in AndroidViewPager (at ViewPagerAndroid.android.js:247)
    in ViewPagerAndroid (at PagerAndroid.js:154)
    in PagerAndroid (at TabView.js:59)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in TabView (at UnderlineTabbar.js:76)

My code is:

import * as React from 'react';
import { StyleSheet, Dimensions, View } from 'react-native';
import {
  TabView,
  TabBar,
  SceneMap,
  type Route,
  type NavigationState,
} from 'react-native-tab-view';
import LinearGradient from 'react-native-linear-gradient';
import CategoryPage from './CategoryPage';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
import ButtonWithIcon from '../../components/ButtonWithIcon';

type State = NavigationState<
  Route<{
    key: string,
    title: string,
  }>
>;

const initialLayout = {
  height: 0,
  width: Dimensions.get('window').width,
};

export default class UnderlineTabbar extends React.Component<*, State> {

  constructor(props) {
      super(props);

      this.state = {
        index: 0,
        routes: [],
        scenes: {}
      };
      props.categories.forEach(category => {
        this.state.routes.push({ key: category.description, title: category.name });
      });
      let scenes = {};
      props.categories.forEach(category => {
        if(category.assets.length > 0) {
          const FirstRoute = () => (
            <View style={[styles.container, { backgroundColor: '#ff4081' }]} />
          );
          scenes[category.description] = FirstRoute;
        }
      });
      this.state.scenes = scenes;
  }

  _handleIndexChange = index =>
    this.setState({
      index,
    });

  _renderTabBar = props => (
    <TabBar
      {...props}
      scrollEnabled
      indicatorStyle={styles.indicator}
      style={styles.tabbar}
      tabStyle={styles.tab}
      labelStyle={styles.label}
    />
  );

  render() {
    const config = {
      velocityThreshold: 0.1,
      directionalOffsetThreshold: 800
    };
    return (
      <TabView
        style={[styles.container, this.props.style]}
        navigationState={this.state}
        renderScene={SceneMap(this.state.scenes)}
        renderTabBar={this._renderTabBar}
        onIndexChange={this._handleIndexChange}
        initialLayout={initialLayout}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tabbar: {
    backgroundColor: '#3f51b5',
  },
  tab: {
    width: 120,
  },
  indicator: {
    backgroundColor: '#ffeb3b',
  },
  label: {
    color: '#fff',
    fontWeight: '400',
  },
});

Vareck

Where is SceneComponent ? – Concatenate

This does not use Navigation. – Vareck

But the error clearly states that it is in SceneComponent . – Concatenate

Ah, that is in the SceneMap component of the react-native-tab-view library. – Vareck

@Vareck did u find any solution? i have the same problem. – Malpighiaceous

@rahimasgari No, I didn't. It seems that the library does not suport dynamic tabs. – Vareck

@Vareck still no solutions?? – Hypethral

@PavithraPurushothaman See this: github.com/react-native-community/react-native-tab-view/issues/… – Vareck

use setState for dynamic tabs – Underprivileged

Answer 1

For dynamic tabs, just set route value only after conditions are satisfied :

For example: I have to set Review,Gallery tabs based on availability of data in api response: Example:

 this.state = {
  index: 0,
  routes: []
}
 ------------------

<TabView
      navigationState={this.state}
      renderScene={this.renderScene}
      renderTabBar={this.renderTabBar}
      onIndexChange={index => {
        this.setState({ index });
      }}
      swipeEnabled={false}
    />
-------------------------


 setRoutes() {
 let tabArray=[];
 if(......condition...){
 tabArray.push({key:"Gallery",title:"Gallery",navigation: this.props.navigation})
 }
 if(......condition...){
 tabArray.push({key:"Review",title:"Review",navigation: this.props.navigation})
 }
 //set route here
 this.setState({
  routes: tabArray
 });
 }

That's it !!

Cronk