How to load firestore doc in stack navigator

How to / Third Party Tooling
1

I have created an app for membership. There are 3 screens Home, Card, Account. All of the screens should have access from the profile read from the firestore.

I was thinking to read the profile in the HomeStack so I read it once and pass it to the 3 screens. Below is my code,

`
export default function HomeStack() {

const { user } = useContext(AuthenticatedUserContext);

const [profile, setProfile] = useState(UserProfileContext);

useEffect(() => {

    const fetchData = async () => {

        try {

            const response = await fs.collection("glx-members").doc(user.uid).get();

            console.log('response', response);

            if (response.exists) {

                setProfile(response.data());

            }

        } catch (err) {

            console.error(err);

        }

    };

    fetchData();

}, []);

return (

    <Navigator tabBar={props => <BottomTabBar {...props} />}>

        <Screen name='GALAXY PETSHOP' component={HomeScreen} alignment='center' />

        <Screen name='Card' component={CardScreen} />

        <Screen name='Account' component={AccountScreen} />

    </Navigator>

);

}
`

Is that the correct approach? I don’t know how to pass to each Screen. Or is there any common practice I can follow?