How to pass Value from one screen to other one in React Native?

Question

I want to give the value of the user var from AuthNavigator to my Ingredients Screen. The Auth Navigator looks like this:

import React, { useState, useEffect, createContext } from "react";
import firebase from "./firebase";
import AppStack from "./stacks/AppStack";
import AuthStack from "./stacks/AuthStack";


export const AuthContext = createContext(null);


export default function AuthNavigator() {
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState(true);

  // Handle user state changes
  async function onAuthStateChanged(result) {
  setUser(result);
  if (initializing) setInitializing(false);
  var userDoc = await firebase.firestore().doc("users/" + user.uid).get();
  if (!userDoc.exists) {
    await userDoc.ref.set({
      email: user.email
  })
 }
}

useEffect(() => {
  const authSubscriber = firebase
  .auth()
  .onAuthStateChanged(onAuthStateChanged);
  // unsubscribe on unmount
  return authSubscriber;
}, []);

if (initializing) {
  return null;
}

return user ? (
  <AuthContext.Provider value={user}>
    <AppStack />
  </AuthContext.Provider>
) : (
    <AuthStack />
);
}

And my AppStack looks like this and insite of it there is my Ingredientsscreen as a stack navigator

import React, { lazy } from "react";
import News from "../screens/News";
import Favorites from "../screens/Favorites";
import NewRecipe from "../screens/NewRecipe";
import Ingredients from "../screens/Ingredients";
import Profile from "../screens/Profile";
import { NavigationContainer, DarkTheme } from "@react-navigation/native";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialIcons } from "@expo/vector-icons";
import { createStackNavigator } from "@react-navigation/stack";
import { createContext } from "reactn";
import AuthNavigator, { AuthContext } from "../AuthNavigator";

export default function AppScreen() {
  const Tab = createBottomTabNavigator();
  const NewsStack = createStackNavigator();
  const FavoritesStack = createStackNavigator();
  const NewRecipeStack = createStackNavigator();
  const IngredientsStack = createStackNavigator();
  const ProfileStack = createStackNavigator();
  const AppContext = createContext(null);

  const user = AuthNavigator.user;


  function NewsNav() {
    return (
      <NewsStack.Navigator>
        <NewsStack.Screen
          name="News"
          component={News}
          options={{
            headerTintColor: "#AD1457",
            headerStyle: {
              backgroundColor: "#171717",
              height: 75,
            },
            headerTitleStyle: {
              marginTop: -15,
            },
          }}
        />
      </NewsStack.Navigator>
    );
  }

  function FavoritesNav() {
    return (
      <FavoritesStack.Navigator>
        <FavoritesStack.Screen
          name="Favoriten"
          component={Favorites}
          options={{
            headerTintColor: "#AD1457",
            headerStyle: {
              backgroundColor: "#171717",
              height: 75,
            },
            headerTitleStyle: {
              marginTop: -15,
            },
          }}
        />
      </FavoritesStack.Navigator>
    );
  }

  function NewRecipeNav() {
    return (
      <NewRecipeStack.Navigator mode="card">
        <NewRecipeStack.Screen
          name="Neue Rezepte"
          component={NewRecipe}
          options={{
            headerTintColor: "#AD1457",
            headerStyle: {
              backgroundColor: "#171717",
              height: 75,
            },
            headerTitleStyle: {
          marginTop: -15,
        },
      }}
    />
  </NewRecipeStack.Navigator>
);
  }

  function IngredientsNav() {
    return (
      <IngredientsStack.Navigator>
        <IngredientsStack.Screen
          name="Zutaten"
          component={Ingredients}
          options={{
            headerTintColor: "#AD1457",
            headerStyle: {
              backgroundColor: "#171717",
              height: 75,
            },
            headerTitleStyle: {
              marginTop: -15,
            },
          }}
        />
      </IngredientsStack.Navigator>
    );
  }

  function ProfileNav() {
    return (
      <ProfileStack.Navigator >
        <ProfileStack.Screen
          name="Profil"
          component={Profile}
          options={{
            headerTintColor: "#AD1457",
            headerStyle: {
              backgroundColor: "#171717",
              height: 75,
            },
            headerTitleStyle: {
              marginTop: -15,
            },
          }}
        />
      </ProfileStack.Navigator >
    );
  }
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          style: {
            backgroundColor: '#171717',
            borderTopColor: '#121212'
          },
          inactiveTintColor: '#fff',
          activeTintColor: '#AD1457',
        }}
        initialRouteName="News"
        screenOptions={({ route }) => ({
          tabBarIcon: ({ color }) => {
            let iconName;

            if (route.name == "News") {
              iconName = "language";
            } else if (route.name == "Favoriten") {
              iconName = "star-border";
            } else if (route.name == "Hinzufügen") {
              iconName = "add-circle-outline";
            } else if (route.name == "Zutaten") {
              iconName = "shopping-cart";
            } else if (route.name == "Profil") {
              iconName = "person";
            }
            return (
              <MaterialIcons
                name={iconName}
                color={color}
                size={25}
              ></MaterialIcons>
            );
          },
        })}
      >
        <Tab.Screen name="News" component={NewsNav} />
        <Tab.Screen name="Favoriten" component={FavoritesNav} />
        <Tab.Screen name="Hinzufügen" component={NewRecipeNav} />
        <Tab.Screen name="Zutaten" component={IngredientsNav} />
        <Tab.Screen name="Profil" component={ProfileNav} />
      </Tab.Navigator>
    </NavigationContainer >
  );
}

Inside off the Ingredientsscreen i want to use the ID from the user to set data into firebase

Answer 1

I think you can use an InitialParams to pass your userId to your screen:

function IngredientsNav() {
  return (
    <IngredientsStack.Navigator>
      <IngredientsStack.Screen
        name="Zutaten"
        component={Ingredients}
        initialParams={{ userId: 42 }}
        options={{
          headerTintColor: "#AD1457",
          headerStyle: {
            backgroundColor: "#171717",
            height: 75,
          },
          headerTitleStyle: {
            marginTop: -15,
          },
        }}
      />
    </IngredientsStack.Navigator>
  );
}