Cannot use state inside of header

[tamis-laan]

Current behavior

I'm adding a search bar into the components header. The search bar uses the search state and changes the search term onChangeText:

const [search, setSearch] = useState('')
useEffect(()=>{
          navigation?.setOptions({
	          header:() => (
			          <SearchBar 
				          placeholder='search'
				          value={search}
				          onChangeText={text => {
					          setSearch(text)
				          }}
			          />
                                )
          })
},[])

Expected behavior

I would expect setSearch to work and change the value of search when onChangeText is triggered.

However this is not the case the search text stays the same.

Reproduction

https://snack.expo.dev/hfFh3wP-J

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view
react-native-pager-view
react-native
expo
node
npm or yarn

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/native
• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[raajnadar]

You forgot to add search as dependency of use effect to cause re render it.

[tamis-laan]

You forgot to add search as dependency of use effect to cause re render it.

This doesn't work properly as old text duplicates tend to pop up when typing in the search bar.

Also I would not see this as a clean solution, given that useEffect sets the header function once. The component should update based on state changes.

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[raajnadar]

You should read the docs first,

https://reactnative.dev/docs/textinput#onchange

https://reactnative.dev/docs/textinput#onchangetext

This is the only way to update a screen with state change or ref. Dependencies are use to re invoke the useEffect, that is how react hooks work. This is not the place to ask question this section is to track bugs in react navigation library.