Hello I'm trying to have a screens with a tab bar, but I can't proceed because an error is blocking me. I know I did follow some tutorial properly but in my case it didn't work.

Error: Screen_Shot

Target UI:

Tab Bar => Ordering (screen) => Category (screen)
           Settlement (screen)
           Pending (screen)

Code:

import Login from './src/ponent/screens/Login';
import tables from './src/ponent/screens/tables';
import Category from './src/ponent/screens/Category';
import Dishes from './src/ponent/screens/Dishes';
import Settlement from './src/ponent/screens/Settlement';
import Pending from './src/ponent/screens/Pending';
import SendingShit from './src/ponent/screens/SendingShit';

export default class App extends Component{
  render() {
    return (
      <Root />
    );
  }
}
const TabNav = createBottomTabNavigator (
  {
    uggh    : { screen: Kaartihan },       // The problem is here
    Settlement  : { screen: Settlement },
    Pending     : { screen: Pending },
  }
);
const Kaartihan = StackNavigator (
  {
    Ordering    : { screen: tables },
    Category    : { screen: Category },
  }
);
const Root = StackNavigator (
  {
    Login           : { screen: Login },
    Tabs            : { screen: TabNav },
    Dishes          : { screen: Dishes },
    SendingShit     : { screen: SendingShit }
  }
);

Hello I'm trying to have a screens with a tab bar, but I can't proceed because an error is blocking me. I know I did follow some tutorial properly but in my case it didn't work.

Error: Screen_Shot

Target UI:

Tab Bar => Ordering (screen) => Category (screen)
           Settlement (screen)
           Pending (screen)

Code:

import Login from './src/ponent/screens/Login';
import tables from './src/ponent/screens/tables';
import Category from './src/ponent/screens/Category';
import Dishes from './src/ponent/screens/Dishes';
import Settlement from './src/ponent/screens/Settlement';
import Pending from './src/ponent/screens/Pending';
import SendingShit from './src/ponent/screens/SendingShit';

export default class App extends Component{
  render() {
    return (
      <Root />
    );
  }
}
const TabNav = createBottomTabNavigator (
  {
    uggh    : { screen: Kaartihan },       // The problem is here
    Settlement  : { screen: Settlement },
    Pending     : { screen: Pending },
  }
);
const Kaartihan = StackNavigator (
  {
    Ordering    : { screen: tables },
    Category    : { screen: Category },
  }
);
const Root = StackNavigator (
  {
    Login           : { screen: Login },
    Tabs            : { screen: TabNav },
    Dishes          : { screen: Dishes },
    SendingShit     : { screen: SendingShit }
  }
);

• javascript
• android
• react-native
• mobile

1 Answer 1

Kaartihan is not initialized. Try to put Kaartihan before TabNav