drop down menu - How to set options of the header in react-navigation (class component)?

Question

I am having trouble with adding an element in header of Home page. I can currently add a button but thats in function home_customers_bar which is just a function that returns several screens. I want the element to be set in one of those screens which in my case is home_customers.js. In home_customers.js I am fetching some data that I would like to add to that element that I want to add in the header (dropdown menu).

I have my navigation container in a separate file.

navigation.js below:

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="home_customers" component={home_customers} options={{ headerShown: false }} />
    <Stack.Screen name="home_customers_bar" component={home_customers_bar} />
  </Stack.Navigator>
</NavigationContainer>

then I have home_customers_bar where I return four screens, below I am only showing one for brevity

home_customers_bar.js file below:

import home_customers from './home_customers';

export default function home_customers_bar({ route, navigation }) {
const current_city_ = route.params.current_user_city_;
navigation.setOptions({
headerRight: () => (
<Button title="Update count" />
        ),
    });
return (
    <Tab.Navigator initialRouteName="Home" barStyle={{ backgroundColor: 'grey' }} screenOptions=
    {({ route, navigation }) => ({tabBarIcon: ({ focused, color, size }) => {
      if (route.name === 'Home') {
        return <Image style={{ width: 22, height: 22 }} source=    
         {require('../../../icons/home_icon.png')}></Image>;
      }
     },
    })} >
     <Tab.Screen name="Home" initialParams={{ current_city_: current_city_ }} component= home_customers} />
   </Tab.Navigator>
    );
}

As you see I am using setOptions in home_customers_bar and it displays the button properly but in my case, I would like to display a dropdown menu and populate it with dynamic data which I fetch in home_customers screen. So, I cant populate it while it is in home_customers_bar function.

question from:https://stackoverflow.com/questions/65872785/how-to-set-options-of-the-header-in-react-navigation-class-component

Answer 1

Waitting for answers