How to add button on header in nested stack navigation in react native

Question

I am trying to add a button on right side of a header in one of the stack navigation in my app but the problem is its not working.

Here is my code. I don't know why this is not working

App.tsx

<AppStack.Screen
            options={{
              headerShown: false,
            }}
            name="MyProfile"
            component={TabNavigation}
          />
    
          <AppStack.Screen
      
            name="CommunityStack"
            component={CommunityStack}
          />

CommunityHub.tsx

const CommunityStack = () => {
  return (
    <Stack.Navigator screenOptions={({ navigation }) => ({
        title: "Community Hub",
        headerRight: () => {
          return (
            <Box marginHorizontal="s">
              <RoundedBorderButton
                label="For Members"
                onPress={() => navigation.navigate("Register")}
              />
            </Box>
          );
        },
      })}>
      <Stack.Screen name="CommunityHub" component={CommunityHub} />
      <Stack.Screen name="KarawarDetail" component={KarawarDetail} />
      <Stack.Screen name="CommunityMember" component={CommunityMember} />
    </Stack.Navigator>
  );
};

Answer 1

Try below way to achieve it

<Stack.Navigator>

  <Stack.Screen 
    name="Screen1" 
    component={Screen1}
    options={{ headerShown: false }} />

  <Stack.Screen 
    name="Screen2" 
    component={Screen2}
    options={{
     headerRight: () => (
     <View>
      <Text>RIGHT</Text>
     </View>
    ),
   }} />

 <Stack.Screen 
    name="Screen3" 
    component={Screen3}
    options={{ headerShown: false }} />

</Stack.Navigator>