[SOLVED] I'm trying to set up a header, included inside the layout file, that imports the online status of a user. But it is only refreshing when I navigate

I'm trying to set up a header, included inside the layout file, that imports the online status of a user. But it is only refreshing when I navigate

In my React Native Expo App Project I am using Expo Router, so there is a layout.tsx file that contains information about the tabs. Inside this file I included a header, so that the header will be displayed on all pages. This header imports an array with information about the user, such as the online status and displays the user name and a online or offline symbol. However the header is only refreshing when I navigate to another page, and I do understand why. But how can I solve this problem?

const TabLayout = () => {
  return (
    <>
<Header/>
    <Tabs
...
<Tabs.Screen/>
<Tabs.Screen/>
...
    </Tabs>
    </>
  );
}

This is the Header:

import { user } from '../(tabs)/five'
// user[]: online; loginVis, registerVis, userVis, colorIcon, onlineDesc 

export default function Header(){

  return (
    <View>
...
        <Text style={styles.textOnline}>{user[5]}</Text>
        <View style={styles.online2}>
          <View style={{backgroundColor: user[4]}}/>
        </View>
    </View>
...
  );
}

Solution

So the problem you are facing is that the header component does not re-render when the status of the user changes.

This is normal and you should wrap your App with a Context Provider. Here you can find a brief explanation for that.

Hope this helps!