How to render the header again in react navigation when user add something

Viewed 53

Here Let me show you the photo.

Photo

What I want to do is I want to add number as badge beside the shopping cart. But the problem is that the navigation component does not re-render even when I change the value from another component.

here the code for header navigator

const createMyStackNavigator = (name, screen, whatStack) => ({navigation}) => {
  whatStack = createStackNavigator();
  return (
    <whatStack.Navigator
      screenOptions={{
        headerStyle: {backgroundColor: `${headerColor}`},
        headerTintColor: '#fff',
      }}>
      <whatStack.Screen
        name={name}
        component={screen}
        options={{
          title: name,
          headerLeft: () => (
            <Icon2.Button
              name="navicon"
              size={25}
              backgroundColor={headerColor}
              onPress={() => {
                navigation.openDrawer();
              }}></Icon2.Button>
          ),
          headerRight: () => (
            <Icon2.Button
              name="shopping-bag"
              size={25}
              backgroundColor={headerColor}
              onPress={() => {
                navigation.openDrawer();
              }}>
              <Text style={{color: 'white'}}>{productInCart}</Text>
            </Icon2.Button>
          ),
        }}
      />
    </whatStack.Navigator>
  );
};

Here is how it creating the navigator

const DrawerNavigator = ({navigation}) => {
    const isFocused = useIsFocused();

  const cartList = useSelector((state) => state.productReducer.cartList);
    productInCart = cartList.OrderDTO?.OrderLines.length

  return (
    <Drawer.Navigator drawerContent={(props) => <DrawerContent {...props} />}>
      <Drawer.Screen
        name="ProductScreen"
        component={ProductScreenStackScreen}
      />
    </Drawer.Navigator>
  );
};

As you can see {productinCart} should be updated when its value is updated in other component.

But It's does not. Can you guys suggest some ideas? So that whenever user click certain button The header will renader again

0 Answers
Related