search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.62k stars 5.05k forks source link

How to programmatically set text in headerSearchBarOptions? #12168

Open Meetcpatel opened 2 months ago

Meetcpatel commented 2 months ago

Current behavior

Currently, I'm using the headerSearchBarOptions to create a search bar in the header of my screen:

import { useNavigation } from '@react-navigation/native';
const MyScreen = () => {
const navigation = useNavigation();
React.useLayoutEffect(() => {
navigation.setOptions({
headerSearchBarOptions: {
onChangeText: (event) => console.log(event.nativeEvent.text),
},
});
}, [navigation]);
};

This successfully creates a search bar in the header. However, there doesn't seem to be a way to programmatically set or update the text in this search bar after it's been created.

For example, if I want to set the search text to "example" when a button is pressed, I don't have a clear way to do this:

const handleButtonPress = () => {
// There's no obvious method to do this:
// navigation.setSearchBarText('example');
};

Expected behavior

I expect to be able to programmatically set or update the text in the search bar after it has been created. Ideally, there would be a method or option that allows me to do something like this:

// Option 1: A method on the navigation object
navigation.setSearchBarText('New search text');
// Option 2: An updateable option in headerSearchBarOptions
navigation.setOptions({
headerSearchBarOptions: {
text: 'New search text',
// other options...
},
});

This would allow me to:

  1. Pre-fill the search bar with text based on user actions or app state.
  2. Implement features like "recent searches" where tapping a recent search would fill the search bar.
  3. Restore the search state when navigating back to a screen.

Reproduction

https://snack.expo.dev/@span.gurusoft/headersearchbaroptions

Platform

Packages

Environment

package version
@react-navigation/native ^6.0.2
react-native-safe-area-context 4.10.5
react-native-screens 3.31.1
react-native-paper 4.9.2
@expo/vector-icons ^14.0.3
github-actions[bot] commented 2 months ago

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

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

github-actions[bot] commented 2 months ago

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

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

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

github-actions[bot] commented 2 months ago

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

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

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

github-actions[bot] commented 2 months ago

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

Meetcpatel commented 2 months ago

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

* `@react-navigation/native` (found: `6.0.2`, latest: `6.1.18`)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

No, still same

Rezrazi commented 1 month ago

Facing a similar situation.

Using a ref doesn't seem to work, as ref is always null.

  const ref = useRef<any>(null);

  useEffect(() => {
    console.log(ref.current); // > null

    ref.current.setText('hello world');
  }, []);

          headerSearchBarOptions: {
            placeholder: "Search...",
            placement: "stacked",
            hideWhenScrolling: false,
            ref,
          },