How can I share state between header and screen in react navigation?

Question

I built a custom header for a screen in Drawer navigator because I need to add an Input on the Header, I need to access the value of the Input inside the screen but also the setState function because inside the screen it is possible to clear the input value

I tried wrapping my screen with context and access the context in the header to change the values but it didn't work.

const MyScreenContext = createContext(null);

Const MyScreenProvider = ({children})=>{
  const [state,setState] = useState("");
 return <MyScreenContext.Provider value={{state,setState}}>{children}</MyScreenContext.Provider>
}

const MyScreenHeader = ()=>{
 const context = useContext(MyScreenContext);
 // context here is null
}

const MyScreen = ()=>{
 

  return (
    <MyScreenProvider>
     ...
    </MyScreenProvider>
   )
};

And then I am adding them to the Drawer.Screen like this:

 <Drawer.Screen
        name={"MyScreen"}
        component={MyScreen}
        options={{
          header: MyScreenHeader,
        }}
  />

Can you share minimum reproducible example?

Fiston Emmanuel
– Fiston Emmanuel

2023-12-21 22:33:44 +00:00
Commented Dec 21, 2023 at 22:33 — Fiston Emmanuel
– Fiston Emmanuel, Commented Dec 21, 2023 at 22:33

user18309290 · Accepted Answer · 2023-12-22 11:55:38Z

0

Wrap navigation container into a context provider. Only components inside can access a context. Something like this:

<MyScreenProvider>
  <NavigationContainer>
    <Drawer.Navigator>
      <Drawer.Screen
...
        options={{
          header: MyScreenHeader,
        }}
      />
    </Drawer.Navigator>
  </NavigationContainer>
</MyScreenProvider>

See SomeContext.Provider for details.

answered Dec 22, 2023 at 11:55

user18309290

8,5003 gold badges9 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Endrit Shabani Over a year ago

I am surprised how react navigation doesn't have a built in solution for this

Suman Saurabh · Accepted Answer · 2024-01-10 12:03:54Z

-1

You can use navigation.setOptions. https://reactnavigation.org/docs/header-buttons#header-interaction-with-its-screen-component

answered Jan 10, 2024 at 12:03

Suman Saurabh

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How can I share state between header and screen in react navigation?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related