How to add header left on Tab.Screen using "@react-navigation/bottom-tabs"

Question

I'm using @react-navigation/bottom-tabs Package but I don't understand how to add a header left on Tab.Screen tag?

And also can I add an image on the header left?

Here is my code:

import React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from "./TabScreen/Home";
import Category from "./TabScreen/Category";
import Search from "./TabScreen/Search";
import Profile from "./TabScreen/Profile";
import Colors from "../../../Style_Sheet/Colors";

const Tab = createBottomTabNavigator();

const Tabs =()=>{
    return(
      <Tab.Navigator tabBarPosition="bottom" screenOptions={{
          tabBarStyle: {
              backgroundColor: Colors.dark,
          },
      }}>
          <Tab.Screen name="Home" component={Home} options={{headerTitle:"Explore",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark}}}/>
          <Tab.Screen name="Category" component={Category} options={{headerTitle:"",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark},headerLeft:{}}}/>
          <Tab.Screen name="Search" component={Search} options={{headerTitle:"Explore",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark}}}/>
          <Tab.Screen name="Profile" component={Profile} options={{headerTitle:"Explore",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark}}}/>
      </Tab.Navigator>
    )
}
export default Tabs;

score 1 · Accepted Answer · answered Dec 31 '21 at 10:48

1

Use this,

Here is the code where you can add the headerLeft on Tabs.Screen tag.

<Tabs.Screen
    name="Home"
    component={HomeScreen}
    options={{
      headerTitle: props => <LogoTitle {...props} />,
      headerLeft: () => (
        <Button
          onPress={() => alert('This is a button!')}
          title="Info"
          color="#fff"
        />
      ),
    }}
  />

and also you can add image or Button under the headerLeft Tag, for more details follow this link

answered Dec 31 '21 at 10:48

Talha Akbar

462
3
15

How to pass 'button press' event to rendered component? – Sagar Nov 16 '22 at 12:15
If you need to render this component. You need to update any state. But if you want to navigate to the other screen you just add navigation on that onPress event. – Talha Akbar Nov 16 '22 at 13:56

How to add header left on Tab.Screen using "@react-navigation/bottom-tabs"

1 Answers1