Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 8 years ago
Reactions:1
Comments:26 (10 by maintainers)

Top GitHub Comments

2reactions

edo1493commented, Oct 30, 2015

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

1reaction

idecommented, Apr 17, 2015

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).

Top Results From Across the Web

React-Native ListView under NavigatorIOS - Stack Overflow

When using the NavigatorIOS you need to add a marginTop to the next component of whatever the height is, so try something like...

ListView · React Native

ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a...

NavigatorIOS · React Native

To set up the navigator, provide the initialRoute prop with a route object. ... the NavigatorIOS component when the right navigation bar item...

Demo: Building with React Native Components - MentorMate

Best Practices for Building an App with React Native. React native components offer a variety of advantages for teams building across platforms. Learn...

4. Components for Mobile - Learning React Native [Book]

Next, we will cover higher-level components, such as the <ListView> , <TabView> , and ... The best way to get a sense for...