React Bottom Tab Navigation - Change the title in the screen without changing the title in the tab-CodePudding

I can change the Header Title dynamically but that changes the title in the tab as well. How can I change the title on the screen without affecting the title in the tab?

This is my navigator -

<Tab.Screen
        name="Lists"
        component={Lists}
        options={{
          title: "Lists",
          headerShown: true,
          headerLeft: () => (
            <Pressable
              style={{ paddingLeft: 16 }}
              onPressIn={() => console.log("Filter")}
              hitslop={5}
            >
              <Ionicons name="filter" size={28} color={"#faf2c4"} />
            </Pressable>
          ),
          headerRight: () => (
            <Pressable
              style={{ paddingRight: 16 }}
              onPressIn={() => console.log("Search")}
              hitslop={5}
            >
              <Ionicons name="search" size={28} color={"#faf2c4"} />
            </Pressable>
          ),
          headerStyle: {
            backgroundColor: "#0292b7",
            shadowColor: "#000",
            shadowOffset: {
              width: 0,
              height: 2,
            },
            shadowOpacity: 0.25,
            shadowRadius: 3.84,

            elevation: 5,
          },
          headerTitleStyle: {
            color: "#faf2c4",
            fontFamily: "Quicksand_600SemiBold",
          },
          headerTitleAlign: "center",
        }}
      />

This is how I dynamically change the Title in the screen component -

  const [Title, setTitle] = useState("noLists");

useEffect(() => {
    navigation.setOptions({ title: Title });
  }, []);

CodePudding user response：

Use tabBarLabel in options:

<Tab.Screen
        name="Lists"
        component={Lists}
        options={{
          tabBarLabel:"Lists",
          title: "Lists",
          headerShown: true,
          headerLeft: () => (
            <Pressable
              style={{ paddingLeft: 16 }}
              onPressIn={() => console.log("Filter")}
              hitslop={5}
            >
              <Ionicons name="filter" size={28} color={"#faf2c4"} />
            </Pressable>
          ),
          headerRight: () => (
            <Pressable
              style={{ paddingRight: 16 }}
              onPressIn={() => console.log("Search")}
              hitslop={5}
            >
              <Ionicons name="search" size={28} color={"#faf2c4"} />
            </Pressable>
          ),
          headerStyle: {
            backgroundColor: "#0292b7",
            shadowColor: "#000",
            shadowOffset: {
              width: 0,
              height: 2,
            },
            shadowOpacity: 0.25,
            shadowRadius: 3.84,

            elevation: 5,
          },
          headerTitleStyle: {
            color: "#faf2c4",
            fontFamily: "Quicksand_600SemiBold",
          },
          headerTitleAlign: "center",
        }}
      />