I am currently trying to make a header for my app which has items and these items need to appear with an active style when the user is in the screen corresponding to the item.

Currently, my header is devided in two components: one component for the item in the header (HeaderItem) and another for the header (Header) itself

When I click the item, it can set its style to active and it will navigate the user to another screen, so it's working as expected. But if I navigate to a screen through another button that is not a HeaderItem I cannot make its style change. I was expecting that when I change the screen (even through another button) and my HeaderItem renders again it would check if it should have another style, but it doesn't seem to work

This is my first app, so I might be getting something wrong.

Bellow are the components I referred above

// Basic
import React from 'react';
import {Image, View} from 'react-native';
import {RectButton} from 'react-native-gesture-handler';
import {useNavigation} from '@react-navigation/core';
import {useRoute} from '@react-navigation/native';

// Assets
import styles from '../HeaderItem/styles';

const HeaderItem = ({image, screen}) => {
  const route = useRoute();
  const navigation = useNavigation();
  let is_active = route.name === screen ? true : false;

  function goToScreen() {
    navigation.navigate(screen);
  }

  return (
    <RectButton
      style={is_active ? styles.menu_item__active : styles.menu_item}
      onPress={goToScreen}>
      <Image source={image} style={styles.image} />
      {is_active && <View style={styles.pseudo_border} />}
    </RectButton>
  );
};

export default HeaderItem;

// Basic
import React from 'react';
import {View} from 'react-native';

// Assets
import styles from '../Header/styles';
import images from '../../config/images';

// Components
import HeaderItem from '../HeaderItem';

const Header = () => {
  return (
    <View style={styles.wrapper}>
      <HeaderItem image={images.content} screen="Content" />
      <HeaderItem image={images.dentist} screen="Login" />
      <HeaderItem image={images.safety} screen="HealthPlan" />
      <HeaderItem image={images.calendar} screen="Content" />
      <HeaderItem image={images.medium_logo} screen="Map" />
    </View>
  );
};

export default Header;

Thanks in advance!