React-native-navigation: [ios][v2] searchBarHiddenWhenScrolling doesn't work when searchBar is present on root screen

Created on 23 Jun 2018  ·  14Comments  ·  Source: wix/react-native-navigation

Issue Description

The searchBarHiddenWhenScrolling style property should make the search bar hide under the top bar when the user scrolls down in the content view. This works when the search bar is present on a child screen of the navigation stack, but when the search bar is present on the root screen of the navigation stack, it doesn't scroll away.

I looked into why this is happening, and it seems like it is due to the UIViewController lifecycle methods being called before the searchController property of the navigationItem is set. That is why this works properly for pushed screens, because in that case the UIViewController lifecycle methods are called after the view controller subviews have been set, thanks to the onReactViewReady call in -[RNNCommandsHandler push:layout:completion:rejection:]. That means one fix for this would be to ensure that the lifecycle methods are called for the root VC only after the react view is ready in setRoot, like we do in push.

I tried making a change that fixes this issue with an approach similar to how showModal handles this, but I was not totally confident this fix is the right approach. The patch is here: https://gist.github.com/benhiller/5e6fdc8535f63a32680c1c46628d93b4. Let me know if this does seem like a reasonable approach to fix this issue and I can send out a pull request with this change.

Steps to Reproduce / Code Snippets / Screenshots

  1. Apply this patch to the v2 branch: https://gist.github.com/benhiller/dab2beacfb03eb35bd6aa5364e5767cf
  2. Tap 'Push SearchBar' on the welcome screen
  3. Scroll down, see that the search bar doesn't hide under the TopBar.

GIF demonstrating the issue: https://gfycat.com/FatherlyCarelessDolphin


Environment

  • React Native Navigation version: v2 at commit fbf8ea13874983b97c381bc3bac1cfcba9cd5b1c
  • React Native version: 0.51.1
  • Platform(s) (iOS, Android, or both?): iOS
  • Device info (Simulator/Device? OS version? Debug/Release?): iPhone 6 Simulator, iOS 11.4, Debug
v2 🏚 stale

Most helpful comment

This is still broken.

All 14 comments

I am experiencing this issue as well.

@yogevbd, it looks like you have touched the most relevant parts of RNNCommandsHandler.m for this issue. If you get a chance, would you be willing to take a look at this issue/my suggested fix and let me know if it seems like it is on the right track? Thanks!

@benhiller, after updating to the 2.0.2397 I got the same regression. Your patch is working fine with default stack layout but seems to not working with other layouts, such as bottomTabs. Anyway, I'm curious if your explanation is right and if it's possible to write a test. Would love to help, but @yogevbd might have best understanding of this.

Facing same issue.
The RNNRootViewController > viewDidAppear method, where the searchBarHiddenWhenScrolling option apply. Never get called.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

The issue has been closed for inactivity.

This is still occurring.

Doesn't work for me either.
Could you please reopen this issue?

This is still broken.

Still broken

Is this planned to be fixed?

This is still broken on RNN V4

@jfrolich @maitrungduc1410 I wouldn't hold your breath for this to be fixed. In the amount of time that has passed since it was first reported, you could just learn to build your app without React Native. That was the approach I ended up taking.

@jfrolich @maitrungduc1410 I wouldn't hold your breath for this to be fixed. In the amount of time that has passed since it was first reported, you could just learn to build your app without React Native. That was the approach I ended up taking.

Yeah I'd probably pull-request it. I didn't ship with autohide because it wasn't a priority atm. Actually we have good experience with react-native, just you have to be prepared to add some native code to get the best experience.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

no23reason picture no23reason  ·  3Comments

charlesluo2014 picture charlesluo2014  ·  3Comments

nbolender picture nbolender  ·  3Comments

birkir picture birkir  ·  3Comments

henrikra picture henrikra  ·  3Comments