[ListView + NavigatorIOS] Proper way to adjust the component's `top`

[lazywei]

Hi,

I got such components hierarchy:

NavigatorIOS > TabBarIOS > TabBarIOS.Item > ListView

However, it seems the ListView inside the TabBarIOS will not be "positioned" correct. For example:

I will need to set something like style={{top: 30}} to the TabBarIOS.Item to fix it. However, this solution seems to be not that "clever", and it is not responsive.

I'm wondering is there any proper way to adjust the "top" of the inner ListView?

Thanks

[ide]

Could you put the NavigatorIOS inside the TabBarIOS.Item? ListView (and its underlying ScrollView) have a prop to automatically adjusts its content insets, which is kind of like the padding for scrollable content and what starts the scroll view off below the nav bar. The thing is that automatic inset adjustment might only look at the parent view controller (disclaimer: check the code to be sure) so putting the tab bar in the nav bar might mix things up compared to the other way around. Generally speaking it's much more common to put a nav in a tab than vice versa so I would give that a shot; just a thought.

[lazywei]

Thanks for replying!

Actually I originally put the nav inside the tab. However, I want the bottom bar be hidden when pushing a new view. Unfortunately, there is no API for hiding tab bar in RN, and that's why I think maybe I need to put nav outside the tab.

Do you know how I can solve the problem?

thanks

-- Chih-Wei Sent from Mailbox

On Fri, Apr 17, 2015 at 6:58 PM, James Ide notifications@github.com wrote:

Could you put the NavigatorIOS inside the TabBarIOS.Item? ListView (and its underlying ScrollView) have a prop to automatically adjusts its content insets, which is kind of like the padding for scrollable content and what starts the scroll view off below the nav bar. The thing is that automatic inset adjustment might only look at the parent view controller (disclaimer: check the code to be sure) so putting the tab bar in the nav bar might mix things up compared to the other way around. Generally speaking it's much more common to put a nav in a tab than vice versa so I would give that a shot; just a thought.

Reply to this email directly or view it on GitHub: https://github.com/facebook/react-native/issues/898#issuecomment-93964690

[ide]

The simplest solution is probably to do what you were doing and set the top/paddingTop/contentInset (last one for scroll views, top should be 64 and bottom is 49 for iOS's nav and tab bars IIRC. Also set automaticallyAdjustContentInsets to false).

[lazywei]

So the numerical value is actually responsive in different devices? For example, top=46 should work for iPhone5s and iPhone6, right? Thanks.

[ide]

It's not responsive but to my knowledge the nav bar is always 44pt + 20pt for the status bar on all devices (iOS 7 and up)

[nicklockwood]

That's not entirely true. The navigation bar changes height in landscape mode, and the status bar changes height if various background tasks are running, such as audio recording using the Voice Memos app, or if you're running a wifi hotspot.

[lazywei]

@ide thanks for the suggestion. I finally used {top: 40} for TabBarIOS.Item, and set no bottom for it. Thanks :smile:

@nicklockwood If I only set the top attributes to the inner TabBarIOS.Item instead of TabBarIOS, then the status bar's height will not have any effect, right?

[brentvatne]

@lazywei - did you manage to resolve your issue?

[lazywei]

@brentvatne hey, thanks for following up this! I solved this by setting "top" and "margin*" like things. It would be great if we can have a better solution to this, yet please feel free to close this issue :+1:

[brentvatne]

@lazywei - agreed, cc @vjeux

[vjeux]

Yes, we need a better solution...

[brentvatne]

PR welcome if someone wants to take a stab at solving this problem!

[rocman]

Looking forward to the solution.

[JCzz]

I have the same using 0.14.0-rc. But if I put the device in landscape and back again to portrait, then it works. Any idea?

[rocman]

seems the bugfix is not included in 0.14 rc if you urge to fix it, maybe you can modify your code following the pull request above

[JCzz]

Thanks rocman. I do have this PR in 0.14 rc in my code from npm. Or Am I missing something If I have you code : https://github.com/rocman/react-native/commit/2d7261c201eb6f3eb9ca308474e9cd1a0ca0ca68 That should fix it right? Or did I hit another scenario(TabBar >> NavigatorIOS >> ListView) with same outcome? Regards

[edo1493]

I managed to solve this with a simple flex:1 on my NavigatorIOS tab bar ages ago (I was probably using 0.8.0). However, after downloading 0.13.0, I have got this issue again. : O

[edo1493]

My temporary fix is automaticallyAdjustContentInsets={false} in the and then, I add marginTop: 64, marginBottom: 49 to the listview style.

[JCzz]

Thanks edo1493. I did paddingTop: 64. It looks like a thing in iOS: http://stackoverflow.com/questions/18103715/navigation-bar-appear-over-the-views-with-new-ios7-sdk

I tried to set the translucent, but nothing worked. Thanks

[DickyT]

I found the solution guys and I pack it as a npm package! npm install react-native-tabbar-navigator or check GitHub

[felipebueno]

Hello guys!

@edo1493 @JCzz @lazywei did you find a better solution for that? It happens on 0.14.1.

For now I'm using @edo1493's solution which works fine :smile: but I think there must be a better (and responsive) way to do that.

[DickyT]

@felipebueno maybe you can checkout my package, uit is react-native-tabbar-navigator on npm, it is stands for to solve this problem and at the same time, you can customize the Navigator items as you want

[felipebueno]

Hi, @DickyT. I actually looked at your package but I don't want to add another dependency to my project. Can you tell us how you solved this problem, please?

[DickyT]

@felipebueno sure, I use a Navigator (not NavigatorIOS) to wrap a TabBarIOS inside, when tabbar changed, then send a event back the root Navigator to change the navigator title. And all the push operation is push over the root Navigator. Feel free to check out my source code lol

[felipebueno]

Nice, thanks @DickyT

I'll check it out as soon as I get home.

[pvinis]

why cant we have a NavigatorIOS.height or something?