How can I add a dropdown picker to the button on the Navbar in React Native?

Issue

I can't put a dropdown menu on the button on the top bar.

I've tried everything, but I couldn't get any results.

I want to define a dropdown menu for the profile default.

I will only add language support and the log out button to the dropdown menu.

const Tabs = () => {
  const navigation = useNavigation();
  const authCtx = useContext(AuthContext);

  const Tab = createBottomTabNavigator();

  return (
    <Tab.Navigator
      headerStyle={{ backgroundColor: Colors.dark100 }}
      screenOptions={{
        tabBarShowLabel: false,
        tabBarStyle: { ...styles.container },
        headerRight: () => (
          <View
            style={{ display: "flex", flexDirection: "row", marginRight: 0 }}
          >
            <TouchableOpacity onPress={() => DropDownPicker}>
              <View
                style={{
                  marginRight: 16,
                  paddingRight: 16,
                  flexDirection: "row",
                  alignItems: "center",
                }}
              >
                <Image
                  source={require("../../assets/profile-default.jpg")}
                  style={{ width: 32, height: 32, borderRadius: 32 }}
                />
              </View>
            </TouchableOpacity>
          </View>
        ),
      }}
      style={styles.shadow}
    />
  );
};

Solution

// I've modified your code using my logic here, adjusting the path as needed.

import React, { useContext, useState } from "react";
import { View, TouchableOpacity, Image } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Picker } from "@react-native-picker/picker";
import { useNavigation } from "@react-navigation/native";
import { AuthContext } from "path-to-your-auth-context"; 
import Colors from "path-to-your-colors"; 

const Tabs = () => {
  const navigation = useNavigation();
  const authCtx = useContext(AuthContext);
  const [selectedValue, setSelectedValue] = useState(null);

  const Tab = createBottomTabNavigator();

  const renderDropdownItems = () => {
    return [
      { label: "", value: "" },
      { label: "", value: "" },
      { label: "", value: "" },
    ];
  };

  const handleDropdownChange = (value) => {
    if (value === "logout") {
      authCtx.logout();
    } else {
    }
  };

  return (
    <Tab.Navigator
      headerStyle={{ backgroundColor: Colors.dark100 }}
      screenOptions={{
        tabBarShowLabel: false,
        tabBarStyle: { ...styles.container },
        headerRight: () => (
          <View
            style={{ display: "flex", flexDirection: "row", marginRight: 0 }}
          >
            <Picker
              style={{ width: 120, height: 32, marginRight: 16 }}
              selectedValue={selectedValue}
              onValueChange={(value) => {
                setSelectedValue(value);
                handleDropdownChange(value);
              }}
            >
              {renderDropdownItems().map((item) => (
                <Picker.Item
                  key={item.value}
                  label={item.label}
                  value={item.value}
                />
              ))}
            </Picker>

            <TouchableOpacity
              onPress={() => navigation.navigate("ProfileScreen")}
            >
              <View
                style={{
                  marginRight: 16,
                  paddingRight: 16,
                  flexDirection: "row",
                  alignItems: "center",
                }}
              >
                <Image
                  source={require("../../assets/profile-default.jpg")}
                  style={{ width: 32, height: 32, borderRadius: 32 }}
                />
              </View>
            </TouchableOpacity>
          </View>
        ),
      }}
      style={styles.shadow}
    >
    </Tab.Navigator>
  );
};

export default Tabs;

Answered By - Pratik Prakash Bindage