BottomTabNavigator not appearing on bottom of screen

user_15329359 0
Viewed 1419

I have bee trying to implement BottomTabNavigator in my app. In the output, Bottom Tab is appearing at the top of the screen, not at the bottom.

Kindly help me in identifying the error.

App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import PassengerScreen from './Passenger';
import Lovedones from './Lovedones';


import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

export default App=() => ( 
<NavigationContainer>
    <Drawer.Navigator initialRouteName="Passenger" drawerPosition="right" > 
        <Drawer.Screen name="Passenger" component={PassengerScreen} options= {{ title:'Passenger'}} />
        <Drawer.Screen name="Lovedones" component={Lovedones} options= {{ title:'loved ones!!'}} />
      </Drawer.Navigator>
  </NavigationContainer>
);

Passenger.js

import React from 'react';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';


import MapsScreen from './MapScreen';
import Driver from './Driver';
import EmergencyStack from './EmergencyScreen';
import AccountStack from './AccountScreen';



import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { SafeAreaView, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

export default PassengerScreen=() => (
<SafeAreaView>
<Passenger/>
</SafeAreaView>
);

const Tab = createBottomTabNavigator();

Passenger=() => (
    <Tab.Navigator initialRouteName="Map"  tabBarOptions={{ activeTintColor: '#e91e63', }} >
      <Tab.Screen name="Account" component={AccountStack} options={{ tabBarLabel: 'Account', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="account-box" color={"#000000"} size={30} />), }}/>
      <Tab.Screen name="Driver" component={Driver} options={{ tabBarLabel: 'Driver Details', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="card-account-details" color={"#000000"} size={30} />), }}/>
      <Tab.Screen name="Map" component={MapsScreen} options={{ tabBarLabel: 'Map', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="map-marker" color={"#0000FF"} size={30} />), }}/>
      <Tab.Screen name="Emergency" component={EmergencyStack} options={{ tabBarLabel: 'Emergency', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="alarm-light" color={"#FF0000"} size={30} />), }}/>
    </Tab.Navigator>
);

In the App.js, I have created a drawer which has Passenger screen. In the Passenger.js, I have created the function Passenger for bottom tab to appear at the bottom of screen but instead it appears at the top of the screen. In the output, the bottom tab appears at the top of the screen.

enter image description here

react-navigation-bottom-tab react-navigation-v5 react-navigation react-native-navigation react-native
2 Answers

The problem is that you're wrapping your tab navigator with a type of View (SafeAreaView).

Don't surround the Passenger component, which renders your tab navigator, in PassengerScreen with a SafeAreaView.

Instead of wrapping the navigator with a SafeAreaView, wrap the views you render inside the screen components with a SafeAreaView.

https://reactnavigation.org/docs/handling-safe-area/

This behavior seems to occurs because a type of View is going to be rendered starting from the top and the bottom tabs are rendered relative to this parent View. You haven't set a height, so the SafeAreaView containing your tabs probably barely has any height, if any (judging from the picture in your question). So another fix would be to make the SafeAreaView bigger. You could set flex: 1 on the SafeAreaView for example.

user_90983500

issue is that you're wrapping your PassengerScreen with SafeAreaView which is parent to your Passenger - Tab Screen

so for Parent: PassengerScreen SafeAreaView(View) didn't mention style - flex:1 so children in it also didn't assign any space/layout so it's insisting to show on top of the screen layout.

export default PassengerScreen=() => (
   <SafeAreaView style={{flex:1}}>
      <Passenger/>
   </SafeAreaView>
);

or simply return TAB component which is Passenger without wrapping with any view.

user_18142290
Related