React.Context returning undefined in React Native project

Hi - I submitted this same question in Stack Overflow so apologies to those that are seeing this twice. But the post did not get any traction there and I am just as stuck with the problem now as I was then.

This is the post copied/pasted here:

I have a React Native app which has 3 screens: parent , child-1 , child-2 . The parent screen has direct links to 2 screens: child-1 , child-2 . Child-1 screen has the code that fills in the state for a Variable X . Then Child-2 screen displays the values from Variable X .

So obviously I am running into a problem where if the user loads the app and goes straight from Parent to Child-2 , the app crashes because Variable X is empty (and actually does not even exist). I have tried two ways to fix this:

  1. React Context API; but this results in undefined Variable X no matter what route the user takes. Github code. ( Parent screen = WelcomeScreen.js , Child-1 = BuildPantry.js , Child-2 = ResultingRecipes.js )

This is the important code:

From WelcomeScreen.js :

    function WelcomeScreen(props) {
             const data = useContext(WinRecipeContext);
             console.log(data); //This returns undefined
             //more stuff


From BuildPantry.js :

import WinRecipeContext from "./../context/winRecipeContext";

function BuildPantry(props) {

//a bunch of code that build the variables I need based on user choice

return (
    <WinRecipeContext.Provider value={"Placeholder: replace with actual data"}>

//more React components to display


From winRecipeContext.js :

import React from "react";

const WinRecipeContext = React.createContext();
WinRecipeContext.displayName = "WinRecipeContext";

export default WinRecipeContext;
  1. I also tried to initialize a separate variable set in Parent that is fed by a callback function from Child-1 . But can I even do that?? I.e. load data in Parent from Child-1 component. Would I use a hook ( useEffect ) to load the data in as soon as Parent loads into view…?? Code for this is only on local drive but happy to upload if this is more promising…??


Hello there,

Why do you give the option of going from parent to child-2, if child-2 relies on options being chosen in child-1. This sounds like poor UX, as surely you would want the user to follow a flow of:

  1. Lands on parent, is directed to click on nav to child-1
  2. Lands on child-1, is directed to select options, clicks submit
  3. Lands on child-2, where data is displayed

Forgive me, if I am completely misunderstanding what your app is going for…

Hi @Sky020 - perfectly fair question.

Maybe I was getting ahead of myself but what I wanted was: a user creates a list (based on decisions made in Child-1) and that list gets saved and is viewable until they decide to make other decisions (again in Child-1). So I would want user to be able to jump straight to the list (in Child-2) whenever they want, even from Parent after they just launch app.

I don’t have any back-end so without creating user accounts, I was hoping to send an empty variable from Parent.

But maybe what I need to do is remove button in Parent (to Child-2) until I have built the back-end that allows me to save list for user and then load it up with initial app load…?

What is it you want to happen when there is no data, just to show an empty component with the two buttons? You can provide some defaults and map/use item conditionally.

Or use optional chaining.

const item = props.route.params?.item;

item? of code)

props.navigation.navigate('Pantry', item?.objOfCheckboxes)

Well, if the data you want on child-2 is user-filled, there is no way around it. @lasjorg has brought up a good idea, if you still want the same functionality - provide some default data to load, if none is passed along.