Search bar not rendering on iOS or Android on initial render #11627

homit-dalia · 2023-10-06T19:25:15Z

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

#10848

Platform

Packages

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 · 2023-10-06T19:25:27Z

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 · 2023-10-06T19:25:29Z

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 · 2023-10-13T18:08:54Z

Any update on this?

homit-dalia · 2023-10-14T06:47:18Z

@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 · 2023-10-24T14:19:40Z

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 · 2023-11-08T00:23:12Z

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

homit-dalia · 2023-11-08T04:50:15Z

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 · 2023-11-15T19:19:13Z

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

nandorojo · 2023-11-16T23:28:05Z

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 · 2023-11-17T09:49:41Z

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

WhidRubeld · 2023-11-17T16:33:59Z

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 · 2023-12-18T01:45:20Z

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 · 2023-12-22T09:41:05Z

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 · 2023-12-22T10:17:42Z

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 · 2023-12-22T10:33:28Z

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 · 2023-12-23T03:34:09Z

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

ysnbyzli · 2023-12-23T08:11:00Z

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 · 2023-12-25T13:20:35Z

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 · 2023-12-26T17:17:23Z

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 · 2023-12-26T18:03:22Z

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 · 2023-12-26T18:31:18Z

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 · 2023-12-26T20:40:00Z

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 · 2023-12-26T20:42:41Z

software-mansion/react-native-screens#1883

Robert27 · 2024-01-09T08:09:52Z

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 · 2024-02-05T10:53:17Z

Still issue on Android with Expo 50

github-actions · 2024-03-07T01:38:06Z

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 · 2024-03-07T18:45:41Z

Lets keep it open, still present

Faliszek · 2024-03-13T09:28:12Z

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 · 2024-03-13T10:41:08Z

It didn't make any difference. The basic repo case in issue #10956 has no FlatList

coofzilla · 2024-03-22T02:44:54Z

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.

Jbraneke · 2024-04-19T09:19:57Z

PLEASE FIX THIS PROBLEM!!!!!!!!! I NEEED HELP

marijang · 2024-04-24T16:42:49Z

Yep, i m also trying to show and hide search bar but it is so buggy. When state change it says that i need to use useLayoutEffect....

can u add function for show/hide

useLayoutEffect(() => {
    if(events.planner.events.length > 0) {
      navigation.setOptions({
        headerSearchBarOptions: {
          placeholder: 'Search...',
          hideWhenScrolling: false,
          tintColor: theme.colors.primary,
          textColor: theme.colors.text,
          hintTextColor: theme.colors.textLight,
          
          onSearchButtonPress: ({ nativeEvent }) => {
            console.log('Search submitted:', nativeEvent.text); // Handle search submission
          },
          onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
        },
      });
    }
  }, [navigation, events.planner.events.length]);

`

jmarsh24 · 2024-04-26T17:10:46Z

I'm also running into this issue. Are there any temporary workarounds? This issue has been open for a long while.

marijang · 2024-04-26T17:28:10Z

hm im thinking to set different route if there is records or not...

github-actions · 2024-05-27T01:46:28Z

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.

alberalgo · 2024-07-02T11:47:23Z

Using hideWhenScrolling in screenOptions of a Stack.Navigator in iOS reproduce this wrong behaviour also for me.
With any List component as root -> broken.
With any other component like a View -> correct
Any thoughts?

github-actions · 2024-07-02T11:47:34Z

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.

jvegax · 2024-07-23T12:42:28Z

Still facing same issue, on Android is not working

github-actions · 2024-07-23T12:42:40Z

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.

kerimovok · 2024-08-01T19:39:42Z

Yep, i m also trying to show and hide search bar but it is so buggy. When state change it says that i need to use useLayoutEffect....

can u add function for show/hide

useLayoutEffect(() => {
    if(events.planner.events.length > 0) {
      navigation.setOptions({
        headerSearchBarOptions: {
          placeholder: 'Search...',
          hideWhenScrolling: false,
          tintColor: theme.colors.primary,
          textColor: theme.colors.text,
          hintTextColor: theme.colors.textLight,
          
          onSearchButtonPress: ({ nativeEvent }) => {
            console.log('Search submitted:', nativeEvent.text); // Handle search submission
          },
          onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
        },
      });
    }
  }, [navigation, events.planner.events.length]);

`

This helped, just using setOptions instead of <Stack.Screen options={...}/>

github-actions · 2024-08-01T19:39:52Z

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.

fredrikburmester · 2024-08-14T17:05:26Z

I also still want a solution.

github-actions · 2024-08-14T17:05:38Z

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.

github-actions · 2024-08-23T17:39:49Z

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.

homit-dalia added the bug label Oct 6, 2023

github-actions bot added platform:android platform:ios labels Oct 6, 2023

github-actions bot added the needs repro label Oct 6, 2023

github-actions bot added the package:react-native-tab-view label Oct 24, 2023

nandorojo mentioned this issue Nov 16, 2023

Search bar not rendering on iOS or Android on initial render #10848

Closed

11 tasks

github-actions bot added the stale label Dec 18, 2023

github-actions bot removed the stale label Dec 23, 2023

Robert27 mentioned this issue Jan 9, 2024

Search bar header icon not rendering Android on initial render #10956

Open

12 tasks

github-actions bot added the stale label Mar 7, 2024

github-actions bot removed the stale label Mar 8, 2024

satya164 removed the package:react-native-tab-view label Mar 15, 2024

github-actions bot added the stale label May 27, 2024

github-actions bot closed this as completed Jun 3, 2024

Search bar not rendering on iOS or Android on initial render #11627

Search bar not rendering on iOS or Android on initial render #11627

Comments

homit-dalia commented Oct 6, 2023 • edited Loading

Current behavior

Expected behavior

Reproduction

Platform

Packages

Environment

github-actions bot commented Oct 6, 2023

github-actions bot commented Oct 6, 2023

Acetyld commented Oct 13, 2023

homit-dalia commented Oct 14, 2023 • edited Loading

github-actions bot commented Oct 24, 2023

Robert27 commented Nov 8, 2023 • edited Loading

homit-dalia commented Nov 8, 2023

JcbPrn commented Nov 15, 2023

nandorojo commented Nov 16, 2023 • edited Loading

vbornand commented Nov 17, 2023

WhidRubeld commented Nov 17, 2023

github-actions bot commented Dec 18, 2023

ysnbyzli commented Dec 22, 2023

WhidRubeld commented Dec 22, 2023

vbornand commented Dec 22, 2023

sidorchukandrew commented Dec 23, 2023

ysnbyzli commented Dec 23, 2023

Robert27 commented Dec 25, 2023

WhidRubeld commented Dec 26, 2023

vbornand commented Dec 26, 2023

Robert27 commented Dec 26, 2023 • edited Loading

WhidRubeld commented Dec 26, 2023

WhidRubeld commented Dec 26, 2023

Robert27 commented Jan 9, 2024

amitava82 commented Feb 5, 2024

github-actions bot commented Mar 7, 2024

Acetyld commented Mar 7, 2024

Faliszek commented Mar 13, 2024 • edited Loading

amitava82 commented Mar 13, 2024

coofzilla commented Mar 22, 2024

Jbraneke commented Apr 19, 2024

marijang commented Apr 24, 2024 • edited Loading

jmarsh24 commented Apr 26, 2024

marijang commented Apr 26, 2024

github-actions bot commented May 27, 2024

alberalgo commented Jul 2, 2024 • edited Loading

github-actions bot commented Jul 2, 2024

jvegax commented Jul 23, 2024

github-actions bot commented Jul 23, 2024

kerimovok commented Aug 1, 2024

github-actions bot commented Aug 1, 2024

fredrikburmester commented Aug 14, 2024

github-actions bot commented Aug 14, 2024

github-actions bot commented Aug 23, 2024

homit-dalia commented Oct 6, 2023 •

edited

Loading

homit-dalia commented Oct 14, 2023 •

edited

Loading

Robert27 commented Nov 8, 2023 •

edited

Loading

nandorojo commented Nov 16, 2023 •

edited

Loading

Robert27 commented Dec 26, 2023 •

edited

Loading

Faliszek commented Mar 13, 2024 •

edited

Loading

marijang commented Apr 24, 2024 •

edited

Loading

alberalgo commented Jul 2, 2024 •

edited

Loading