Bottom navigation is not working on react-native

Question

https://reactnavigation.org/docs/material-bottom-tab-navigator

Using the above blog ,i have created bottom navigation bar.Error says on line 29 "component" predefined property of Tab.Screen should be capital. Error in App

This is my BottomNavigation.js file

import * as React from 'react';
import {Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';

import NotificationsNoneIcon from '@material-ui/icons/NotificationsNone';
import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone';
import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
import WbIncandescentOutlinedIcon from '@material-ui/icons/WbIncandescentOutlined';

import HomeScreen from '../screens/HomeScreen';
import AddDocument from '../screens/Notification';
import Notification from '../screens/AddDocument';
import AddProject from '../screens/AddProject';

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      labeled="false"
      activeColor="black"
      labelStyle={{fontSize: 12}}
      //style={{ backgroundColor: "black" }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{tabBarIcon: () => <HomeOutlinedIcon />}}
      />
      <Tab.Screen
        name="AddDocument"
        component={AddDocument}
        options={{tabBarIcon: () => <AddCircleOutlineTwoToneIcon />}}
      />
      <Tab.Screen
        name="AddProject"
        component={AddProject}
        options={{tabBarIcon: () => <WbIncandescentOutlinedIcon />}}
        tabBarOptions={{showLabel: false}}
      />
      <Tab.Screen
        name="Notification"
        component={Notification}
        options={{tabBarIcon: () => <NotificationsNoneIcon />}}
      />
    </Tab.Navigator>
  );
}

export default class BottomNavigation extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <MyTabs />
      </NavigationContainer>
    );
  }
}

component is a property of Tab.screen but I am still getting error Please help me Thanks in advance

Answer 1

I was returning "NavigationContainer", Now I am simply returning Tab.Navigator to my App.js after that i am able to get bottom Navigator

My App.js looks like

export default function App() {
  return (
    <NavigationContainer>
      <BottomNavigation />
    </NavigationContainer>
  );
}

i just removed NavigationContainer from BottomNavigation.But now my icon isn't getting displayed. Modified BottomNavigation.js File

import * as React from 'react';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';

import HomeScreen from '../screens/HomeScreen';
import AddDocument from '../screens/Notification';
import Notification from '../screens/AddDocument';
import AddProject from '../screens/AddProject';

const Tab = createMaterialBottomTabNavigator();

export default function BottomNavigation(props) {
  return (
    <Tab.Navigator
      // labeled="false"
      labelStyle={{fontSize: 12}}
      inactiveColor="white"
      activeColor="white"
      //style={{backgroundColor: 'black'}}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({color}) => (
            <MaterialCommunityIcons
              name="home-outline"
              color={color}
              size={26}
            />
          ),
        }}
      />
      <Tab.Screen
        name="AddDocument"
        component={AddDocument}
        options={{
          tabBarIcon: ({color}) => (
            <AntDesign name="addfile" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="AddProject"
        component={AddProject}
        options={{
          tabBarIcon: ({color}) => (
            <SimpleLineIcons name="magnifier-add" color={color} size={26} />
          ),
        }}
        tabBarOptions={{showLabel: false}}
      />
      <Tab.Screen
        name="Notification"
        component={Notification}
        options={{
          tabBarIcon: ({color}) => (
            <MaterialCommunityIcons
              name="bell-outline"
              color={color}
              size={26}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

My icons were not getting displayed so I referred to https://github.com/oblador/react-native-vector-icons/issues/463 just executed

react-native link

and now my bottom Navigation Bar is working perfectly.