برای اینکار می توانید از redux یا context استفاده کنید. redux کمی پیچیده تر است، اما می توانید از هوک useContext برای پروژه های کوچکتر استفاده کنید. برای این کار، اول یک فایل (مثلا بنام UserContext.js ) بسازید و کد زیر را در آن قرار دهید:

import React, { createContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const UserContext = createContext();

const UserProvider = ({ children }) => {
  const [userData, setUserData] = useState({
    id: null,
    token: null,
  });

   useEffect(() => {

    async function fetchData() {

        const token = await AsyncStorage.getItem('token');
        const id = await AsyncStorage.getItem('user_id');
        

        const storedUserData = {
            id: id, // Example user ID
            token: token, // Example user token
          };
      
          setUserData(storedUserData);

      
      }

      fetchData();

  }, []);

  return (
    <UserContext.Provider value={userData}>
      {children}
    </UserContext.Provider>
  );
};

export { UserProvider, UserContext };

در این مثال، ما دو متغیری که از کاربر روی حافظه AsyncStorage ذخیره کرده بودیم را می خوانیم (id و token). شما می توانید هر متغیر با هر مقداری که می خواهید تعریف کنید.

function App(): JSX.Element {
 

  
  const Tab = createBottomTabNavigator();

  return (

    <UserProvider>

    <NavigationContainer>

<LoginNavigation></LoginNavigation>
 
    

    </NavigationContainer>

    </UserProvider>
  );
}


export default App;

حالا باید این UserProvider را قبل از اولین تگ برنامه مان ، یعنی اولین فایلی که برنامه از آنجا لود می شود ، قرار دهیم (می توانید فایل index.js یا App.js باشد)

بعد بصورت زیر می توانیم در همه جای پروژه (در هر کامپوننتی) از متغیرهایمان استفاده کنیم:

import { UserContext } from '../../UserContext';

onst { id, token } = useContext(UserContext);