Actualmente estoy tratando de crear un encabezado para mi aplicación que tiene elementos y estos elementos deben aparecer con un estilo activo cuando el usuario está en la pantalla correspondiente al elemento.

Actualmente, mi encabezado se divide en dos componentes: un componente para el elemento del encabezado (HeaderItem) y otro para el encabezado (Header) en sí.

Cuando hago clic en el elemento, puede configurar su estilo como activo y llevará al usuario a otra pantalla, por lo que funciona como se esperaba. Pero si navego a una pantalla a través de otro botón que no es un HeaderItem, no puedo cambiar su estilo. Esperaba que cuando cambie la pantalla (incluso a través de otro botón) y mi HeaderItem se renderice nuevamente, verificaría si debería tener otro estilo, pero parece que no funciona

Esta es mi primera aplicación, así que podría estar haciendo algo mal.

Abajo están los componentes a los que me referí anteriormente.

 // 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;

¡Gracias por adelantado!