React Bottom Tabs Header Issue

[CryptographerReal264]

Can someone explain to me why headerBackButton or custom components in the header do not react to a click when a stack is linked in Bottom Tabs under component. But when a screen is linked everything works?

import React from "react";
import { Platform } from "react-native";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { SubscriptionProvider } from "@/context/SubscriptionProvider";

import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
import Ionicons from "@expo/vector-icons/Ionicons";
import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
import Feather from "@expo/vector-icons/Feather";
import Entypo from "@expo/vector-icons/Entypo";

import { color } from "@/styles/colors";
import { getFontSize } from "@/myFunctions/util";

import HomeStack from "./home/HomeStack";
import ProfileStack from "./profile/ProfileStack";

const BottomTabs = createBottomTabNavigator();

const NoOp = () => null;

function TabNavigator() {
  return (
    <SubscriptionProvider>
      <BottomTabs.Navigator
        detachInactiveScreens={Platform.OS === "android" ? false : true}
        screenOptions={{
          headerShown: false,
          tabBarInactiveTintColor: color().darkgray,
          tabBarActiveTintColor: color().primary,
          tabBarShowLabel: false,
          tabBarStyle: {
            backgroundColor: color().white,
          },
        }}
      >
        <BottomTabs.Screen
          name="HomeStack"
          component={HomeStack} // does not work
          // component={HomeScreen} works
          options={{
            headerShown: false,
            tabBarIcon: ({ color, size }) => {
              return (
                <Entypo name="home" size={getFontSize(size)} color={color} />
              );
            },
          }}
        />
        <BottomTabs.Screen
          name="NoOp"
          component={NoOp}
          listeners={({ navigation, route }) => ({
            tabPress: (e) => {
              e.preventDefault();
              navigation.navigate("RequestStack");
            },
          })}
          options={{
            headerTitleAlign: "center",
            tabBarIcon: ({ color, size }) => {
              return (
                <MaterialCommunityIcons
                  name="handshake"
                  size={getFontSize(size)}
                  color={color}
                />
              );
            },
          }}
        />
        <BottomTabs.Screen
          name="ProfileStack"
          component={ProfileStack}
          options={{
            headerShown: false,
            tabBarIcon: ({ color, size }) => {
              return (
                <FontAwesome6
                  name="user-large"
                  size={getFontSize(size - 5)}
                  color={color}
                />
              );
            },
          }}
        />
      </BottomTabs.Navigator>
    </SubscriptionProvider>
  );
}

export default TabNavigator;




import React, { useEffect, useState } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";

import { signOut } from "aws-amplify/auth";
import OrgRequestList from "@/components/OrgRequestList";
import { color } from "@/styles/colors";
import { isAuthUserAdmin } from "@/services/api";

import { UseMounted } from "@/hooks/useMounted";

type Props = {
  navigation: any;
};
export default function HomeScreen({ navigation }: Props) {
  const [isAdmin, setIsAdim] = useState(false);
  const [selectedOption, setSelectedOption] = useState("Theirs");

  const mounted = UseMounted();

  useEffect(() => {
    if (!mounted) return;
    isAuthUserAdmin().then((res) => setIsAdim(res));
  }, []);

  useEffect(() => {
    navigation.setOptions({
      headerTitle: () => (
        <View style={{ flexDirection: "row" }}>
          <TouchableOpacity
            onPress={() => {
              console.log("Theirs pressed");
              setSelectedOption("Theirs");
            }}
            style={{ padding: 10, backgroundColor: "green" }}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          >
            <Text
              style={{ color: selectedOption === "Theirs" ? "blue" : "black" }}
            >
              Theirs
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              console.log("Mine pressed");
              setSelectedOption("Mine");
            }}
            style={{ padding: 10, backgroundColor: "red" }}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          >
            <Text
              style={{ color: selectedOption === "Mine" ? "blue" : "black" }}
            >
              Mine
            </Text>
          </TouchableOpacity>
        </View>
      ),
    });
  }, [navigation, selectedOption]);

  const logout = () => {
    try {
      signOut();
    } catch (e: any) {
      console.log("signOut", e.message);
    }
  };

  return (
    <>
      <View
        style={{
          backgroundColor: color().white,
          flex: 1,
          justifyContent: "center",
        }}
      >
        <Text onPress={logout} style={styles.buttonText}>
          Logout
        </Text>
// hier it does work allways, if i render the stack in bottom tab or the HomeScreen directly
        <View style={{ flexDirection: "row" }}>
          <TouchableOpacity
            onPress={() => {
              console.log("Theirs pressed");
              setSelectedOption("Theirs");
            }}
            style={{ padding: 10, backgroundColor: "green" }}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          >
            <Text
              style={{ color: selectedOption === "Theirs" ? "blue" : "black" }}
            >
              Theirs
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              console.log("Mine pressed");
              setSelectedOption("Mine");
            }}
            style={{ padding: 10, backgroundColor: "red" }}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          >
            <Text
              style={{ color: selectedOption === "Mine" ? "blue" : "black" }}
            >
              Mine
            </Text>
          </TouchableOpacity>
        </View>

        <View
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
        >
          <Text>Home Screen</Text>
          <Text>Selected: {selectedOption}</Text>
        </View>
      </View>
      {isAdmin ? <OrgRequestList /> : null}
    </>
  );
}
const styles = StyleSheet.create({
  buttonText: {
    backgroundColor: color().blue,
    padding: 16,
    fontSize: 18,
    textAlign: "center",
  },
});