I am trying to make dynamic tab.screen. my code is like this:

import React from 'react';
import { Text, View, TouchableOpacity, Modal } from 'react-native';
import AsyncStorage from '@react-native-munity/async-storage';
import Icon from 'react-native-vector-icons/FontAwesome5';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../mainscreen/GeneralScreen';
import Core from '../mainscreen/CoreScreen';
import Docs from '../mainscreen/GeneralScreen';
import ESS from '../mainscreen/CoreScreen';
import General from '../mainscreen/GeneralScreen';
import HR from '../mainscreen/CoreScreen';
import Payroll from '../mainscreen/GeneralScreen';
import Server from '../mainscreen/CoreScreen';

const Tab = createBottomTabNavigator();
const tabponents = {
  "Home" : Home,
  "Core" : Core,
  "Docs" : Docs,
  "ESS" : ESS,
  "General" : General,
  "HR" : HR,
  "Payroll" : Payroll,
  "Server" : Server
};

class TabNavigator extends React.Component {

  constructor() {
      super();    
      this.state = {
         dashboardtab:[],                 
      }
      this.tabnavigatorasync();      
    }

  tabnavigatorasync = async () => {
    try {
      const dashboardtab = await AsyncStorage.getItem('dashboardtab');    
      const dashboardtabParse = JSON.parse(dashboardtab);      
      this.setState({dashboardtab: dashboardtabParse});      
    } catch (error) {      
    }
  }

  render(){    
    const tabnavigatorRender = this.state.dashboardtab.map((item, index) => {
      const tabponentsrender = tabponents[item.admintab.label];    
      return <Tab.Screen name={item.admintab.label} ponent={tabponentsrender} key={index}/>                         
    });

    return(
          <Tab.Navigator>
            {tabnavigatorRender}                        
          </Tab.Navigator>
        )
  }
}

export default TabNavigator;

the result appears an error like this:

Error: Couldn't find any screens for the navigator. Have you defined any screens as its children?

is there something wrong with the code i made?

I am trying to make dynamic tab.screen. my code is like this:

import React from 'react';
import { Text, View, TouchableOpacity, Modal } from 'react-native';
import AsyncStorage from '@react-native-munity/async-storage';
import Icon from 'react-native-vector-icons/FontAwesome5';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../mainscreen/GeneralScreen';
import Core from '../mainscreen/CoreScreen';
import Docs from '../mainscreen/GeneralScreen';
import ESS from '../mainscreen/CoreScreen';
import General from '../mainscreen/GeneralScreen';
import HR from '../mainscreen/CoreScreen';
import Payroll from '../mainscreen/GeneralScreen';
import Server from '../mainscreen/CoreScreen';

const Tab = createBottomTabNavigator();
const tabponents = {
  "Home" : Home,
  "Core" : Core,
  "Docs" : Docs,
  "ESS" : ESS,
  "General" : General,
  "HR" : HR,
  "Payroll" : Payroll,
  "Server" : Server
};

class TabNavigator extends React.Component {

  constructor() {
      super();    
      this.state = {
         dashboardtab:[],                 
      }
      this.tabnavigatorasync();      
    }

  tabnavigatorasync = async () => {
    try {
      const dashboardtab = await AsyncStorage.getItem('dashboardtab');    
      const dashboardtabParse = JSON.parse(dashboardtab);      
      this.setState({dashboardtab: dashboardtabParse});      
    } catch (error) {      
    }
  }

  render(){    
    const tabnavigatorRender = this.state.dashboardtab.map((item, index) => {
      const tabponentsrender = tabponents[item.admintab.label];    
      return <Tab.Screen name={item.admintab.label} ponent={tabponentsrender} key={index}/>                         
    });

    return(
          <Tab.Navigator>
            {tabnavigatorRender}                        
          </Tab.Navigator>
        )
  }
}

export default TabNavigator;

the result appears an error like this:

Error: Couldn't find any screens for the navigator. Have you defined any screens as its children?

is there something wrong with the code i made?

• javascript
• react-native
• react-navigation-v5

2 Answers 2

As the error states you are not having any screens inside the TabNavigator.

When the ponent is mounted the array is empty and the data is loaded later.

So you can fix this like below

 render(){    
    const tabnavigatorRender = this.state.dashboardtab.map((item, index) => {
      const tabponentsrender = tabponents[item.admintab.label];    
      return <Tab.Screen name={item.admintab.label} ponent={tabponentsrender} key={index}/>                         
    });

   // Add this to return null or you can also show <ActivityIndicator/>
   if(this.state.dashboardtab.length===0)
       return null;

    return(
          <Tab.Navigator>
            {tabnavigatorRender}                        
          </Tab.Navigator>
        )
  }

Also call the tabnavigatorasync from ponentDidMount instead of calling it from the constructor.

ponentDidMount(){
  this.tabnavigatorasync(); 
}

  <NavigationContainer>
  <Tab.Navigator
    screenOptions={{
      headerShown: false,
      tabBarActiveTintColor: '#A968EE',
      tabBarStyle: {
        position: 'absolute',
        backgroundColor: 'black',
      },
    }}>
    {data?.map((val, index) => (
      <Tab.Screen
        key={index}
        name={val?.Name}
        options={{
          tabBarLabel: val?.Name,
          tabBarIcon: () => (
            <Image
              style={{
                height: 20,
                width: 20,
              }}
              source={val?.ImageSource}
            />
          ),
        }}
        ponent={val?.Component}
      />
    ))}
  </Tab.Navigator>
</NavigationContainer>