3

I have updated my dependencies to React Navigation 6.x

React Navigation 6.x says, "Headers by default in Bottom Tabs & Drawer# Developers often want to show a header for screens inside of drawers and bottom tabs. To do this, we had to nest a stack navigator which provides a header, even if it was a navigator with just one screen. So we now show headers by default in screens of drawer and bottom tabs. No nesting necessary. We also export a Header component in the new elements library to use anywhere in your components."

Now I have a new header above my old custom built stack navigator header. To say it clearly - I HAVE TWO HEADERS.

I want to delete my old custom built stack navigator header and incorporate the new native header with React Navigation 6.x.

Sample of my problem

I want the custom header ui & functionality in the default header of bottom-tab in react navigation v6. Below is my existing header component.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { Feather } from '@expo/vector-icons';
import HomeScreen from '../screens/HomeScreen';
import SearchIcon from './searchicon';

const HomeStack = createStackNavigator();

const homeRoutes = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen 
      name="Homes" 
      component={HomeScreen}
      options={{
        headerTitle: () => (
          <Text style={styles.myText}>MyApp</Text>
        ),
        headerTitleAlign: 'left',
        //headerStyle:{height: 67},
        headerRight: () => (
          <View style={styles.Container}>
          <SearchIcon/>
          <Feather name="bell" size={21} color="black" />
          </View>
        )
      }}
      />
    </HomeStack.Navigator>
  );
}

const styles = StyleSheet.create({
  Container: {
    flexDirection: "row",
    justifyContent: "space-evenly",
    alignItems: 'center',
    alignContent: 'center',
    width: 120,
  },
  myText: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#ff0000',
  }
});

export default homeRoutes;

The bottom tab code is as under:

import React from 'react';
//import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// import { getHeaderTitle } from '@react-navigation/elements';
import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
import AddScreen from '../screens/AddScreen';
import ExploreScreen from '../screens/ExploreScreen';
import HomeStackScreen from './homeroutes';
import MeStackScreen from './meroutes';
import LikesStackScreen from './likesroutes';

const Tab = createBottomTabNavigator();

const BottomNavRoutes = () => {
    return (
    <Tab.Navigator
      initialRouteName="HomeStackScreen"
        screenOptions={({ route }) => ({
          headerShown: false, //Show Header in Stack Navigator
          tabBarIcon: ({ color, size }) => {
            if (route.name === 'Home') {
              return <MaterialCommunityIcons name="home" color={color} size={size} />;
            }
            if (route.name === 'Explore') {
              return <MaterialIcons name="explore" color={color} size={size} />;
            }
            if (route.name === 'Add') {
              return <MaterialCommunityIcons name="plus-box" color={color} size={size} />;
            }
            if (route.name === 'Likes') {
              return <MaterialCommunityIcons name="heart" color={color} size={size} />;
            }
            if (route.name === 'Me') {
              return <MaterialCommunityIcons name="account" color={color} size={size} />;
            }
          },
            tabBarActiveTintColor: "#ff0000",
            tabBarInactiveTintColor: "#888888",
            tabBarLabelStyle: {
              fontSize: 11
            },
            tabBarStyle: [
              {
                display: "flex"
              },
          //showLabel: false,
          //style: { padding:5, paddingBottom: 4, },  
          // null
            ]
          }
        )} 
    >
      <Tab.Screen name="Home" component={HomeStackScreen} />
      <Tab.Screen name="Explore" component={ExploreScreen} />
      <Tab.Screen name="Add" component={AddScreen} 
        // options={{
        //   tabBarLabel: 'Home',
        //   tabBarIcon: ({ color }) => (
        //     <MaterialCommunityIcons name="home" color={color} size={26} />
        //   ),
        // }}
      />
      <Tab.Screen name="Likes" component={LikesStackScreen} />
      <Tab.Screen name="Me" component={MeStackScreen} />
    </Tab.Navigator>
    )
}

export default BottomNavRoutes;

How to go about it. Any Ideas? Please help.

Shailendra
  • 31
  • 3

1 Answers1

0

I also have the same problem so I :v

  LogBox.ignoreLogs(['Bottom Tab Navigator']);
minhnn
  • 1