Search bar not rendering on iOS or Android on initial render

[homit-dalia]

Current behavior

In the initial render of the search bar through headerSearchBarOptions, it will not render. I have 4 bottom tabs and each has its own stack navigator. Search Icon does not render on initial load but would load after I switch to another tab and then current tab.

Expected behavior

The search icon should render on the first render of the screen

Reproduction

https://github.com/react-navigation/react-navigation/issues/10848

Platform

• [X] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Packages

• [X] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [ ] @react-navigation/material-top-tabs
• [ ] @react-navigation/stack
• [X] @react-navigation/native-stack
• [ ] react-native-tab-view

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-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
node
npm or yarn

[github-actions[bot]]

Hey @homit-dalia! Thanks for opening the issue. It seems that the issue doesn't contain a link to a repro.

The best way to get attention to your issue is to provide an easy way for a developer to reproduce the issue.

You can provide a repro using any of the following:

• Expo Snack
• TypeScript Playground
• GitHub repo under your username

A snack link is preferred since it's the easiest way to both create and share a repro. If it's not possible to create a repro using a snack, link to a GitHub repo under your username is a good alternative. Don't link to a branch or specific file etc. as it won't be detected.

Try to keep the repro as small as possible by narrowing down the minimal amount of code needed to reproduce the issue. Don't link to your entire project or a project containing code unrelated to the issue. See "How to create a Minimal, Reproducible Example" for more information.

You can edit your original issue to include a link to the repro, or leave it as a comment. The issue will be closed automatically after a while if you don't provide a repro.

[github-actions[bot]]

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-top-tabs
• @react-navigation/stack
• react-native-tab-view

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

[Acetyld]

Any update on this?

[homit-dalia]

@Acetyld I initially set headerSearchBarOptions to true as the documentation stated that you should render atleast the UI elements in stack screens if you will update it on screen mount through .setOptions in useEffect (functional components). That was the problem. I removed headerSearchBarOptions in stack screen entirely and and now declaring it directly through .setOptions. I don't know if this is expected or headerSearchBarOptions : true is for a different context.

[github-actions[bot]]

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

• @react-navigation/native
• @react-navigation/bottom-tabs
• react-native-tab-view
• @react-navigation/drawer
• @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.

[Robert27]

Any updates or workarounds? :/ Using setOptions does not work on Android. iOS works fine without any hacks.

[homit-dalia]

Any update on this?

I’m sorry @Robert27, but it fixed it for me after I removed headerSearchBarOptions: true in declaration and rebuilt the app.

However, it could also be an issue with if you are rendering other icons in headerRight. Try playing around the placement of those icons and see if it works.

[JcbPrn]

Still not working for me with the latest versions. What about you guys?

[nandorojo]

Hey guys, I think I fixed it by setting hideWhenScrolling: false:

  const navigation = useNavigation<Screen>()
  useLayoutEffect(() => {
    navigation.setOptions({
      headerSearchBarOptions: {
        placeholder: 'Search...',
        onCancelButtonPress: actions.stopSearching,
        onFocus: actions.startSearching,
        onChangeText: (e) => actions.onChangeText(e.nativeEvent.text),
        hideWhenScrolling: false,
      },
    })
  }, [actions, navigation])

Let me know if this fixes it for you.

Be sure to also have your scrollable component as the root node of your screen (not wrapped in a View), and to set contentInsetAdjustmentBehavior='automatic'. It also broke if I used refreshControl.

[vbornand]

@nandorojo I have still the issue on Android, but works on ios.

[WhidRubeld]

I have this problem on Android only. Adding the hideWhenScrolling: false property does not solve the problem

    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.2.5",
    "@react-navigation/stack": "^6.0.11",

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[ysnbyzli]

I have this problem on Android only. Adding the hideWhenScrolling: false property does not solve the problem

    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.2.5",
    "@react-navigation/stack": "^6.0.11",

Hi, I have the same problem. Did you solve the problem? 🙏🏻

[WhidRubeld]

I have this problem on Android only. Adding the hideWhenScrolling: false property does not solve the problem

    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.2.5",
    "@react-navigation/stack": "^6.0.11",

Hi, I have the same problem. Did you solve the problem? 🙏🏻

No, I haven't found a way around this problem. So I temporarily worked around a search modal for Android...

[vbornand]

With expo-router 3.4.1 using: @react-navigation/native: 6.1.9 @react-navigation/native-stack: 6.9.17

The issue is resolved

[sidorchukandrew]

It turns out there was an issue with react-native-screens here. Updating to 3.26.0 fixed it for me.

[ysnbyzli]

It turns out there was an issue with react-native-screens here. Updating to 3.26.0 fixed it for me.

@sidorchukandrew Hi 👋🏻, I using react-native-navigation on my expo project. When use headerSearchBarOptions not showing search icon on screen header. As you said, when I change the react-native-screens version to 3.26.0, the application stays in the splash screen, which means it crashes. So I'm using the latest version but again the search function still doesn't work.

Thank you for your interest 🙏🏻

"dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@reduxjs/toolkit": "^2.0.1",
    "@shopify/flash-list": "1.4.3",
    "expo": "~49.0.15",
    "expo-font": "~11.4.0",
    "expo-splash-screen": "~0.20.5",
    "expo-sqlite": "~11.3.3",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "^3.29.0",
    "react-redux": "^9.0.4"
  }

useLayoutEffect(() => {
    navigation.setOptions({
      headerLargeTitle: true,
      headerSearchBarOptions: {
        inputType: "text",
        cancelButtonText: "İptal",
        tintColor: colors.primary,
        placeholder: "Ürün ara",
        onChangeText: (event) => {
          setSearch(event.nativeEvent.text);
        },
        onFocus: () => {
          setIsSearchFocused(true);
        },
        onBlur: () => {
          setIsSearchFocused(false);
        },
        hideWhenScrolling: false
      }
    });
  }, [navigation, colors]);

[Robert27]

With expo-router 3.4.1 using: @react-navigation/native: 6.1.9 @react-navigation/native-stack: 6.9.17

The issue is resolved

For me it’s not, I have the same versions. While Android is fixed, it started to appear on iOS. Now search bar is not rendered on initial render somehow.

[WhidRubeld]

With expo-router 3.4.1 using: @react-navigation/native: 6.1.9 @react-navigation/native-stack: 6.9.17

The issue is resolved

I doubt this is true. Because the problem lies in the native layer. Expo system relies on stable versions of libraries (mainly major outputs) from version to version of Expo SDK. Therefore, I think that it is worth waiting for the update along with the Expo SDK update to version 50. There will most likely already be support for React Navigation 7.

For now, I see as an alternative option to write a plugin for Expo, which will improve the work of the package.

[vbornand]

Therefore, I think that it is worth waiting for the update along with the Expo SDK update to version 50

It is resolved with Expo 50 still in preview but should be released in a couple of weeks. As mentioned above the bug is in another library.

[Robert27]

No it’s definitely not resolved in expo sdk 50 using the latest versions of the libs. We have a stack view with searchbar inside my tab bar and it is not rendering on the initial render on iOS. Without being nested in a tab bar it works fine. But I agree with you that the bug is in another library.

[WhidRubeld]

Therefore, I think that it is worth waiting for the update along with the Expo SDK update to version 50

It is resolved with Expo 50 still in preview but should be released in a couple of weeks. As mentioned above the bug is in another library.

Is there a link to MR in react-native-screens to make sure that Expo 50 will merge the solution to the problem?

[WhidRubeld]

https://github.com/software-mansion/react-native-screens/pull/1883

[Robert27]

No it’s definitely not resolved in expo sdk 50 using the latest versions of the libs. We have a stack view with searchbar inside my tab bar and it is not rendering on the initial render on iOS. Without being nested in a tab bar it works fine. But I agree with you that the bug is in another library.

Update: When just setting the searchbar dynamically using navigation.setOptions the described bug still occurs inside the tabbar, but when providing a static default searchbar using the headerSearchBarOptions in Stack.Screen it always works fine on iOS.

[amitava82]

Still issue on Android with Expo 50

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[Acetyld]

Lets keep it open, still present

[Faliszek]

Not sure if this helps to debug, but maybe someone find useful as workaround.

For me issue fixes itself if I remove refreshing and onRefresh prop from my FlatList. My code looks more or less like this

  useLayoutEffect(() => {
    props.navigation.setOptions({
      headerSearchBarOptions: {
        hideWhenScrolling: false,
        inputType: "text",
        placeholder: "Search assets",
        onChangeText: (event) => {
          setSearchParams((params) => ({
            ...params,
            search: event.nativeEvent.text,
          }));
        },
      },
    });
  }, [props.navigation]);

Component:

 return (
    <FlatList
      // refreshing={loading}
      // onRefresh={() => loadAssets(searchParams)}
      contentInsetAdjustmentBehavior="automatic"
      data={list}
        ListFooterComponent={() => {
        if (!loading) return null;
        return (
          <View style={styles.loadingIndicator}>
            <ActivityIndicator size="large" />
          </View>
        );
      }
      // Rest of component ...
      }} 
     />

Here are my dependencies:

    "@react-navigation/native": "^6.1.15",
    "@react-navigation/native-stack": "^6.9.24",
    "expo": "~50.0.11",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.4",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0"

Here are screen recordings 1) Without passing refreshing and onRefresh, 2) With refreshing and onRefresh I am guessing it is something with calculating changes on layout?

https://github.com/react-navigation/react-navigation/assets/19210348/3ab9bd7a-8eaf-436e-884e-fccccbfe4545 https://github.com/react-navigation/react-navigation/assets/19210348/19c3e364-d3b7-4d6f-ad4d-9ef9709ff5a4

Let me know if there is anything I can provide to help it debug

[amitava82]

It didn't make any difference. The basic repo case in issue https://github.com/react-navigation/react-navigation/issues/10956 has no FlatList

[coofzilla]

For me, if I remove FlatList then the search bar will render initially; however, if I add the FlatList I have to scroll first for it to appear.